我正在尝试使用新数据阵列更新现有数据系列,并在完成后调用redraw
函数。虽然这很完美,但我不太满意,因为我想进行一种增长/收缩过渡。我看过一个example by Highcharts(使用现有数据集然后点击按钮“将新数据设置为选定系列”),但我无法复制此行为。
这是我写的代码:
var series, newSeriesThreshold = this.chart.series.length * 2;
for (var i = 0; i < data.length; i += 2) {
series = {
name: this.data[i].title,
data: this.data[i].data,
color: this.data[i].color
};
if (i >= newSeriesThreshold) {
this.chart.addSeries(series, false);
} else {
var currentSeries = this.chart.series[i / 2];
currentSeries.setData(series.data, false);
}
}
this.chart.redraw();
这些是创建图表时的选项:
var config = {
chart: {
renderTo: $(this.container).attr('id'),
type: this.settings.type,
animation: {
duration: 500,
easing: 'swing'
}
},
title: {
text: null
},
legend: {
enabled: this.settings.legend.show
},
tooltip: {
formatter: function() {
return this.x.toFixed(0) + ": <b>" + this.y.toString().toCurrency(0) + '</b>';
}
},
xAxis: {
title: {
text: this.settings.xaxis.title,
style: {
color: '#666'
}
}
},
yAxis: {
title: {
text: this.settings.yaxis.title,
style: {
color: '#666'
}
}
},
series: series,
plotOptions: {
column: {
color: '#FF7400'
}
},
credits: {
enabled: false
}
};
这样可以立即更新而不会转换效果。我可能做错了什么想法?
答案 0 :(得分:2)
我通过破坏并再次创建图表来解决这个问题。
以下是highcharts论坛上的链接,可以帮助我:http://forum.highcharts.com/highcharts-usage/animation-on-redraw-t8636/#p93199
答案来自highcharts支持团队。
$(document).ready(function() {
var chartOptions = {
// Your chart options
series: [
{name: 'Serie 1' , color: '#303AFF', data: [1,1,1,1,1,1,1}
]
};
var chart = new Highcharts.Chart(chartOptions);
$("#my_button").click(function(){
chart.destroy();
chartOptions.series[0].data = [10,5,2,10,5,2,10];
chart = new Highcharts.Chart(chartOptions);
});
});
答案 1 :(得分:0)
这仍然是一个谜。我设法进行轴更新,这表明存在某种动画,但它仅应用于轴,而不是列。
最后,我已经解决了这个问题。
答案 2 :(得分:0)
这可能会有所帮助:
var mychart = $("#mychart").highcharts();
var height = mychart.renderTo.clientHeight;
var width = mychart.renderTo.clientWidth;
mychart.setSize(width, height);
更新所有图表
$(Highcharts.charts).each(function(i,chart){
var height = chart.renderTo.clientHeight;
var width = chart.renderTo.clientWidth;
chart.setSize(width, height);
});