HighCharts - 制作饼图100％的div [英] HighCharts - Make the pie chart 100% of the div
问题描述
我如何使 div 馅饼图表填充 100％ code>它包含在？ div 的宽度为 198px ，高度为 152px 。
另外，我想在每个饼图片段中都有一个线性渐变效果，您能否建议如何做到这一点？
您可以通过设置大小 plotOptions 中删除页边距，间距和 titles 。
代码
图表：{
保证金：[0,0,0,0]，
spacingTop：0，
spacingBottom ：0，
spacingLeft：0，
spacingRight：0
}，
plotOptions：{
pie：{
size：'100％'，
dataLabels：{
启用：假
}
}
}
例子 （更新小提琴指向版本2.2.4）
这是 example 证明了这一点。
至于线性渐变，我不会不知道它们是否已经实现，但是这里有一个显示径向渐变的示例。
径向渐变现在也是Highcharts 3.0的一部分，这里是示例
更新
<罢工>看起来像Highcharts 3.0，由于图表自动缩放在剧情区域内，这是不可能的，从他们的文档摘录：
尺寸：饼馅饼的直径对剧情区域采取行动。可以是百分比或像素值。像素值以整数形式给出。 默认行为（自3.0开始）将缩放到绘图区域，并为绘图区域内的数据标签留出空间。因此，更新点和数据时，饼图的大小可能会有所不同标签更多。在这种情况下，最好设置一个固定值，例如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 =containerstyle =height：400px; width：500>< / div>
How can I make a pie chart fill 100% of the divit is contained in? The div has a width of 198px and it's height is 152px.
Additionally I would like to have a linear-gradient effect inside each pie slice, can you advise on how to do that?
You can achieve the full height of the pie chart by setting the size attribute in the plotOptions of pie and removing margins, spacing and titles from the chart.
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)
Here is an example demonstrating this.
As to the linear gradients, I don't know if they have been implemented yet, but here is an example showing radial gradients.
Radial gradients are also part of Highcharts 3.0 now, here is an example
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:
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 .
in my opinion this should not be the case since dataLabels are disabled. should probably be logged as a bug
Update (Aug 2014)
As per Torstein's comment, this is indeed still possible. slicedOffset needs to be set to 0 in addition to the margins begin set. (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>
这篇关于HighCharts - 制作饼图100％的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
