javascript - 如何放大饼图并移动到中心

Question

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

如何放大这些饼图以及如何将两个图表设置在 Pane 中间？

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

这对你有用吗？

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

在 HTML 中

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

在 JS 中

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

JSFiddle