使用json响应绘制chart.js中的折线图

 $(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); } }); });  

我用ajax调用url并以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并将其转换为结构图表.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

您的JSON结果应该与chardata结构相同,然后进行此操作

  var charData = { labels = [\\months] datasets: data.datasets } 

如果您的响应(在我的情况下是data.datasets)具有sam结构,就像在这些示例中硬编码一样。