Javascript Highcharts 甜甜圈图定制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12219286/
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 donut chart customization
提问by Remo H. Jansen
I have a license for highcharts and I would like to create a char like the one bellow:
我有 highcharts 的许可证，我想创建一个像下面这样的字符：
The most similar component on highcharts is the following one:
highcharts 上最相似的组件如下：
Does someone know is is posible to replace the PIE inside for just a percent? or some other good client side javascript librarie to do it?
有人知道只用百分之一的价格就可以更换内部的 PIE 吗？或其他一些好的客户端 javascript 库来做到这一点？
You can find a demo and the API in the following links.
您可以在以下链接中找到演示和 API。
API http://api.highcharts.com/highcharts#chart
API http://api.highcharts.com/highcharts#chart
Thanks
谢谢
回答by Ricardo Alvaro Lohmann
Check about innerSize."The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the size of the plot area. Pixel values are given as integers. Defaults to 0."reference
检查一下innerSize。"The size of the inner diameter for the pie. A size greater than 0 renders a donut chart. Can be a percentage or pixel value. Percentages are relative to the size of the plot area. Pixel values are given as integers. Defaults to 0."参考
Than you can take a look this examplewhich shows how to put the textinside the donut chart.
你可以看看这个例子，它展示了如何把text圆环图放在里面。
Hope it help you.
希望对你有帮助。
回答by Faisal Ashfaq
You might try using titleas an alternative and rather simple approach.
您可以尝试使用标题作为替代且相当简单的方法。
title: {
text: 'Budget',
align: 'center',
verticalAlign: 'middle',
style: {
fontSize: '9.5px'
}
},
JsFiddle: http://jsfiddle.net/amigoo/zwod86e1/
JsFiddle：http: //jsfiddle.net/amigoo/zwod86e1/
回答by M Thomas
function(chart4) {
chart4.renderer.text('<span style="word-wrap: break-word !important;">Reduced by <br/>10 Years</span>', (chart4.chartWidth/2)-38, (chart4.chartHeight/2)-5)
.css({
color: '#4b4b4b',
fontWeight: 'bold',
fontSize: '12px'
})
.add();
}
