1

我正在使用 flot 并返回 JSON，并提供了初始化，图表上只有第一个系列可见，但是，图例显示了所有 3 个系列标签。知道我做错了什么吗？

var data = [];

    function onDataReceived(seriesData) {

        var options = {
            series: { stack: false,
                lines: { show: true, steps: false },
                bars: { show: false, barWidth: 0.5, align: 'center', horizontal: true },
                points: { show: true, radius: 3, symbol: 'circle' }
            },
            yaxis: { show: true, tickLength: 0 },
            xaxis: { tickSize: [1, "month"], tickLength: 0, mode: 'time', timeformat: '%b %y' },
            legend: { show: true, container: $('#@(ctlId)chartLegend'), noColumns: 3 },
            grid: { borderWidth: 0, hoverable: true, clickable: true }

        };


        var p = $.plot($('#@(ctlId)'), seriesData.seriesData, options);

还有我的 MVC 处理程序：

return Json(new
        {
            axisNames = new List<string[]>() { },
            seriesData = new[]
        {
            new {
            color = "#e17009",
            label = "RN",
            data = new List<string[]>() {
                new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "4.2"},
                new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "4.8"},
                new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.5"},
                new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "5.0"},
                new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.6"}
                }
            },
            new {
            color = "#ff0000",
            label = "RA",
            data = new List<string[]>() {
                new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.2"},
                new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.8"},
                new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "3.5"},
                new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.0"},
                new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.6"}
                }
            }
            ,
            new {
            color = "#5c9ccc",
            label = "RA",
            data = new List<string[]>() {
                new string[] {DateTime.Parse("7/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.2"},
                new string[] {DateTime.Parse("8/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.8"},
                new string[] {DateTime.Parse("9/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.5"},
                new string[] {DateTime.Parse("10/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "1.0"},
                new string[] {DateTime.Parse("11/12/2012", System.Globalization.CultureInfo.InvariantCulture).GetJavascriptTimestamp().ToString(System.Globalization.CultureInfo.InvariantCulture), "2.4"}
                }
            }
        }
        },
        JsonRequestBehavior.AllowGet);
4

1 回答 1

2

我终于解决了这个问题。Flot似乎没有希望在设置为FALSE时使用该选项呈现多个系列，stack: false并且您也引用jquery.flot.stack.js插件。删除stack下面代码中的属性解决了我的问题。如果您没有引用堆栈插件，您可以保留该stack: false属性，它也会正确显示附加系列。希望它可以帮助某人。

返回的 JSON 是正确的。

var data = [];

function onDataReceived(seriesData) {

    var options = {
        series: { 
            lines: { show: true, steps: false },
            bars: { show: false, barWidth: 0.5, align: 'center', horizontal: true },
            points: { show: true, radius: 3, symbol: 'circle' }
        },
        yaxis: { show: true, tickLength: 0 },
        xaxis: { tickSize: [1, "month"], tickLength: 0, mode: 'time', timeformat: '%b %y' },
        legend: { show: true, container: $('#@(ctlId)chartLegend'), noColumns: 3 },
        grid: { borderWidth: 0, hoverable: true, clickable: true }

    };


    var p = $.plot($('#@(ctlId)'), seriesData.seriesData, options);
于 2012-09-03T20:01:53.873 回答