动态将新数据添加到Highchart饼图中

Question

我正在使用highcharts制作饼图，但我需要定期更新它，而当我尝试这样做时，它并不能反映更改。

它有这个代码

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