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()处理就可以了

posted @ 2017-04-19 21:21  单纯的桃子  阅读(5395)  评论(0编辑  收藏  举报