來自JSON文件和Chart.js的多行/數據系列

我在一張圖的多行上看到了一些例子，並在Chart.js中通過JSON文件完成了一些簡單的餅圖和條形圖。來自JSON文件和Chart.js的多行/數據系列

目前容易酒吧和餅圖是這樣的：

$.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 但我（現在仍然在Python /大熊貓的）我仍然不知道如何獲得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軸，來源是不同的線/數據系列。

來源

2017-06-17 Chris

不，您不需要多個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>

來源

2017-06-17 15:52:27

來自JSON文件和Chart.js的多行/數據系列

回答

相關問題