highcharts的动态画曲线有关问题

highcharts的动态画曲线问题
highcharts的动态画曲线问题，官网上给了一个demo是随着时间的推移每秒随机生成一个点，最近头给我一个任务是，3分钟刷新一次然后有180个点，数据是后台传过来的，不知道怎么弄，希望有这方面经验的人给个建议。
[解决办法]
如果是jquery就更简单了，highcharts对jquery的支持相当好。网上有很多不错的例子你搜索下。

参考下面几个步骤的思路:

首先画chart,注意先不加series:

$(document).ready(function() {

      chart_answer = new Highcharts.Chart({
         chart: {
            backgroundColor: '#ffffff',
            borderColor: '#a2a2a1',
            borderWidth: 0,
            borderRadius: 0,
            renderTo: 'answer_time_chart',
            type: 'area',
    plotBackgroundColor: '#fffdf6'
         },
         colors: ['#3399FF'],
         legend: {
            enabled: false
         },

         title: {
            text: ''
         },
         tooltip: {
            borderRadius: 0,
            borderWidth: 0,
            shadow: false,
            style: {
fontSize: '7pt',
                color: '#000000'
            },
            formatter: function() {
                return 'Time: ' + this.x + '
Time: ' + (this.y/60
[解决办法]
0) + ':' + (this.y % 60 < 10 ? '0':'')+(this.y % 60);            }
         },
         xAxis: {

            labels: {
                rotation: -45,
                x: 0,
                y: 40,
                style: {
                    color: '#333333' 
 
                }
            },
            lineWidth: 1,
            lineColor: '#333333',
            minPadding: 0,
            maxPadding: 0,
            title: {
                text: ''
            },
            tickInterval: 2,
            tickmarkPlacement: 'on'
         },
         yAxis: {
            gridLineWidth: 0,
            labels: {
                formatter: function() {
                    return (this.value/60
[解决办法]
0) + ':' + (this.value % 60 < 10 ? '0':'')+(this.value % 60);                },
                style: {
                    color: '#333333'
                }
            },
            lineWidth: 1,
            lineColor: '#333333',
            min: 0,
            minPadding: 0,
            maxPadding: 0,
            title: {
               text: ''
            }
         }
      });

然后加series，这个例子是不带动态刷新的,如果要时隔一段时间动态刷新还要再结合highcharts demo那个例子对series的设置:

var jsonURL = 'http://website.com/json-output.php?report=chart_answer';
jQuery.getJSON( jsonURL, function( data ){
var arr = [];
$.each(data.data, function(key, val) {
    var y = val.y;
    var customTooltip = val.customTooltip;
    arr.push({y: y, customTooltip: customTooltip})
})

var cats = [];
$.each(data.categories, function(key, val) { 
 
    cats.push(val.cat)
})

chart_answer.xAxis[0].setCategories(cats);
var series = {data: arr};
chart_answer.addSeries(series);
});

这里是对series的设置，把它结合上面的代码放在一起改一下

series: [{
                name: 'Random data',
                data: (function() {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;
    
                    for (i = -19; i <= 0; i++) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random()
                        });
                    }
                    return data;
                })()
            }]

从后台传过来的数据格式注意下,如果你不是各种格式还要做相应调整

{ "data": [ { "y": 2 }, { "y": 3 }, { "y": 3 }, { "y": 4 }, { "y": 4 }, { "y": 4 }, { "y": 3 }, { "y": 2 }, { "y": 2 }, { "y": 3 }, { "y": 3 }, { "y": 3 }, { "y": 4 }, { "y": 4 }, { "y": 4 }, { "y": 4 } ], "categories": [ { "cat": "4:45-5:00" } , { "cat": "5:00-5:15" } , { "cat": "5:15-5:30" } , { "cat": "5:30-5:45" } , { "cat": "5:45-6:00" } , { "cat": "6:00-6:15" } , { "cat": "6:15-6:30" } , { "cat": "6:30-6:45" } , { "cat": "6:45-7:00" } , { "cat": "7:00-7:15" } , { "cat": "7:15-7:30" } , { "cat": "7:30-7:45" } , { "cat": "7:45-8:00" } , { "cat": "8:00-8:15" } , { "cat": "8:15-8:30" } , { "cat": "8:30-8:45" } ], "tickmark": 4 } 
 

[解决办法]
实现定时传值可以用setInterval这个function,您要求的三分钟也就是180000毫秒

实现同时设置好多点可以用chart.series[0].setData(array) 这个function, array要提前用循环赋值,这样多个值就同时传进去了.

在我上面第一段代码中先定义series,其中的data可以是空的，然后在我上面的第二段代码中这样改:

var jsonURL = 'http://website.com/json-output.php?report=chart_answer';

//在这里开始加定时传值！
setInterval(function() {
  jQuery.getJSON( jsonURL, function( data ){
    var arr = [];

    //注意这里开始给array赋值了
    $.each(data.data, function(key, val) {
      var y = val.y;
      var customTooltip = val.customTooltip;
      arr.push({y: y, customTooltip: customTooltip})
  })

  chart_answer.series[0].setData(arr)；

});
}, 180000);//这里每180000毫秒传一次

上面代码只是个思路，我没调试，可能会有bug

查看更多 下一篇