高图：与setData同步动态更新dataLabel

Question

我想与setData同步更新dataLabels。

当我调用setData时，我想要更新dataLabel，例如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/