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;
});

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

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

$.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>

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

1 个答案: