Question

我正在尝试更新饼图，但问题是它与图例重叠而导致出现问题。我要删除默认系列并添加新系列，然后旧图例不会隐藏，而新图例会重叠。以下是我的代码：

<script src="http://code.highcharts.com/highcharts.js"></script>
    <div id="container" style="height: 300px"></div>
    <button id="update">Update chart</button>

    $(function () {
        $('#container').highcharts({
chart: {
            animation: {
                duration: 1000
            },
            type:'pie'
        },
    plotOptions: {
              pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                  enabled: false,
                  format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                },
                showInLegend: true
              }
            },
series: [{
            name: 'Brands',colorByPoint: true,
            data: [
              { name: 'Data1', y: 60.40,},
              {name: 'Data2', y: 39.60,},
            ]
          }]
    });

    var i = 1;
    $('#update').click(function () {
        var chart = $('#container').highcharts();
        var newData =[{ name: 'ABC', y: 80 },{ name: 'XYZ',
                        y: 20,}];
 while (chart.series.length > 0)
                chart.series[0].remove(true);

            let series={
                name:'new Load',
                data:newData
                }
             chart.addSeries(
                  series, false
              );
      chart.redraw()

    });
    });

Answer 1

这是Highcharts中的一个回归错误，在这里被提示：https://github.com/highcharts/highcharts/issues/12627它已在master分支上修复。

要解决此问题，请使用master分支中的代码或添加此插件：

(function(H) {
    H.wrap(H.Point.prototype, 'destroy', function(proceed) {
        if (this.legendItem) { // pies have legend items
            this.series.chart.legend.destroyItem(this);
        }
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

在图表中替换系列时，饼图图例与较旧的图例重叠

1 个答案: