highcharts的使用:从数据库获取数据显示在图上
//月产量统计图 function GetHighCharts() { var date = new Date(); var year = date.getFullYear(); var month_1 = date.getMonth(); date.setMonth(month_1 + 1); var month = date.getMonth(); date.setDate(0); var day = date.getDate();
var daystr = "[";//daystr为横坐标的数据:[1,2,3, ....31/30] for (var i = 1; i <= day ; i++) { if (i != day) { daystr += i + ","; } else { daystr += i + "]"; } } $.ajax({ url: "/POM/Order/GetFinishAmountByMonth?year=" + year + "&month=" + month + "&day=" + day, dataType: "text", contentType: 'application/x-www-form-urlencoded; charset=UTF-8', async: false, success: function (data) { var vardata = eval('(' + data + ')');//从后台获取的每日的产量,通过eval('(' + data + ')')处理才可以显示在图上 $('#container').highcharts({ chart: { type: 'spline'//曲线图 }, title: { text: null, // x: -20 //center }, subtitle: { text: null, //x: -20 }, xAxis: { categories: eval('(' + daystr + ')')//横坐标的数据也要做这样的处理 }, yAxis: { title: { text: '产量(台)' }, min:0, allowDecimals:false, labels: { formatter: function () { return this.value } } }, tooltip: { crosshairs: true, shared: true }, plotOptions: { spline: { marker: { radius: 4, lineColor: '#666666', lineWidth: 1 } } }, series: [{ name: '发动机', marker: { symbol: 'square' }, data: vardata }] }); } }); }
总结:无论是横坐标还是纵坐标的数据都是:[112,929,192,,,,,,] 这种格式的,再通过eval()处理就可以了