Question

我正在使用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);

Answer 1

我终于解决了这个问题。当Flot设置为false并且您还引用stack: false插件时，Flot似乎不希望使用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);

绘图仅显示第一个系列数据

1 个答案: