动态改变Highchart派的中心？

Question

我试图在窗口调整大小事件上更改Highchart饼图的中心，但我无法实现。

这里是jsfiddle

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

＆＃13;

＆＃13;

$(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);
    });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需添加：

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

您需要重新绘制图表。

这是一个分叉的jsfiddle工作：https://jsfiddle.net/45j7bxnn/1/

Answer 2

已在HighCharts. Change options dynamically

处回答

chart.options.plotOptions.pie.center = ["0%","50%"];
chart = new Highcharts.Chart(chart.options);

https://jsfiddle.net/su8ts5zo/2/