我看到了这段代码:http://jsfiddle.net/AVygG/
我很好奇高桥图完全加载的时间点是什么时候?我在highcharts文档中看到事件:load:应该能够在高亮度图完全加载时调用回调函数。
如果它已完全加载,那么我可以假设当警报弹出时 var chart 应该已经有了值吗?这是图表已经加载的良好基础吗?
我问的原因是我正在处理另一个代码,高清显然没有在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]
}]
});
});
答案 0 :(得分:22)
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');
});
答案 1 :(得分:8)
尝试使用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
答案 2 :(得分:8)
在加载回调函数中,您可以使用“this”指针访问图表对象。
events: {
load: function(event) {
alert ('Chart loaded with series :'+ this.series[0].name);
console.log(this);
}
}
答案 3 :(得分:2)
这回答了,但不够强调。 Highcharts文档明确说明
...在大多数情况下,图表是在一个线程中构建的,但在Internet中 资源管理器版本8或更低的图表有时会在之前启动 文档已准备好,在这些情况下,图表对象不会 在致电
new Highcharts.Chart()
后直接完成。作为一个 结果,依赖于新构建的Chart对象的代码应该 总是在回调中运行。
因此,处理IE8 中的图表对象必须在回调中完成,即new Highcharts.Chart(options, function(chart) { ... })
。您也可以使用function() { ... }
并在函数中使用this
。
关于您的具体问题,请重新加载消息。我必须在回调中做到这一点,但它确实有效。
chart1 = new Highcharts.Chart(options, function(){
this.showLoading();
});
答案 4 :(得分:0)
在角度项目中,我必须使用setTimeout()
函数来使宽度正常工作,如下所示:
setTimeout(()=>this.chart.reflow())
答案 5 :(得分:0)
在Polymer 3中,我必须使用 window.setTimeout()函数来使宽度正常工作,如下所示。load: function() { window.setTimeout(() => { this.reflow(); }, 1); },