Highcharts饼图渲染与传奇冲突

Question

我有一个Highcharts饼的示例，其顶部有一个传奇。

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

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

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

有谁知道如何解决这个问题？图例位置必须保持不变。

Answer 1

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

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

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

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

Answer 2

使这看起来有点平滑的方法是：

1. 执行chart.addSeries，但不重新绘制
2. 在原始系列中执行update，仍未重绘
3. 执行chart.redraw()以定位两个系列

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

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

请参阅this JSFiddle demonstration的外观。