javascript - 动态更改 Highchart 饼图的中心？

Question

我正在尝试在窗口调整大小事件上更改 Highchart 饼图的中心，但我无法做到这一点。

这是一个jsfiddle

我试图移动馅饼但没有成功......

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
        	renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
        },
        plotOptions: {
            pie: {
                center: ["50%","50%"]
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Microsoft Internet Explorer',
                y: 56.33
            }, {
                name: 'Chrome',
                y: 24.03,
            }, {
                name: 'Firefox',
                y: 10.38
            }, {
                name: 'Safari',
                y: 4.77
            }, {
                name: 'Opera',
                y: 0.91
            }, {
                name: 'Proprietary or Undetectable',
                y: 0.2
            }]
        }]
    });
    $('#changeposition').click(function() {
      	chart.options.plotOptions.pie.center = ["0","50%"];
        console.log(chart);
    });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<button id="changeposition" type="button">To the left</button>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 1

只需添加以下内容:

$('#changeposition').click(function() {
        chart.options.plotOptions.pie.center = ["0%","50%"];
        console.log(chart);
        chart = new Highcharts.Chart(chart.options);
});

您需要重新绘制图表。

这是一个 fork 的 jsfiddle 正在工作:https://jsfiddle.net/45j7bxnn/1/