Динамически добавлять новые данные в круговую диаграмму Highchart

Question

Я использую старшие диаграммы для создания круговой диаграммы, и у меня она есть, но мне нужно периодически обновлять ее, и когда я пытаюсь это сделать, она не отражает изменения.

у него есть этот код

var HChart=Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false
    },
    title: {
        text: 'Browser<br>shares<br>2017',
        align: 'center',
        verticalAlign: 'middle',
        y: 40
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                distance: -50,
                style: {
                    fontWeight: 'bold',
                    color: 'white'
                }
            },
            startAngle: -90,
            endAngle: 90,
            center: ['50%', '75%'],
            size: '110%'
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        innerSize: '50%',
        data: [
            ['Chrome', 48.9],
            ['Otro ahi no se',10],
            ['Firefox', 13.29],
            ['Internet Explorer', 13],
            ['Edge', 3.78],
            ['Safari', 3.42]

        ]
    }]
});

Я прочитал, что вы можете изменить данные, но они не отражаются на графике, они все еще показывают старые значения

я попробовал это безуспешно

$("#boton").on("click",function() {
    console.log("por aca paso");
    HChart.series[0].data.push({name:"Otra Diferente", y:7.61});
});

нет сообщения об ошибке, просто неизменный график

Answer 1

Для динамического обновления данных вы можете использовать методы Highcharts, такие как: update, setData или addPoint. Проверьте ссылки API и демоверсию, размещенную ниже.

Код:

var btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
  console.log("por aca paso");
  HChart.series[0].addPoint({
    name: "Otra Diferente",
    y: 7.61
  });
});

Демо-версия:

• https://jsfiddle.net/BlackLabel/7yj4L1du/1/

Справочник по API:

• https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

• https://api.highcharts.com/class-reference/Highcharts.Series#setData

• https://api.highcharts.com/class-reference/Highcharts.Series#update