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

转载于:https://www.cnblogs.com/luna-hehe/p/6735942.html