Highcharts:我们如何用动画对系列进行排序?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Highcharts:我们如何用动画对系列进行排序?相关的知识,希望对你有一定的参考价值。

我正在使用水平条形图来连续更新系列数据。这是成功实现的,但现在我希望这些系列按照动画的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

以上是关于Highcharts:我们如何用动画对系列进行排序?的主要内容,如果未能解决你的问题,请参考以下文章

如何用Highcharts制作柱形图

如何用Fireworks制作经典的扫光字GIF动画

如何用sort对结构体进行排序

如何用我自己的代码对 QTableWidget 进行排序?

我如何用数字[重复]对字符串进行排序

如何用java对excel进行自定义排序?