HighCharts - 让饼图成为100%的div。

Question

我怎么能做一个 pie 填充图 100% 的 div它是包含在? 的 div 宽度为 198px 而它的高度是 152px.

此外，我想有一个 linear-gradient 每个饼图片内的效果，能不能告知一下怎么做？

Answer 1

你可以通过设置饼图的高度来实现饼图的全高。size 属性中的 plotOptions 饼和去除 margins, spacing 和 titles 从图表中。

编码

    chart: {           
        margin: [0, 0, 0, 0],
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0
    },
    plotOptions: {
        pie: {
            size:'100%',
            dataLabels: {
                enabled: false
            }
        }
    }

例子 (更新了提琴指向2.2.4版本)

这里是一个 例子 证明了这一点。

至于线性梯度，我不知道它们是否已经实现了，但这里有一个 例子 显示径向梯度。

径向梯度现在也是Highcharts 3.0的一部分，这里有一个 例子

更新

看来从Highcharts 3.0开始，由于图表在绘图区域内的自动缩放，这已经不可能了，这是他们文档中的节选。

size: 相对于绘图区域的饼的直径。可以是百分比或像素值。像素值为整数。默认的行为（从3.0开始）是根据绘图区域进行缩放，并为绘图区域内的数据标签留出空间。 因此，当更新点和数据标签时，饼的大小可能会有所不同。在这种情况下，最好设置一个固定值，例如 "75%"。默认值为.75%。

在我看来，这不应该是这样的情况，因为 dataLabels 可能应该被记录为 虫子

更新(2014年8月)

根据 托尔斯泰 评论，这确实还是可以的。slicedOffset 需要设置为 0 除了页边距开始设置。(例子)

$(function () {
    $('#container').highcharts({
        title: null,
        chart: {
            type: 'pie',
            margin: 0
        },
        
        plotOptions: {
            pie: {
                slicedOffset: 0,
                size: '100%',
                dataLabels: {
                    enabled: false
                }
            }
        },
        
        series: [{
            data: [
                ['Firefox',   44.2],
                ['IE7',       26.6],
                ['IE6',       20],
                ['Chrome',    3.1],
                ['Other',    5.4]
            ]
        }]
    });
});

#container {
    outline: 1px solid red;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500"></div>

Answer 2

我的解决方案；（对于图例的页边距-顶部误差

chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie',
                    height:'100%' // added...
                },

plotOptions: {
        pie: {
            size:'100%',
             height: '100%',
            dataLabels: {
                enabled: false
            }
        }
    }