javascript - HighCharts - 使饼图占 div 的 100%

Question

如何制作包含它的图表pie填充？的宽度为，高度为。100%divdiv198px152px

另外我想linear-gradient在每个馅饼片内产生效果，你能建议如何做到这一点吗？

Answer 1

您可以通过在饼图中设置size属性并从图表中plotOptions删除margins,来实现饼图的全高。spacingtitles

代码

    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被禁用。应该可能被记录为错误

更新（2014 年 8 月）

根据Torstein 的评论，这确实仍然是可能的。除了边距开始设置外，还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
            }
        }
    }