调试了一整天，终于显示出来了。
详细例子参照官网的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 },
使用HighCharts描绘多个Y轴的动态曲线。,布布扣,bubuko.com
时间： 2024-12-17 02:15:15