如何制作pie
图表填充100%
中包含的div
? div
的宽度为198px
,其高度为152px
。
此外,我希望在每个饼图片中都有linear-gradient
效果,你能建议如何做到这一点吗?
答案 0 :(得分:75)
您可以通过设置饼图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)
这是一个example来证明这一点。
关于线性渐变,我不知道它们是否已经实现,但这里有example显示径向渐变。
径向渐变现在也是Highcharts 3.0的一部分,这里是example
<强>更新强>
看起来像Highcharts 3.0,由于绘图区域内的图表自动缩放,这是不可能的,摘自他们的文档:
尺寸:饼图相对于绘图区域的直径。可以是百分比或像素值。像素值以整数给出。 默认行为(从3.0开始)是缩放到绘图区域并为绘图区域内的数据标签提供空间。因此,当更新点和数据时,饼图的大小可能会有所不同标签更多。在这种情况下,最好设置一个固定值,例如“75%”。默认为。
在我看来,自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>
答案 1 :(得分:0)
我的解决方案; (用于图例位置的边距顶端错误。)
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
height:'100%' // added...
},
plotOptions: {
pie: {
size:'100%',
height: '100%',
dataLabels: {
enabled: false
}
}
}