JSONファイルからChart.jsを含む複数の行/データ系列

Question

複数の行を1つのグラフで表示し、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ファイルをフォーマットする方法を想像することはできません。 各行に1つずつ、複数のJSONファイルを用意する必要がありますか？ もしそうなら、それを私のキャンバスにどのように読み込むのですか？

JSONファイルを複数の行に1つのファイルしか使用できないようにフォーマットすることはできますか？私はこの例を見てきました ：マイデータ

... https://codepen.io/k3no/pen/pbYGVa を私はまだ一緒にJSONや複数行を取得する方法についてはよく分からないが（まだパイソン/パンダで今のところ）次のようになります。

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ファイル（各行に1つ）は必要ありません。単一の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>

...すべて一緒に入れて実施例であります