highcharts的动态画曲线问题

Question

highcharts的动态画曲线问题，官网上给了一个demo是随着时间的推移每秒随机生成一个点，最近头给我一个任务是，3分钟刷新一次然后有180个点，数据是后台传过来的，不知道怎么弄，希望有这方面经验的人给个建议。

Answer 1

是extjs3还是extjs4? highcharts对extjs3的支持不是特别好，如果要用的话 highcharts 和 extjs 有一个adapter,可以下载后引用它，但是有版本要求: extjs3 和 highcharts 2+ (最好是2.0.5版本)。extjs3的官方论坛网上搜一下就有，如果找不到pm我，我这有存。我只用highcharts做过饼图,没做过曲线。但是我感觉原理类似。highcharts可以和extjs store动态绑定,延时也有参数可以设置。

Answer 2

如果是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,
            tickPlacement: '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" } ], "tick": 4 }

Answer 3

实现定时传值可以用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