使用LiveChart进行HighCharts Bug

时间:2012-11-03 14:12:45

标签: javascript highcharts highstock

我对HighCharts,HighStock和实时数据/实时图表存在很大问题。

请检查:

http://jsfiddle.net/5RutC/160/

并尝试删除系列中的第1个(随机数据)。该图表将停止更新。如果您重新选择系列的第一个,它将继续使用所有值进行更新。

是否有可能以某种方式克服这个问题,或者是HighCharts / HighStock的错误?

由于

HTML代码:

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 500px; min-width: 500px"></div>​ 

Javascript代码:

$(function() {

    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });

    // Create the chart
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container',
            events : {
                load : function() {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    var series1 = this.series[1];
                    var chart = this;
                    setInterval(function() {
                        var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                        y1 = Math.round(Math.random() * 100);
                        series.addPoint([x, y], false, true);
                        series1.addPoint([x, y1], false, true);
                        chart.redraw();
                    }, 1000);
                }
            }
        },

        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1M'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 0
        },

        title : {
            text : 'Live random data'
        },
        legend: {
                align: 'right',
                layout: 'vertical',
                verticalAlign: 'top',
                y: 45,
                enabled: 'true'
            },

        exporting: {
            enabled: false
        },

        series : [{
            name : 'Random data',
            data : (function() {
                // generate an array of random data
                var data = [], time = (new Date()).getTime(), i;

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

                for( i = -999; i <= 0; i++) {
                    data.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data;
            })()
        }]
    });

});

1 个答案:

答案 0 :(得分:2)

看起来highcharts处理第一个系列的方式略有不同。解决方法可以使用highstock#Axis.setExtremes()明确设置xAxis的极限,如下所示

var xAxis=chart.xAxis[0];
xAxis.setExtremes(xAxis.min,x,true,false); // Set extreme and redraw !

Hiding 1st series on live chart | Highchart & Highstock