多表同时对比缩放十字准线查看

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.取数据画图表

注:图表是一个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.        });  

最后

以上就是聪慧玫瑰为你收集整理的多表同时对比缩放十字准线查看的全部内容，希望文章能够帮你解决多表同时对比缩放十字准线查看所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。