[英]Highcharts donut chart without inner pie?
我一直在寻找使用 Highcharts 库生成最简单的圆环图的解决方案。 但是,Highcharts 的所有示例都显示了带有内部饼图和外部甜甜圈的图表样式(请参阅: http : //www.highcharts.com/demo/pie-donut )
我怎样才能摆脱内部馅饼而只保留外部甜甜圈,就像其他图书馆一样? (类似于 RGraph: https ://www.rgraph.net/demos/donut-3d.html)
谢谢你。
**I hope this example of highchat will solve your problum
http://jsfiddle.net/e2qpa/3/
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '60%'
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]}]
},
// using
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#ddd',
}).add();
// Render the text
chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
这是最热门的搜索结果,给出的答案对我不起作用。 我需要对数据点进行更多控制,而不仅仅是简单的数组数组。 我需要使用 JSON 对象来配置其他选项,例如特定数据的显式颜色。 我通过一些研究发现你根本不需要修改你的数据格式。 要将饼图制作成圆环图,您只需在数据系列中设置一个大于 0 的 innerSize 值。
来自 highcharts 文档:
innerSize:饼的内径大小。 大于 0 的大小呈现圆环图。 可以是百分比或像素值。 百分比与饼图大小有关。 像素值以整数形式给出。
因此,您可以获得一个简单的圆环图,其中包含如下数据:
series: [{
innerSize: '30%',
data: [
{name: 'Yellow Slice', y: 12, color: 'yellow'},
{name: 'Red Slice', y: 10, color: 'red' },
{name: 'Blue Slice', y: 33, color: 'blue'},
{name: 'Green Slice', y: 20, color: 'green'}
]
}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.