使用highcharts完成实时信息显示的动态波动图表

来源：互联网发布：centos gcc安装包下载编辑：程序博客网时间：2024/05/17 22:45

原理：使用highcharts中的series.addPoint([x, y], true, true)方法来动态加载一个点到图形的末尾。
说明：使用highcharts时需要引入highcharts的js文件。
代码实现部分和说明：
html页：

<html>    <body>    <div id="container"></div>    </body>    </html>

js部分：

<script tyep="text/javascript">    $(function(){               var chart;               $('#container').highcharts({                    chart: {                        type: 'area',                        animation: Highcharts.svg, // 旧版IE无法使用                        marginRight: 10,                        events: {                            load: function () {                                // 设置每秒的更新数据，时间间隔为1000ms，即1s（此处可自己设置）                                var series = this.series[0];                                setInterval(function () {                                    //设置x为添加点的时间                                    var x = (new Date()).getTime(),                                    //y的值通过方法SetYdata()得到                                    y = parseFloat(SetYdata());                                    series.addPoint([x, y], true, true);                                }, 1000);                            }                        }                    },                    title: {                        text: '温度实时信息'                    },                    xAxis: {                        type: 'datetime',                    },                    yAxis: {                        title: {                            text: '温度'                        },                        plotLines: [{                            value: 0,                            width: 1,                            color: '#808080'                        }],                        alternateGridColor: '#FDFFD5',                        allowDecimals: true,                        tickPixelInterval: '50',                        endOnTick: true                    },                    tooltip: {                    //鼠标移动到点上时显示信息                        formatter: function () {                            return '<b>' + this.series.name + '</b><br/>' +                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +                            Highcharts.numberFormat(this.y, 2) + '度';                        }                    },                    legend: {//是否启用图例                        enabled: false                    },                    credits:{//是否显示版权                        enabled:false                    },                    exporting: {//是否导出                        enabled: false                    },                    series: [{                        name: '温度',                        data: (function () {                            // 设置初始数据为0                            var data = [],                                time = (new Date()).getTime(),                                i;                            for (i = -19; i <= 0; i++) {                                data.push({                                    x: time + i * 1000,                                    y: 0                                });                            }                            return data;                        })()                    }]                });            });    });    function SetYdata(){       var y;    //通过轮询或者广播的方式获取y的实时的值    return y;    }    </script>

1 0