Highcharts饼图渲染与图例冲突

Highcharts pie rendering in conflict with legend

本文关键字：冲突 Highcharts      更新时间：2023-10-25

我有一个带有顶部图例的Highcharts饼图示例。

    legend: {
        layout: 'horizontal',
        verticalAlign: 'top'
    }

http://jsfiddle.net/wt4rqudh/1/

演示中有一个addSeries按钮，它添加了一个内部饼图。因为这会向图例中添加更多的行，所以渲染的饼图会向下推，从而导致错误的行为。

有人知道怎么解决这个问题吗？图例位置必须保持不变。

使其看起来有些平滑的方法是：

  1. 执行chart.addSeries，但不重绘
  2. 对原始系列执行update，但仍不重绘
  3. 执行chart.redraw()定位两个系列

在代码中，这看起来像这样：

chart.addSeries({
    // Series attributes ...
}, false);
chart.series[0].update(null, false);
chart.redraw();

请参阅此JSFiddle演示。

因为您正在添加系列，所以旧的系列永远不会被删除，所以您基本上在一个图表上获得多个饼图。

在添加新系列之前，必须删除旧系列：

 $('#button').click(function () {
    var chart = $('#container').highcharts();
    chart.series[0].remove();
    chart.addSeries({
        size: '70%',
        innerSize: '50%',
        data: []
    });
});

演示：http://jsfiddle.net/7sopburu/.

相关文章：