当我多次单击按钮时,下面的代码无法正常工作。我发现临时解决方案是调用chart.destroy()
并chart = Highcharts.chart(...)
重置内部状态。但我想知道正确的解决方案,因为这只是一个临时措施,它不会解决问题的实际原因。请问有人可以帮助我吗?
var chart = Highcharts.chart('container', options);
var update = function () {
var points = chart.series[0].points;
chart.series[0].setData([points[0].y, points[1].y + 200]);
};
var rotate = function () {
var points = chart.series[0].points,
ticks = chart.xAxis[0].ticks;
var sortedPoints = points.slice();
sortedPoints.sort(function(a,b){
return b.y - a.y;
});
points.forEach(function(point, i){
sortedPoints.forEach(function(sPoint, j){
if (point === sPoint){
points[i].graphic.animate({
x: points[j].shapeArgs.x
});
points[i].dataLabel.animate({
y: points[j].dataLabel.y
});
ticks[i].label.animate({
y: ticks[j].label.xy.y
});
}
});
});
};
document.getElementById("button").addEventListener("click", function() {
update();
rotate();
}, false);
现场演示:https://jsfiddle.net/Shinohara/dscvwrxu/22/
不需要重置内部状态。您可以中继当前值和初始值:
var rotate = function() {
var points = chart.series[0].points,
index,
ticks = chart.xAxis[0].ticks;
var sortedPoints = points.slice();
sortedPoints.sort(function(a, b) {
return b.y - a.y;
});
points.forEach(function(point, i) {
sortedPoints.forEach(function(sPoint, j) {
if (point === sPoint) {
index = j;
if (points[i].animated) {
points[i].animated = false;
j = i;
} else {
points[i].animated = true;
}
points[i].graphic.animate({
x: points[j].shapeArgs.x
});
points[i].dataLabel.animate({
y: points[index].dataLabel.y
});
ticks[i].label.animate({
y: ticks[j].label.xy.y
});
}
});
});
};
现场演示:https://jsfiddle.net/BlackLabel/jfd0vuy8/
@ppotaczek 当我多次单击按钮时,您的现场演示会无限旋转条。在这种情况下,我想要的是第一次旋转柱线的代码。以下是我的意图。
State1: Cat1=1000, Cat2=900 # Current rank is 1st:Cat1 and 2nd:Cat2
Interval1: Cat2+=200 and rotate bars between state1 and state2
State2: Cat1=1000, Cat2=1100 # Current rank is 1st:Cat2 and 2nd:Cat1
Interval2: Cat2+=200 and don't rotate bars between state2 and state3
State3: Cat1=1000, Cat2=1300 # Current rank is 1st:Cat2 and 2nd:Cat1
我认为您的现场演示在 state2 和 state3 之间旋转条形的原因是update()
也会旋转条。
// This function unintentionally rotates bars for the second time.
var update = function() {
var points = chart.series[0].points;
chart.series[0].setData([points[0].y, points[1].y + 200]);
};
我想把条从大到小放。而且我不想在等级不变时旋转条。你有什么好的解决方案吗?