问题描述
<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
我试过这个
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 会理解.
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 中绘制折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！