Highcharts：我们如何用动画对系列进行排序？

Posted 2021-05-05

我正在使用水平条形图来连续更新系列数据。这是成功实现的，但现在我希望这些系列按照动画的desc顺序对数据进行排序（连续进行系列的每次更新）。我的意思是当一个条获得最大值然后用动画将其移动到顶部。

我怎么能实现这个目标？

答案

Highcharts中默认不支持这种类型的功能。您可以在下面找到一个示例，说明如何通过自定义代码实现所需结果：

var options = {
    chart: {
        type: 'bar'
    },
    xAxis: {
        categories: ['Cat1', 'Cat2', 'Cat3'],
    },
    series: [{
        data: [1000, 900, 800]
    }]
};

var chart = Highcharts.chart('container', options);

// Add custom data labels
chart.series[0].points.forEach(function(point, i) {
    var x = chart.plotWidth - point.plotY + chart.plotLeft,
        y = chart.xAxis[0].ticks[i].label.xy.y;

    point.customDataLabel = chart.renderer.text(
            point.y,
            x,
            y
        )
        .css({
            color: '#000000',
            fontSize: '14px'
        })
        .attr({
            zIndex: 3
        })
        .add();

    setAlign(point.customDataLabel);
});

function setAlign(label, xPos) {
    var align = 'left',
        bbox = label.getBBox();

    if (chart.chartWidth < (xPos ? xPos : bbox.x + bbox.width) + 50) {
        align = 'right';
    }

    label.attr({
        align: align
    })
}


var update = function() {
    var points = chart.series[0].points;
    chart.series[0].setData([Math.round(Math.random() * 1000), Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]);
};

var rotate = function() {
    var points = chart.series[0].points,
        labelX,
        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) {

                labelX = chart.plotWidth - points[i].plotY + chart.plotLeft;

                // Animate the column
                points[i].graphic.animate({
                    x: points[j].shapeArgs.x
                });

                // Animate the label
                points[i].customDataLabel.attr({
                    text: points[i].y
                }).animate({
                    y: ticks[j].label.xy.y,
                    x: labelX
                });

                setAlign(points[i].customDataLabel, labelX);

                // Animate the axis label
                ticks[i].label.animate({
                    y: ticks[j].label.xy.y
                });
            }
        });
    });
};

document.getElementById("button").addEventListener("click", function() {
    update();
    rotate();
}, false);

现场演示：https://jsfiddle.net/BlackLabel/mg5bv3s8/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGElement#animate