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

現在，要實際創建多折線圖，您必須為每個源制作單獨的數據集。

這是一個將所有內容放在一起的工作示例...

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