我已经制作了使用javascript生成图表的代码并且工作正常，正如您在剪切代码中看到的那样，数据是硬编码的，问题是如何使这些代码与ajax数据而不是硬编码数据一起工作？
代码：
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Average monthly rainfull for 30 years"
},
animationEnabled: true,
axisY: {
title: "Precipitation inches",
includeZero: false
},
axisX: {
title: "Months",
interval: 1
},
toolTip: {
shared: true,
content: function (e) {
var body = new String;
var head;
for (var i = 0; i < e.entries.length; i++) {
var str = "<span style = 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: strong" + e.entries[i].dataPoint.y+ "</strong>''<br/>";
body = body.concat(str);
}
head = "<span style = color:DodgerBlue;'><strong>" + (e.entries[0].dataPoint.label) + "</strong></span><br/>";
return (head.concat(body));
}
},
legend: {
horizontalAlign: "center",
},
data: [
{
type: "spline",
showInLegend: true,
name: "Boston",
dataPoints: [
{ label: "Jan", y: 3.1 },
{ label: "Feb", y: 3.32 },
{ label: "Mar", y: 3.2 },
{ label: "Apr", y: 3.4 },
{ label: "May", y: 3.5 },
{ label: "Jun", y: 3.6 },
{ label: "Jul", y: 3.7},
{ label: "Aug", y: 3.8 },
{ label: "Sep", y: 3.9 },
{ label: "Oct", y: 3.10 },
{ label: "Nov", y: 3.11},
{ label: "Dec", y: 3.12}
]
},
{
type: "spline",
showInLegend: true,
name: "Yemen",
dataPoints: [
{ label: "Jan", y: 4.1 },
{ label: "Feb", y: 5.32 },
{ label: "Mar", y: 2.2 },
{ label: "Apr", y: 4.4 },
{ label: "May", y: 1.5 },
{ label: "Jun", y: 4.6 },
{ label: "Jul", y: 9.7},
{ label: "Aug", y: 4.8 },
{ label: "Sep", y: 3.9 },
{ label: "Oct", y: 2.10 },
{ label: "Nov", y: 5.11},
{ label: "Dec", y: 3.12}
]
}
],
legend: {
cursor: "pointer",
itemClick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
AJAX：
$(document).ready(function () {
var url_list = "api/usergroup/getdata";
$.getJSON(url_list)
.done(function (data) {
});
});
数据看起来像：
[{"id":1,"state_code":"JHR","state_name":"Jor","category_code":"DAM","station_code":"BEKOK-P","station_name"
:"Bekok Dam Penstock","item_id":1,"desc":"Test Expenses","qty":2,"price":19.00,"total":38.00,"date":"2016-01-05T17
:26:10","remark":"1. just for test purpose."}]