Javascript HighCharts - 使饼图占 div 的 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11735306/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HighCharts - Make the pie chart 100% of the div
提问by Alon
How can I make a piechart fill 100%of the divit is contained in? The divhas a width of 198pxand it's height is 152px.
我怎样才能让一个pie图表填充100%的div是包含在？的div宽度为198px，高度为152px。
Additionally I would like to have a linear-gradienteffect inside each pie slice, can you advise on how to do that?
另外，我想linear-gradient在每个馅饼切片内产生效果，你能建议如何做到这一点吗？
回答by epoch
You can achieve the full height of the pie chart by setting the sizeattribute in the plotOptionsof pie and removing margins, spacingand titlesfrom the chart.
您可以通过设置饼图中的size属性并从图表中plotOptions删除margins,spacing和来实现饼图的全高titles。
Code
代码
chart: {
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
plotOptions: {
pie: {
size:'100%',
dataLabels: {
enabled: false
}
}
}
Example(updated the fiddle to point to version 2.2.4)
示例（更新小提琴以指向版本 2.2.4）
Here is an exampledemonstrating this.
这里有一个例子来证明这一点。
As to the linear gradients, I don't know if they have been implemented yet, but here is an exampleshowing radial gradients.
至于线性渐变，我不知道它们是否已经实现，但这里有一个显示径向渐变的示例。
Radial gradients are also part of Highcharts 3.0 now, here is an example
径向渐变现在也是 Highcharts 3.0 的一部分，这是一个例子
Update
更新
Looks like as of Highcharts 3.0, this is not possible anymore due to the chart auto-scaling within the plot area, an excerpt from their documentation:
看起来像 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 .
大小：饼图相对于绘图区域的直径。可以是百分比或像素值。像素值以整数形式给出。默认行为（从 3.0 开始）是缩放到绘图区域并为绘图区域内的数据标签留出空间。因此，当点更新和数据标签更多时，饼图的大小可能会有所不同。在这种情况下，最好设置一个固定值，例如“75%”。默认为 .
in my opinion this should not be the case since dataLabelsare disabled. should probably be logged as a bug
在我看来，这不应该是这种情况，因为dataLabels被禁用了。可能应该记录为错误
Update (Aug 2014)
更新（2014 年 8 月）
As per Torstein'scomment, this is indeed still possible. slicedOffsetneeds to be set to 0in addition to the margins begin set. (example)
根据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>