jquery - CanvasJS 图表未填充

Question

我正在尝试使用来自 RESTful Web 服务的一些数据填充折线图（CanvasJS）。

出现在我面前的 JSON 数组如下所示：

[
[
    {
        "periodo": "2014-03-03",
        "quantidade": 2
    },
    {
        "periodo": "2014-09-13",
        "quantidade": 1
    },
    {
        "periodo": "2015-06-23",
        "quantidade": 6
    },
    {
        "periodo": "2015-06-24",
        "quantidade": 2
    },
    {
        "periodo": "2015-06-25",
        "quantidade": 1
    }
],
[
    {
        "periodo": "2015-06-23",
        "quantidade": 1
    }
]
]

即，两个数组（我想在图中的两行中转换）。在我的 jQuery 代码中，我向这个 JSON 数组添加了一些属性，如下所示：

var chartdata = [];

jQuery.each(data, function(i, val) {     
   var chart = {};
   chart["type"] =          "spline";
   chart["showInLegend"] =  true;
   chart["dataPoints"] =    val;
   chartdata.push(chart);
});

最后我打电话给抽屉：

var chart = new CanvasJS.Chart("chartContainer",{
            animationEnabled: true,
            zoomEnabled: true,
            data: chartdata,
            legend: {
                cursor: "pointer",
                itemclick: function (e) {
                    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                        e.dataSeries.visible = false;
                    } else {
                        e.dataSeries.visible = true;
                }
                chart.render();
                }
            }
        });

但是没有绘制图表。也没有错误。我比较了我的最终 JSON 数组，它与CanvasJS 示例中的非常相似

我在哪里失踪？

Answer 1

看起来您的 chart.render() 仅在图例对象中。在创建图表对象后尝试放置它（见下文）。

我希望这有帮助。垫

var chart = new CanvasJS.Chart("chartContainer",{
    animationEnabled: true,
    zoomEnabled: true,
    data: chartdata,
    legend: {
        cursor: "pointer",
        itemclick: function (e) {
            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            chart.render();
        }
    }
});
chart.render();