Highcharts 饼图渲染与图例冲突

Question

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

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

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

演示中有一个添加系列按钮，可以添加一个内部饼图。因为这会向图例添加更多行，所以呈现的饼图会被向下推，从而导致不正确的行为。

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

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

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

执行 chart.addSeries，但不重绘
在原来的系列上做了一个update，还是没有重绘
做一个chart.redraw()来定位两个系列

在代码中看起来像这样：

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

查看 this JSFiddle demonstration 它的外观。

Highcharts 饼图渲染与图例冲突

Highcharts pie rendering in conflict with legend

javascript

charts

highcharts