Ajax/Highcharts—动态图表

前面写过“Highcharts的用法总结”，当然了，在实际应用中，图表数据都是要从后台获取的，根据之前的使用，贴一些例子来分享学习。

首先，如果没有获取后台数据，又希望呈现一个动态图表的话，可以很轻易的想到，Y值可以写成随机数，当然，X轴最常见的就是当前时间。那么，同理，用后台获取的数据替换随机数，不就实现了“Ajax—动态图表”嘛。

一、向图表中插入随机点

<div id="container21" style="min-width: 500px;height: 320px;border-bottom: 1px dashed #9b9d9e;"></div>

<script>
    Highcharts.setOptions({ global: { useUTC: false } });
    var chart21 = new Highcharts.Chart({
        chart: {
            renderTo: 'container21',
            type: 'spline'
        },
        title: {
            text: '历史温度'
        },
        subtitle: {
            text: " "
        },
        credits: {
            enabled: false
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%H : %M'
            }
        },
        yAxis: {
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            title: {
                text: '温度：摄氏度',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            startOnTick: true,   //为true时，设置min才有效
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
                        Highcharts.numberFormat(this.y, 2) + ' 摄氏度' + '</span>';
            },
            crosshairs: true
        },
        legend: {
            enabled: true
        },
        exporting: {
            enabled: false
        },
        series: [{
            type: 'spline',
            name: '温度',
           
            data: (function () {
                var data = [],
                        time = (new Date()).getTime(),
                        i;

                for (i = -9; i <= 0; i++) {  // 图表初始显示10个点（均为0），当前时间是最后那个初始点的X，故之前的点的时间(X)是当前时间之前，故i为负
                    data.push({
                        x: time + i * 1000,
                        y: 0
                    });
                }
                return data;
            })()

        }]

    });

    setInterval(function(){
        var x;
        var y;
        x = (new Date()).getTime();
        y = Math.random();                  // Y 是随机数

        chart21.series[0].addPoint([x, y], true, true);     //追加点并去掉一个点         //chart.series[0].addPoint([x, y]);追加点( 不去掉点 )
    },1000);
    
</script>

图表中初始的时候，是10个0，后来就出现随机数点。

二、用后台获取的数据替换随机数，实现“Ajax—动态图表”

<script>
    // 温度
    Highcharts.setOptions({ global: { useUTC: false } });
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            type: 'spline'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: " "
        },
        credits: {
            enabled: false
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%H : %M'
            }
        },
        yAxis: {
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: '温度：摄氏度',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            startOnTick: true,
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
                        Highcharts.numberFormat(this.y, 2) + ' 摄氏度' + '</span>';
            },
            crosshairs: true
        },
        legend: {
            enabled: true
        },
        exporting: {
            enabled: false
        },
        series: [{
            type: 'spline',
            name: '温度',
            data: (function () {
                var data = [],
                        time = (new Date()).getTime(),
                        i;

                for (i = -9; i <= 0; i++) {
                    data.push({
                        x: time,
                        y: 0
                    });
                }
                return data;
            })()
        }]
    });


    // 湿度
    Highcharts.setOptions({ global: { useUTC: false } });
    var chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            type: 'spline'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: " "
        },
        credits: {
            enabled: false
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%H : %M'
            }
        },
        yAxis: {
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: '湿度：%',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            startOnTick: true,
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '<span style="color:#08c">' +
                        Highcharts.numberFormat(this.y, 2) + ' %' + '</span>';
            },
            crosshairs: true
        },
        legend: {
            enabled: true
        },
        exporting: {
            enabled: false
        },
        series: [{
            type: 'spline',
            name: '湿度',
            data: (function () {
                var data = [],
                        time = (new Date()).getTime(),
                        i;

                for (i = -9; i <= 0; i++) {
                    data.push({
                        x: time,
                        y: 0
                    });
                }
                return data;
            })()
        }]

    });

    var temperature, humidity;

    $(function () {

        function getDataList() {
            try {
                $.ajax({
                    type: "post",
                    url: "/produce/enviroment/getenviroment",
                    data: {

                    },
                    dataType: "json",
                    async: false,
                    success: function (e) {
                        temperature = e.Temperature;
                        humidity = e.Humidity;
                    },
                    error: function (e) {
                        console("err");
                    }
                });
            } catch (e) {
                console(e);
            }
        }
       
        setInterval(function () {                
            getDataList();

            var x1, x2, y1, y2;
            x1 = (new Date()).getTime();
            x2 = (new Date()).getTime();
            y1 = temperature;
            y2 = humidity;
            chart1.series[0].addPoint([x1,y1],true,true);
            chart2.series[0].addPoint([x2, y2], true, true);
        }, 1000);
       

    });

</script>

每秒都获取后台数据，然后插入到图表中~~~