javascript - Highcharts:与 setData 同步动态更新 dataLabels

Question

我想与 setData 同步更新 dataLabels。

当我调用 setData 时，我想要更新 dataLabels，例如 1、2、3、... 100、... 1000。关于数字间隔的任何内容都可以。

var chart = Highcharts.chart('container', {
    series: [{data: [1]}]
});    
chart.series[0].setData([1000], true, {duration: 3000});

这是现场演示。 https://jsfiddle.net/Shinohara/hqsbcoum/11/

请问有人可以帮助我吗？

Answer 1

您可以在间隔函数中编辑dataLabel文本:

setTimeout(function() {
    var newValue = 1000,
        actualValue = chart.series[0].points[0].y,
        dataLabelInterval,
        counter = 1,
        step = (newValue - actualValue) / 10;

    chart.series[0].setData([newValue], true, {
        duration: 3000
    });

    chart.series[0].points[0].dataLabel.attr({
        text: actualValue
    });

    dataLabelInterval = setInterval(function() {
        counter++;
        chart.series[0].points[0].dataLabel.attr({
            text: actualValue += step
        });

        if (counter > 10) {
            clearInterval(dataLabelInterval);
        }
    }, 300);
}, 2000);

现场演示:https://jsfiddle.net/BlackLabel/01zfoyud/