javascript - 来自带有 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 文件，每行一个？如果是这样，我如何将它加载到我的 Canvas 中？

或者我能否以某种方式格式化我的 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;
});

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

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

$.getJSON('https://istack.000webhostapp.com/json/t6.json', function(result) {

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

   var ctx = document.getElementById("myChart").getContext("2d");
   var myChart = new Chart(ctx, {
      type: 'line',
      data: {
         labels: labels,
         datasets: [{
            label: "Source 1",
            data: source1,
            borderWidth: 2,
            backgroundColor: "rgba(6, 167, 125, 0.1)",
            borderColor: "rgba(6, 167, 125, 1)",
            pointBackgroundColor: "rgba(225, 225, 225, 1)",
            pointBorderColor: "rgba(6, 167, 125, 1)",
            pointHoverBackgroundColor: "rgba(6, 167, 125, 1)",
            pointHoverBorderColor: "#fff"
         }, {
            label: "Source 2",
            data: source2,
            borderWidth: 2,
            backgroundColor: "rgba(246, 71, 64, 0.1)",
            borderColor: "rgba(246, 71, 64, 1)",
            pointBackgroundColor: "rgba(225, 225, 225, 1)",
            pointBorderColor: "rgba(246, 71, 64, 1)",
            pointHoverBackgroundColor: "rgba(246, 71, 64, 1)",
            pointHoverBorderColor: "#fff"
         }, {
            label: "Source 3",
            data: source3,
            borderWidth: 2,
            backgroundColor: "rgba(26, 143, 227, 0.1)",
            borderColor: "rgba(26, 143, 227, 1)",
            pointBackgroundColor: "rgba(225, 225, 225, 1)",
            pointBorderColor: "rgba(26, 143, 227, 1)",
            pointHoverBackgroundColor: "rgba(26, 143, 227, 1)",
            pointHoverBorderColor: "#fff"
         }]
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>