高图表 - 柱形图重绘动画
Highcharts - column chart redraw animation
我正在尝试使用新的数据数组更新现有数据系列,并在完成后调用redraw
函数。虽然这很完美,但我不太满意,因为我希望有一种增长/收缩过渡。我已经看过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
}
};
这将产生即时更新,而不会产生转换效果。知道我可能做错了什么吗?
我已经通过销毁并再次创建图表来解决这个问题。
这是对我有帮助的图表论坛上的链接: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);
});
});
这
仍然是一个谜。我设法更新了轴,这表明正在进行某种动画,但它仅适用于轴,而不是列。
最后,我已经接受了这种行为。
这可能会有所帮助:
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);
});
相关文章:
- Highchart Js柱形图堆叠和分组
- HighCharts:3D柱形图在选择时更改边框颜色
- 使用共享工具提示时,单击Highcharts柱形图会返回不正确的序列索引
- 带有背景色的高图表柱形图
- 柱形图中每列的 ng-谷歌图表自定义颜色
- Highcharts将url添加到柱形图
- 如何在堆栈中创建具有不同颜色和自定义工具提示的堆积柱形图
- 为Highcharts中的柱形图设置最小默认范围
- 高位图表堆积柱形图标签问题
- 高位图表不显示柱形图的每日数据
- 高位图堆积柱形图更改图例ItemClick函数
- 融合图表 - 在柱形图2D图表中单击时更改条形的颜色
- 高图表柱形图,柱形中间有其他标签
- 通过 json 更新的 Canvasjs 柱形图不起作用
- 如何在高图表的基本柱形图中隐藏/显示列
- 高图表堆积百分比柱形图可以小于 100% 吗?
- Dojo-簇状柱形图数据标签作为Excel
- 谷歌图表:柱形图,饼图不透明度
- 高图表 - 柱形图重绘动画
- 动画柱形图