Highstock 是用纯 JavaScript 编写的图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。

当对多个图表同时进行缩放数据十字准线对比时:

注:缩放时还要引入highstock.js

<1.重写内部的方法， 这里是将提示框即十字准星的隐藏函数关闭

1.     Highcharts.Pointer.prototype.reset = function () {  
2.         return undefined;  
3.     };  

<2.高亮当前的数据点，并设置鼠标滑动状态及绘制十字准星线

1.     Highcharts.Point.prototype.highlight = function (event) {  
2.         this.onMouseOver(); // 显示鼠标激活标识  
3.         this.series.chart.tooltip.refresh(this); // 显示提示框  
4.   
5.         this.series.chart.xAxis[0].drawCrosshair(event, this); // 显示十字准星线  
6.     };  

<3.同步缩放效果，即当一个图表进行了缩放效果，其他图表也进行缩放

1.     function syncExtremes(e) {  
2.         var thisChart = this.chart;  
3.         if (e.trigger !== 'syncExtremes') {  
4.             Highcharts.each(Highcharts.charts, function (chart) {  
5.                 if (chart !== thisChart) {  
6.                     if (chart.xAxis[0].setExtremes) {  
7.                         chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {  
8.                             trigger: 'syncExtremes'  
9.                         });  
10.                     }  
11.                 }  
12.             });  
13.         }  
14. }  

<4.取数据画图表

扫描二维码关注公众号，回复： 5861838 查看本文章

注:图表是一个container,数据是一个数组循环放入渲染图表

1. 实时刷新数据图表

实时刷新是在chart的events的load里放入一个定时刷新函数，初始化图表是在chart的series里放入当前时间前几分钟的数据。读取数据时最好将当前时间往前推一段时间。

1. chart = new Highcharts.Chart({  
2.            chart: {  
3.                renderTo: 'container',  
4.                type: 'spline',  
5.                animation: Highcharts.svg,  
6.                marginRight: 10,  
7.                events: {  
8.                    load: function () {  
9.                        setInterval(function () {    
10.                            });  
11.   
12.                        }, 1000);  
13.                    }  
14.                }  
15.            },  
16.            title: {  
17.                text: ''  
18.            },  
19.            credits: {  
20.                enabled: false  
21.            },  
22.            xAxis: {  
23.                type: 'datetime',  
24.                tickPixelInterval: 100  
25.            },  
26.            yAxis: {  
27.                title: {  
28.                    text: ''  
29.                },  
30.                max: 130,  
31.                min: 0,  
32.                plotLines: [{  
33.                    value: 0,  
34.                    width: 1,  
35.                    color: '#808080'  
36.                }]  
37.            },  
38.            tooltip: {  
39.                formatter: function () {  
40.                    if (Highcharts.numberFormat(this.y, 2) == 0.00) {  
41.                        return '<b>' + this.series.name + '</b><br/>' +  
42.                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>';  
43.                    } else {  
44.                        return '<b>' + this.series.name + '</b><br/>' +  
45.                            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +  
46.                            Highcharts.numberFormat(this.y, 1) + "km/h";  
47.                    }  
48.   
49.   
50.                }  
51.            },  
52.            legend: {  
53.                enabled: false  
54.            },  
55.            exporting: {  
56.                enabled: false  
57.            },  
58.            series: create() //初始化的数据放入这里 
59.        });