jquery - highchart什么时候完全加载？

Question

我看到了这段代码：http: //jsfiddle.net/AVygG/

我很好奇highchart什么时候完全加载？我在 highcharts 文档中看到events: load:应该能够在 highchart 完全加载时调用回调函数。

如果它已完全加载，那么我是否可以假设var 图表在警报弹出时应该已经具有值？这是图表已经加载的一个很好的基础吗？

我问的原因是我正在处理另一个代码，highchart 显然没有在 IE8 中完全加载。看起来 highcharts 可能在加载其元素时存在竞争条件。

谢谢！

$(function () {
// create the chart
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        events: {
            load: function(event) {
                alert ('Chart loaded');
            }
        }        
    },
    xAxis: {
    },

    series: [{
        animation: false,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
    }]
});

}); </p>

score 24 · Accepted Answer

Highcharts 有回调函数

 var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                redraw: function(event) {
                    alert ('Chart loaded');
                }
            }        
        },
        series: [{
            animation: false,
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
        }]
    },function(chart){

alert('LOADED');

});

score 8 · Accepted Answer

试试这个redraw事件。此事件在加载后触发，也在添加系列和调整图表大小后触发。

$(function () {
    // create the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                redraw: function(event) {
                    alert ('Chart loaded');
                }
            }        
        },
        series: [{
            animation: false,
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]     
        }]
    });
});

从官方 Highcharts 参考重绘事件：http: //api.highcharts.com/highcharts#chart.events.redraw

和演示：http: //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-redraw/

score 8 · Accepted Answer

在加载回调函数中，您可以使用“this”指针访问图表对象。

        events: {
            load: function(event) {
                alert ('Chart loaded with series :'+ this.series[0].name);
                console.log(this);
            }
        }

JsFiddle：http: //jsfiddle.net/msjaiswal/AVygG/25/

score 3 · Accepted Answer

这得到了回答，但在 imo 中还不够清楚。Highcharts 文档说

...在大多数情况下，图表是在一个线程中构建的，但在 Internet Explorer 8 或更低版本中，图表有时会在文档准备好之前启动，在这些情况下，图表对象不会在调用new Highcharts.Chart(). 因此，依赖于新建 Chart 对象的代码应始终在回调中运行。

所以，IE8中对图表对象的处理必须在回调中完成，即new Highcharts.Chart(options, function(chart) { ... })。您也可以在函数中使用function() { ... }和使用。this

关于您的具体问题，请重新加载消息。我必须在回调中这样做，但它有效。

chart1 = new Highcharts.Chart(options, function(){
  this.showLoading();
});

score 1 · Accepted Answer

在角度项目中，我必须使用setTimeout()函数来使宽度正常工作，如下所示：

setTimeout(()=>this.chart.reflow())

score 0 · Accepted Answer

在 Polymer 3 中，我必须使用window.setTimeout()函数来使宽度正常工作，如下所示。load: function() { window.setTimeout(() => { this.reflow(); }, 1); },

jquery - highchart什么时候完全加载？

6 回答 6

Related

Reference