使用 Chart.js 来自 JSON 文件的多行/数据系列

Question

我在一张图中看到了一些多行示例，并通过 Chart.js 中的 JSON 文件制作了一些简单的饼图和条形图。

目前简单的条形图和饼图如下所示：

$.getJSON("http://127.0.0.1/charts/test/amounts.json", function (result)
{
    var labels = [], data = [];

    for (var i = 0; i < result.length ; i++)
    {
        labels.push(result[i].source);
        data.push(result[i].amount);
    }

    var ctx = document.getElementById("myChart").getContext("2d");
    ctx.canvas.width = 800;
    ctx.canvas.height = 500;

    var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                {
                        label: "Total products per Source",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: data
                }
            ]}
    });
});

但我无法想象如何启动或格式化我的多行 JSON 文件。我是否需要有多个 JSON 文件，每一行一个？如果是这样，我如何将其加载到我的画布中？

或者我可以以某种方式格式化我的 JSON 文件，以便我只能将一个文件用于多行吗？我看过这个例子： https: //codepen.io/k3no/pen/pbYGVa 但我仍然不确定如何将 JSON 和多行放在一起..

我的数据（目前仍在 Python/Pandas 中）如下所示：

source       time            rating
Source1      2017-05-14       13919
             2017-06-04       14154
Source2      2017-05-28         272
             2017-06-11         307
             2017-06-18         329
Source3      2017-06-04        3473
             2017-06-11        3437

我希望将时间作为 x 轴，将评级作为 y 轴，源是不同的行/数据系列。

Answer 1

不，您不需要多个 JSON 文件（每一行一个）。单个 JSON 文件足以创建多线图表。

考虑到，您的 JSON 文件/数据看起来有点像这样......

[{ "date": "2017-05-14", "source1": 13919, "source2": 0, "source3": 0 }, { "date": "2017-05-28", "source1": 0, "source2": 272, "source3": 0 }, { "date": "2017-06-04", "source1": 14154, "source2": 0, "source3": 3473 }, { "date": "2017-06-11", "source1": 0, "source2": 307, "source3": 3437 }, { "date": "2017-06-18", "source1": 0, "source2": 329, "source3": 0 }]

^{注意：如果特定日期没有源数据，则需要0为其添加一个}

您可以按以下方式格式化/解析它，使其可用于多折线图...

var labels = result.map(function(e) {
   return e.date;
});
var source1 = result.map(function(e) {
   return e.source1;
});
var source2 = result.map(function(e) {
   return e.source2;
});
var source3 = result.map(function(e) {
   return e.source3;
});

现在，要实际创建多线图表，您必须为每个源创建单独的数据集。

这是一个将所有内容放在一起的工作示例......

[{ "date": "2017-05-14", "source1": 13919, "source2": 0, "source3": 0 }, { "date": "2017-05-28", "source1": 0, "source2": 272, "source3": 0 }, { "date": "2017-06-04", "source1": 14154, "source2": 0, "source3": 3473 }, { "date": "2017-06-11", "source1": 0, "source2": 307, "source3": 3437 }, { "date": "2017-06-18", "source1": 0, "source2": 329, "source3": 0 }]

var labels = result.map(function(e) {
   return e.date;
});
var source1 = result.map(function(e) {
   return e.source1;
});
var source2 = result.map(function(e) {
   return e.source2;
});
var source3 = result.map(function(e) {
   return e.source3;
});