[英]Populating Chart.Js line graph with multiple lines using data from a JSON Object
[英]Multiple lines / data series from JSON file with Chart.js
我已经在一个图形中看到了多行示例,并通过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轴,而数据源是不同的行/数据序列。
不,您不需要多个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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.