Question

您好我试图更新我的饼图LIVE而不重绘饼图，有什么建议吗？

这是被称为

的函数

var i = 0;
setInterval(function(){
    piecharts(i, 1, 2, 3, 4, 5);
    i++;
 },5000);

function piecharts(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
            options3d: {
                enabled: false,
                alpha: 45,
                beta: 0
            }
    },
    title: {
        text: 'Number of person in each sector'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.y}</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.y} ', //change percentage to y for decimal value
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{ 
        name: 'Avg number of person in this sector over the total of ',
        colorByPoint: true,
        data: [{
            name: 'Sector0',
            y: sector0Data
        },{
            name: 'Sector1',
            y: sector1Data
        },{
            name: 'Sector2',
            y: sector2Data
        },{
            name: 'Sector3',
            y: sector3Data
        },{
            name: 'Sector4',
            y: sector4Data
        }, {
            name: 'Sector5',
            y: sector5Data
        }]
    }]
});
}

每5秒，我的i将增加1，我的饼图将被绘制，这样可以正常工作，但它一直在重绘我的图表。任何建议？谢谢。另外，我使用的是高图的v4.1.8

Answer 1

您应该使用update()方法。在DOM ready事件上初始化您的图表，只需调用一个函数来更新数据：

<强> Demo

function updatePiechart(sector0Data, sector1Data, sector2Data, sector3Data, sector4Data, sector5Data)
{
    var chart = $('#container').highcharts();

    chart.series[0].update({
        data: [{
              name: 'Sector0',
              y: sector0Data
          },{
              name: 'Sector1',
              y: sector1Data
          },{
              name: 'Sector2',
              y: sector2Data
          },{
              name: 'Sector3',
              y: sector3Data
          },{
              name: 'Sector4',
              y: sector4Data
          }, {
              name: 'Sector5',
              y: sector5Data
       }]
    })
}

Answer 2

重新渲染的原因是您每五秒钟创建一个新图表，而不是更新其数据。

您需要在图表系列数据上为您的 y点调用update method：

chart.series[0].data[0].update(y);

以下是有关如何更新数据的简单示例：Update pie data jsfiddle

或者查看documentation for live data

在电话问题上重新加载Highchart - javascript

2 个答案: