Высокие диаграммы: динамическое обновление меток данных в синхронизации с setData

Question

Я хочу обновить dataLabels синхронно с setData.

Когда я вызываю 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/