首页 > 代码库 > 使用HighCharts描绘多个Y轴的动态曲线。

使用HighCharts描绘多个Y轴的动态曲线。

2024-07-07 21:54:10   225人阅读

调试了一整天，终于显示出来了。

详细例子参照官网的demo：http://www.hcharts.cn/demo/index.php

在这只贴出关键部分的JS代码

1. chart （就是在events的load里写一个实时获取的方法。通过json调用去后台拉新数据加到series里）

 1  chart: {
 2                 renderTo: ‘chart_spline‘, //图表放置的容器，DIV
 3                 defaultSeriesType: ‘spline‘, //图表类型为曲线图
 4                 events: {
 5                     load: function () {                                                
 6                         //获取series对象
 7                         var a= this.series[0];
 8                         var b= this.series[1];
 9                         var c= this.series[2];
10                         setInterval(function () {
11                             //add new item from json request to a
12                             $.getJSON(
13                             "/xxxxxxxxxxxxxxxx/",                            
14                             function (data) {
15                                 $.each(data, function (k, v) {
16                                     var x = (new Date()).setSeconds(0), // 当前时间
17                                     y = v.value; //Math.random() * 100;
18                                     a.addPoint([x, y], true, true);
19                                 });                               
20                             });
21 
22                            //add new item from json request to b
23                            $.getJSON(
24                             "/xxxxxxxxxxxxxxxx/",                            
25                             function (data) {
26                                 $.each(data, function (k, v) {
27                                     var x = (new Date()).setSeconds(0), // 当前时间
28                                     y = v.value; //Math.random() * 100;
29                                     b.addPoint([x, y], true, true);
30                                 });                               
31                             });
32 
33                            //add new item from json request to c
34                            $.getJSON(
35                             "/xxxxxxxxxxxxxxxx/",                            
36                             function (data) {
37                                 $.each(data, function (k, v) {
38                                     var x = (new Date()).setSeconds(0), // 当前时间
39                                     y = v.value; //Math.random() * 100;
40                                     c.addPoint([x, y], true, true);
41                                 });                               
42                             });
43                         },
44                         //每隔60秒钟，图表更新一次
45                         60000);                       
46                     }
47                 }
48             },

2.  series (就是图的折线数据，可以只提供Y值) 这里提供折线的初始数据，同样可以写个方法去后台抓初始数据。

 1 series: [{
 2             name: ‘Tokyo‘,
 3             data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
 4         }, {
 5             name: ‘New York‘,
 6             data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
 7         }, {
 8             name: ‘Berlin‘,
 9             data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
10         }]

3. tooltip 把这个也拿出来讲，是因为当多个折线的单位不一样时，可以通过判断当前点的series的命名来区分，即第2点定义的name。

 1 tooltip: {//当鼠标悬置数据点时的提示框
 2                 formatter: function () { //格式化提示信息
 3                     var info = ‘<b>‘ + Highcharts.dateFormat(‘%H:%M:%S‘, this.x) + ‘</b>‘;                    
 4                     
 5                     if (this.series.name == ‘Tokyo‘) {
 6                         info += ‘<br/>‘ + this.series.name + ‘: ‘ +
 7                         this.y + ‘%‘;//单位
 8                     };
 9                     if (this.series.name == ‘New York‘) {
10                         info += ‘<br/>‘ + this.series.name + ‘: ‘ +
11                         this.y + ‘℃‘;//单位
12                     };
13                     if (this.series.name == ‘Berlin‘) {
14                         info += ‘<br/>‘ + this.series.name + ‘: ‘ +
15                         this.y + ‘＄‘;//单位
16                     };
17 
18                     return info;
19                 },
20                 
21             },

 


联系
我们