Highcharts setData на круговой диаграмме не работает

Question

Я отображаю круговую диаграмму, используя библиотеку Highchart.У меня есть два набора данных, которые я хочу показать, и я переключаюсь между двумя наборами каждые 5 секунд на неопределенный срок.Когда я загружаю исходный набор данных, диаграмма отображается так, как должна.И когда я загружаю второй набор данных (используя setData), диаграмма меняется как следует.Однако все последующие вызовы setData, похоже, ничего не делают.Я ожидаю, что график будет меняться снова и снова в соответствии с новыми данными.Но ничего не происходит, и в консоли не регистрируются ошибки.Что я могу делать не так?

Вот мой код:

var chart24HoursTop5;
var lastSet = 1;
var set1 = [{
    "seconds": 754,
    "y": 754,
    "downtime": "00:05:07",
    "siteNumber": "13",
    "siteName": "Preston",
    "name": "Preston",
    "motorolaNumber": "SZ092C113",
    "system": "SZ Quantar",
    "channels": "5",
    "towerOwner": "Wynn Communications",
    "shelterOwner": "Wynn Communications",
    "equipmentOwner": "DPS",
    "latitude": "35.724833",
    "longitude": "-95.988333",
    "color": "#348AA7"
}, {
    "seconds": 20,
    "y": 20,
    "downtime": "00:00:20",
    "siteNumber": "29",
    "siteName": "Bakers Peak",
    "name": "Bakers Peak",
    "motorolaNumber": "SZ092C129",
    "system": "SZ Quantar",
    "channels": "5",
    "towerOwner": "FBI",
    "shelterOwner": "DPS",
    "equipmentOwner": "DPS",
    "latitude": "34.839722",
    "longitude": "-98.803333",
    "color": "#ffa600"
}, {
    "seconds": 19,
    "y": 19,
    "downtime": "00:00:19",
    "siteNumber": "30",
    "siteName": "Walters",
    "name": "Walters",
    "motorolaNumber": "SZ092C130",
    "system": "SZ Quantar",
    "channels": "5",
    "towerOwner": "Cotton Electric",
    "shelterOwner": "DPS",
    "equipmentOwner": "DPS",
    "latitude": "34.358583",
    "longitude": "-98.321583",
    "color": "#cb5464"
}, {
    "seconds": 12,
    "y": 12,
    "downtime": "00:00:12",
    "siteNumber": "69",
    "siteName": "Hominy",
    "name": "Hominy",
    "motorolaNumber": "SZ092C169",
    "system": "P25 GTR",
    "channels": "",
    "towerOwner": "Grand River Dam Authority",
    "shelterOwner": "Grand River Dam Authority",
    "equipmentOwner": "GRDA",
    "latitude": "36.4",
    "longitude": "-96.4863888888889",
    "color": "#82F2C0"
}];
var set2 = [{
    "seconds": 691,
    "y": 691,
    "downtime": "691 Sec",
    "siteNumber": "13",
    "siteName": "Preston 2",
    "name": "Preston 2",
    "motorolaNumber": "SZ092C113",
    "system": "SZ Quantar",
    "channels": "5",
    "towerOwner": "Wynn Communications",
    "shelterOwner": "Wynn Communications",
    "equipmentOwner": "DPS",
    "latitude": "35.724833",
    "longitude": "-95.988333",
    "color": "#348AA7"
}, {
    "seconds": 10,
    "y": 10,
    "downtime": "10 Sec",
    "siteNumber": "29",
    "siteName": "Bakers Peak 2",
    "name": "Bakers Peak 2",
    "motorolaNumber": "SZ092C129",
    "system": "SZ Quantar",
    "channels": "5",
    "towerOwner": "FBI",
    "shelterOwner": "DPS",
    "equipmentOwner": "DPS",
    "latitude": "34.839722",
    "longitude": "-98.803333",
    "color": "#ffa600"
}, {
    "seconds": 1,
    "y": 1,
    "downtime": "1 Sec",
    "siteNumber": "30",
    "siteName": "Walters 2",
    "name": "Walters 2",
    "motorolaNumber": "SZ092C130",
    "system": "SZ Quantar",
    "channels": "5",
    "towerOwner": "Cotton Electric",
    "shelterOwner": "DPS",
    "equipmentOwner": "DPS",
    "latitude": "34.358583",
    "longitude": "-98.321583",
    "color": "#cb5464"
}, {
    "seconds": 5,
    "y": 5,
    "downtime": "5 Sec",
    "siteNumber": "69",
    "siteName": "Hominy 2",
    "name": "Hominy 2",
    "motorolaNumber": "SZ092C169",
    "system": "P25 GTR",
    "channels": "",
    "towerOwner": "Grand River Dam Authority",
    "shelterOwner": "Grand River Dam Authority",
    "equipmentOwner": "GRDA",
    "latitude": "36.4",
    "longitude": "-96.4863888888889",
    "color": "#82F2C0"
}];

$(document).ready(function () {
    var optionsFor24HoursTop5 = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Last 24 Hours'
        },
        tooltip: {
            pointFormat: '{series.name}: {point.downtime}'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.name}: {point.downtime}'
                }
            }
        },
        series: [{
            name: 'DropSum',
            colorByPoint: true,
            data: set1
        }]
    };
    chart24HoursTop5 = Highcharts.chart("chartContainer", optionsFor24HoursTop5);
    setTimeout(changeData, 5000);
});

function changeData() {
    if (lastSet == 1) {
        chart24HoursTop5.series[0].setData(set2);
        lastSet = 2;
    } else {
        chart24HoursTop5.series[0].setData(set1);
        lastSet = 1;
    }

А вот полностью рабочий пример jsFiddle:

https://jsfiddle.net/mspinks/ksd8gjec/23/

В этом примере вы заметите, что диаграмма отображается изначально, а затем через 5 секунд данные изменяются и отражаются на дисплее диаграммы.Однако данные меняются каждые 5 секунд, и ни одно из этих изменений не отражается на дисплее диаграммы.Почему Highcharts не показывает обновленные данные после первого изменения?

Answer 1

Для производительности Highcharts видоизменяют исходный массив данных, что приводит к тому, что переменные set1 и set2 остаются такими же после первого обновления.

Решением может быть возврат данных по функции:

function set1() {
    return [...];
}

function set2() {
    return [...];
}

function changeData() {
    if (lastSet == 1) {
        chart24HoursTop5.series[0].setData(set2());
        lastSet = 2;
    } else {
        chart24HoursTop5.series[0].setData(set1());
        lastSet = 1;
    }
    setTimeout(changeData, 2000);
}

Демонстрационная версия: https://jsfiddle.net/BlackLabel/0smxjLac/

Answer 2

Кажется, это какая-то ошибка (?), Но обходной путь, по-видимому, заключается в том, чтобы указать, что точки не должны обновляться при настройке данных.Например ( JSFiddle ):

function changeData() {
  if (lastSet == 1){
    // The fourth parameter makes or breaks the update
    chart24HoursTop5.series[0].setData(set2, true, true, false);
    lastSet = 2;
  } else {
    // The fourth parameter makes or breaks the update
    chart24HoursTop5.series[0].setData(set1, true, true, false);
    lastSet = 1;
  }
  setTimeout(changeData, 5000);
}

Это означает, что анимация отсутствует, поскольку точки удаляются и создаются новые точки.Однако, похоже, что именно это обновление точек, по-видимому, останавливает обновление вообще, поэтому, надеюсь, основная проблема также может быть решена.