使用json响应绘制chart.js中的折线图 [英] Drawing line chart in chart.js with json response
问题描述
<script type="text/javascript">
$(function() {
$.ajax({
type: "POST",
url: "BillnAmount",
cache: false,
dataType: 'json',
success: function(data) {
console.log(data);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
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: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);
var myLineChart = new Chart(ctx).Line(data);
}
});
});
</script>
我用ajax调用url并以json格式获取响应。
I am calling a url with ajax and getting its response in json format.
在ajax调用中我正在绘制折线图，其中 Chart.js 正常工作。
Inside ajax call I am drawing Line chart with Chart.js which is working properly.
现在我想用json响应数据更改上面的图表值我的json响应值是
Now I want to change above chart value with json response data my json response value is
{"billDetails":
[{"invoiceDate":"2014-07-24T00:00:00","totalAmount":1031.00,"totalBills":1},
{"invoiceDate":"2014-07-15T00:00:00","totalAmount":7281.00,"totalBills":3},
{"invoiceDate":"2014-07-12T00:00:00","totalAmount":14841.00,"totalBills":7},
{"invoiceDate":"2014-07-11T00:00:00","totalAmount":1294.00,"totalBills":3},
{"invoiceDate":"2014-07-10T00:00:00","totalAmount":674.00,"totalBills":3},
{"invoiceDate":"2014-07-09T00:00:00","totalAmount":2.00,"totalBills":1},
{"totalAmount":114.00,"totalBills":10}]}
我应该做哪些更改，因此必须显示来自json的数据回复
What changes should I do so it must display data from json response
编辑：
我试过这个
I tried this
var data1;
$.each(data.billDetails, function(i, value) {
data1 = {
labels: data.billDetails[i].invoiceDate,
datasets: [
{
label: "My First dataset",
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.billDetails[i].totalBills
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: data.billDetails[i].totalAmount
}
]
};
});
在控制台上显示以下内容
On console it is showing following
Uncaught TypeError: Cannot read property 'x' of undefined
我的格式数据
2014-07-24T00:00:00 1 1031
2014-07-15T00:00:00 3 7281
2014-07-12T00:00:00 7 14841
2014-07-11T00:00:00 3 1294
2014-07-10T00:00:00 3 674
2014-07-09T00:00:00 11 116
仅显示以下图片
推荐答案
你走在正确的轨道上，你将不得不迭代你的json并将其转换为结构图.js会理解。
You're on the right track, you'll have to iterate over your json and convert it into an structure chart.js will understand.
您应该从包含所有静态信息的空结构开始：
You should start with an empty structure containing all the static information:
var chartData = {
labels: [], // currently empty will contain all the labels for the data points
datasets: [
{
label: "Total Bills",
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: [] // currently empty will contain all the data points for bills
},
{
label: "Total Amount",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [] // currently empty will contain all the data points for bills
}
]
};
到目前为止，这不会打印您的图表，但它包含所有必要的信息，如行标签和颜色。
So far this will not print your chart, but it contains all the necessary information, like line labels and colors.
现在迭代你的数组：
$.each(data.billDetails, function(position, billDetail) {
// first use the invoiceDate as a label
if (billDetail.invoiceDate) {
// You should probably format that
chartData.labels.push(billDetail.invoiceDate);
} else {
// your last data entry doesn't have an invoiceDate
chartData.labels.push(''); // blank or think of something creative
}
// add the totalBills and totalAmount to the dataset
chartData.datasets[0].data.push(billDetail.totalBills);
chartData.datasets[1].data.push(billDetail.totalAmount);
});
现在你可以让chart.js呈现 chartData 。
And now you can let chart.js render the chartData.
这篇关于使用json响应绘制chart.js中的折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
