HighCharts - 使饼图成为div的100%

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%".默认为.

在我看来,这应该不是因为dataLabels被禁用.应该记录为bug

更新(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>