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属性。您可以将值更改为您喜欢的任何数量。我把一个改为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

如何放大饼图并转移到中心

2 个答案: