在Highchart中动态更新数据,加载事件不起作用

时间:2017-02-27 02:20:05

标签: highcharts

加载事件中没有数据(chart.series [0] .data) 错误代码:未捕获TypeError:无法读取属性' open'未定义的

然后把启用:这样的假.. EX) dataGrouping:{          启用:false             单位:groupingUnits         },

它有效但速度太慢.. 我该怎么办?

这是我的代码:

     $(document).ready(function(){
    var area = {
        chart:{
            height:500,
            marginRight:30,
            backgroundColor:'#F4F4F4',
            events: {
                load: function() {
                    var chart = $('#container').highcharts();
                    var point = chart.series[0].data[chart.series[0].data.length -1];
                    text = chart.renderer.text(
                        '',
                        point.plotX + chart.plotLeft + 10,
                        point.plotY + chart.plotTop - 10
                    ).attr({
                        zIndex: 5
                    }).add(),
                    box = text.getBBox();
                    chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
                    .attr({
                        fill: '#FFFFEF',
                        stroke: 'gray',
                        'stroke-width': 1,
                        zIndex: 4
                        })
                        //.add();
                    series1 = this.series[0];
                    series2 = this.series[1];
                    //dataMax
                    var price = series1.data[series1.data.length -1].open;

                refreshIntervalId = setInterval(function () {
                    var x = series1.data[series1.data.length -1].x; // current time
                    var time = (new Date).getTime();

                    var o = series1.data[series1.data.length -1].open;

                    var h = series1.data[series1.data.length -1].high;

                    var l = series1.data[series1.data.length -1].low;


                    if(time % 2 === 0){
                        price = o + Math.random() * 3;
                    }
                    else {
                        price = o - Math.random() * 3;
                    }
                    if(price > series1.data[series1.data.length -1].high){
                        h = price;
                    }
                    if(price < series1.data[series1.data.length -1].low){
                        l = price;
                    }
                    var c = price;                          
                    var y = series2.data[series2.data.length -1].y + Math.round(Math.random() * 1);
                    series1.data[series1.data.length -1].update({x : x, open : o, high: h, low: l, close: c}, true);
                    series2.data[series2.data.length -1].update({x : x, y: y}, false);

                }, 1000);
            } 
        }
    },

    credits: {
        enabled:true,
        position: { align: 'right', x: -10, verticalAlign: 'bottom', y: -5 },
        style: { cursor: 'pointer', color: 'black', fontSize: '9px' }
    },

    scrollbar: {
        enabled: false
    },

    rangeSelector: {
        selected: 1,
        inputEnabled: false
    },

    title: {
        useHTML: true,
        x: -10,
        y: 8,
    },
    xAxis: {
        gridLineWidth: 1,
        labels: {
            format: '{value:%m-%d}',//'{value:%Y-%m-%d}',
        }
    },

    yAxis:[{
        crosshair: {
            snap: false
        },
        height: 200,
        labels: {
            align: 'right',
            x: 25,
            formatter: function (){
                return $.number(Highcharts.numberFormat(this.value, 0,'',''));
                }
        },
    },

    /*volume*/
    {
        labels: {
            align: 'right',
            x: 20,
        },
        //  lineWidth: 2
        top: 280,
        height: 113,
        offset: 0,
    }],   

    series: [{
        type: 'candlestick',
        name: 'AAPL Stock Price',
        data: data,
        dataGrouping: {
            units: groupingUnits
        },
        point:{
            events:{
                mouseOver: function (){
                    var chart = this.series.chart;
                    if (!chart.lbl){
                        chart.lbl = chart.renderer.label('')
                        .attr({
                            padding: 10,
                            r: 10,
                            //fill: Highcharts.getOptions().colors[1]
                        })
                        .css({color: 'black'})
                        .add();
                    }//if OFF

                    var timeStamp = this.x,
                    date = new Date(parseFloat(timeStamp)),
                    currentTime = get_Date(date);
                    chart.lbl
                    .show()
                    .attr({
                        text: currentTime + ' H: ' + $.number(this.high) + ' L: ' + $.number(this.low) + ' O: ' + $.number(this.open) + ' C: ' + $.number(this.close),
                        y: 22,
                    });
                },//mouseover OFF

                mouseOut: function (){
                    if (this.series.chart.lbl){
                        this.series.chart.lbl.hide();
                    }//if OFF
                }//mouseout OFF
            },//events OFF
        },//point OFF
    }, //series[0] OFF

    {
        type: 'column',
        name: 'Volume',
        data: volume,
        yAxis: 1,
        dataGrouping: {
            units: groupingUnits
        },               
    }]//series[1] OFF
}

var dataLength = data.length,
                i = 0;

                groupingUnits = [[
                                  'week',                         // unit name
                                  [1]                             // allowed multiples
                                  ], [
                                      'month',
                                      [1, 2, 3, 4, 6]
                                      ]];


                for (i; i < dataLength; i += 1) {
                    candlestickOhlc.push([  
                           data[i][0], // the date
                           data[i][1], // open
                           data[i][2], // high
                           data[i][3], // low
                           data[i][4] // close
                     ]);

                volume.push([
                             data[i][0], // the date
                             data[i][5] // the volume
                             ]);
                }//for OFF

                option = candlestick;

option.series[0].data = data;
$('#container').highcharts('StockChart', option);
});

0 个答案:

没有答案