来自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的多行/数据系列

回答

相关问题