Highcharts: Can I animate changing the order of bars on bar chart?

问题: I want to create a chart like the below. https://www.reddit.com/r/interestingasfuck/comments/9togwf/the_major_world_economies_over_time/ I created this chart by Highchart...

问题:

I want to create a chart like the below. https://www.reddit.com/r/interestingasfuck/comments/9togwf/the_major_world_economies_over_time/

I created this chart by Highcharts. But, I can't animate changing the order of bars.

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);

enter image description here

All code I wrote are in JSFiddle. https://jsfiddle.net/Shinohara/35e8gbyz/

Please anyone can help me?


回答1:

Highcharts provides animate method for SVG elements, which you can use to achieve the wanted result. You need to animate columns, axis labels and data labels:

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);

Live demo: https://jsfiddle.net/BlackLabel/ux59vcd6/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#animate


回答2:

It seems there is no native implementation. The only idea I have it to not display Y axis labels at all. Using SVGRenderer draw the text and save it as a variable (for further updating)

  chart.customText = chart.renderer.text('label name', 100, 100) // label name, X, Y
    .attr({
        useHTML: true
    })
    .css({
        fontSize: '16px' // and other CSS if necessary
    })
    .add();

Then you can update x, y or text

chart.customText.attr({
  str: 'new text. You can use HTML',
  y: 150 // new value
})

Your next step is to do something with Y position. Or even you can try to draw only 1 text with HTML that contains all labels. Then using JS move them as you need.

  • 发表于 2018-12-28 07:52
  • 阅读 ( 275 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除