<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调用网址,并以json格式获取其响应。
在ajax调用中,我正在绘制折线图,Chart.js
该图可以正常工作。
现在我想使用json响应数据更改图表值以上,我的json响应值是
{"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响应中的数据
编辑:我尝试了
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
}
]
};
});
在控制台上,它显示以下内容
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并将其转换为chart.js可以理解的结构。
您应该从一个包含所有静态信息的空结构开始:
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
}
]
};
到目前为止,这不会打印您的图表,但其中包含所有必要的信息,例如线标签和颜色。
现在遍历数组:
$.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
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句