如何放大饼图并向中心移动

Question

我正在使用 highcharts.js，我有两个与制作饼图相关的问题：

如何放大每个饼图以及如何将这两个图表设置在窗格中间？

$(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container', type: 'pie'
        },
        title: {
            text: 'Pesticide Residues On Domestic and Imported Foods'
        },
        subtitle: {
            text: 'Percent of foods that exceed FDA or EPA tolerances',
        },
        plotOptions: {
            pie: {
                dataLabels: { enabled: false }
            }
        },
        series: [{
            name: 'Domestic foods',
            size: 150,
            x: 0,
            center: [100, 100],
            data: [
                ['Firefox', 44.2], ['IE7', 26.6], ['IE6', 20], ['Chrome', 3.1], ['Other', 5.4]
            ]
        }, {
            name: 'Imported foods',
            size: 150,
            center: [300, 100],
            data: [
                ['Firefox', 44.2], ['IE7', 26.6], ['IE6', 20], ['Chrome', 3.1], ['Other', 5.4]
            ]
        }]
    });
});

jsfiddle

Answer 1

查看更新后的 demo

我从容器中删除了样式并将其添加到 CSS

#container{
    margin: 0 auto;
    width: 500px;
    height: 400px;
    border: 1px solid red;
}

（添加红色边框仅供参考，您可以将其删除）

此外，每个系列都有一个 size 属性。您可以根据自己的喜好将值更改为任意数量。我将 1 更改为 250 - 即：

size: 250,

Answer 2

这对你有用吗？

稍微加宽容器并增加 JS 的大小。

在HTML

<div id="container" style="height: 400px; width: 550px; margin-left: auto; margin-right: auto;"></div>

在 JS 中

//...
size: 200,
// ....

JSFiddle

如何放大饼图并向中心移动

How do I enlarge the pie chart and shift to the center

javascript

highcharts