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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM