Highcharts 饼图渲染与图例冲突答案

【问题标题】：Highcharts pie rendering in conflict with legendHighcharts 饼图渲染与图例冲突
【发布时间】：2015-02-14 12:07:17
【问题描述】：

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

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

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

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

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

【问题讨论】：

期望的行为是什么？你想让传奇发生什么？
@Ondkloss 正如我上面提到的，正在渲染的新饼图被下推（由于图例，与之前的饼图不对齐。）这就是我想要修复的
所以您仍然希望新的图例项目像现在一样显示？好的。

标签： javascript charts highcharts

【解决方案1】：

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

执行chart.addSeries，但不重绘
在原系列上做update，仍然没有重绘
使用chart.redraw() 定位两个系列

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

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

查看this JSFiddle demonstration 的外观。

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

我想要这两个系列都不是错误的。一个在另一个里面。