Javascript Highcharts:我可以设置更改条形图上条形图顺序的动画吗?
我想创建一个如下所示的图表。 我用Highcharts创建了这个图表。但是,我无法设置更改条顺序的动画Javascript Highcharts:我可以设置更改条形图上条形图顺序的动画吗?,javascript,animation,highcharts,Javascript,Animation,Highcharts,我想创建一个如下所示的图表。 我用Highcharts创建了这个图表。但是,我无法设置更改条顺序的动画 function rotate(array, times) { while (times--) { var temp = array.shift(); array.push(temp) } } window.data = { categories: ['Africa', 'America', 'Asia', 'Europe', 'Oc
function rotate(array, times) {
while (times--) {
var temp = array.shift();
array.push(temp)
}
}
window.data = {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
y_values: [100, 200, 300, 400, 500],
colors: ['#DC4D3A', '#E93D3F', '#83C6C7', '#46D388', '#D1D785']
};
document.getElementById("button").addEventListener("click", function () {
for (var i = 0; i < data['y_values'].length; i++) {
chart.series[0].data[i].update({y: data['y_values'][i]});
chart.series[0].data[i].update({color: data['colors'][i]});
}
chart.xAxis[0].update({categories: data['categories']});
rotate(data['y_values'], 1);
rotate(data['categories'], 1);
rotate(data['colors'], 1);
}, false);
函数旋转(数组,时间){
而(次--){
var temp=array.shift();
数组.推送(临时)
}
}
window.data={
类别:[“非洲”、“美洲”、“亚洲”、“欧洲”、“大洋洲”],
y_值:[100200300400500],
颜色:[“DC4D3A”、“E93D3F”、“83C6C7”、“46D388”、“D1D785”]
};
document.getElementById(“按钮”).addEventListener(“单击”),函数(){
对于(变量i=0;i
我写的所有代码都在JSFIDLE中。
有谁能帮我吗?似乎没有本机实现。 我唯一的想法是根本不显示Y轴标签。使用 绘制文本并将其另存为变量(用于进一步更新) 然后可以更新x、y或文本
chart.customText.attr({
str: 'new text. You can use HTML',
y: 150 // new value
})
下一步是对Y位置进行操作。甚至可以尝试使用包含所有标签的HTML仅绘制1个文本。然后使用JS根据需要移动它们。Highcharts为SVG元素提供了
动画制作方法,您可以使用该方法来实现想要的结果。您需要设置列、轴标签和数据标签的动画:
document.getElementById("button").addEventListener("click", function() {
var points = chart.series[0].points,
ticks = chart.xAxis[0].ticks;
points[0].graphic.animate({
x: points[1].shapeArgs.x
});
points[1].graphic.animate({
x: points[0].shapeArgs.x
});
points[0].dataLabel.animate({
y: points[1].dataLabel.translateY
});
points[1].dataLabel.animate({
y: points[0].dataLabel.translateY
});
ticks[0].label.animate({
y: ticks[1].label.xy.y
});
ticks[1].label.animate({
y: ticks[0].label.xy.y
});
}, false);
现场演示:
API参考资料:感谢您的帮助性回答!当我按两下按钮时,你的演示效果不好。可能是因为graphic.animate
和label.animate
不会更改内部状态。也许出于同样的原因,我的新演示也不太好用。当我点击按钮两次时,条会旋转两次。->你有什么好的解决办法吗?嗨,Teruki Shinohara,我只准备了一个例子来说明如何实现动画。您可能不需要更新类别,setData
就足够了。请检查此示例:,我只看到dataLabels
动画有问题。谢谢ppotaczek!用相同的数据重新绘制图表,问题就解决了。
document.getElementById("button").addEventListener("click", function() {
var points = chart.series[0].points,
ticks = chart.xAxis[0].ticks;
points[0].graphic.animate({
x: points[1].shapeArgs.x
});
points[1].graphic.animate({
x: points[0].shapeArgs.x
});
points[0].dataLabel.animate({
y: points[1].dataLabel.translateY
});
points[1].dataLabel.animate({
y: points[0].dataLabel.translateY
});
ticks[0].label.animate({
y: ticks[1].label.xy.y
});
ticks[1].label.animate({
y: ticks[0].label.xy.y
});
}, false);