使用 JSON 绘制 js 图表

Question

嗨，我有这个 JSON 结果

[{"date":"1/1/2020 12:00:00 AM","Count":2},
{"date":"1/2/2020 12:00:00 AM","Count":1},
{"date":"1/3/2020 12:00:00 AM","Count":0},
{"date":"1/4/2020 12:00:00 AM","Count":0}]

我有使用图表JS的简单图表。 我如何在使用我的 json 结果的情况下做同样的事情 X 是日期，Y 是计数。

使用这个。

var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Earnings",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: [0, 10000, 5000, 15000, 10000, 20000, 15000, 25000, 20000, 30000, 25000, 40000],
}],
},

对不起，我只是JS的新手。 希望有人帮助我. 提前谢谢你。

Answer 1

希望能帮助你。

var jsonfile = {
"jsonarray": [{
"date": "1/1/2020 12:00:00 AM",
"Count": 2
},
{
"date": "1/2/2020 12:00:00 AM",
"Count": 1
},
{
"date": "1/3/2020 12:00:00 AM",
"Count": 0
},
{
"date": "1/4/2020 12:00:00 AM",
"Count": 0
}
]
};
var labels = jsonfile.jsonarray.map(function(e) {
return e.date;
});
var data = jsonfile.jsonarray.map(function(e) {
return e.Count;
});;
var ctx = canvas.getContext('2d');
var config = {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "Earnings",
lineTension: 0.3,
backgroundColor: "rgba(78, 115, 223, 0.05)",
borderColor: "rgba(78, 115, 223, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(78, 115, 223, 1)",
pointBorderColor: "rgba(78, 115, 223, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: data,
backgroundColor: 'rgba(0, 119, 204, 0.3)'
}]
}
};
var chart = new Chart(ctx, config);

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>