javascript - HighCharts - 使饼图 100% 的 div

Question

如何制作一个 饼图 图表填充它包含的 div 的 100%？ 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
            }
        }
    }

示例 (将 fiddle 更新为指向版本 2.2.4)

这是一个 example证明这一点。

至于线性渐变，我不知道它们是否已经实现，但这里有一个 example显示径向渐变。

径向渐变现在也是 Highcharts 3.0 的一部分，这里是 example

更新

看起来像 Highcharts 3.0，由于绘图区域内的图表自动缩放，这不再可能，摘自他们的文档:

size: The diameter of the pie relative to the plot area. Can be a percentage or pixel value. Pixel values are given as integers. The default behaviour (as of 3.0) is to scale to the plot area and give room for data labels within the plot area. As a consequence, the size of the pie may vary when points are updated and data labels more around. In that case it is best to set a fixed value, for example "75%". Defaults to .

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

更新(2014 年 8 月)

根据 Torstein's评论一下，这个确实还是可以的。 slicedOffset 需要设置为0除了边距开始设置。 ( example )

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