Javascript 没有内馅饼的 Highchart 甜甜圈图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11678684/
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 without inner pie?
提问by Jonathan Chen
I've been searching for the solution to generate the simplest donut chart with Highcharts library. However, all examples of Highcharts show the style of chart with both inner pie and outer donut (refer to: http://www.highcharts.com/demo/pie-donut)
我一直在寻找使用 Highcharts 库生成最简单的圆环图的解决方案。但是，Highcharts 的所有示例都显示了带有内部饼图和外部甜甜圈的图表样式（请参阅：http: //www.highcharts.com/demo/pie-donut）
How can I get rid of the inner pie and just keep the outer donut, just like other libraries do? (something like RGraph: http://www.rgraph.net/examples/donut.html)
我怎样才能摆脱内部馅饼而只保留外部甜甜圈，就像其他图书馆一样？（类似于 RGraph：http://www.rgraph.net/examples/donut.html ）
Thank you.
谢谢你。
回答by andypaxo
You just need to provide the data as an array of two element (key / value) arrays. Specify an innerSizeto get the donut style.
您只需要将数据作为两个元素（键/值）数组的数组提供。指定innerSize以获取甜甜圈样式。
So your parameters will contain something like this:
所以你的参数将包含如下内容：
...
data: [["Firefox",6],["MSIE",4],["Chrome",7]],
innerSize: '20%',
...
Here's a jsFiddle of a complete example.
回答by Khandad Niazi
**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();
});
});
回答by Jon Dysinger
This was the top search result and the answers given did not work for me. I needed more control over the data points than just a simple array of arrays. I needed to use JSON objects to configure additional options like explicit colors for specific data. I found through some research that you don't have to modify your data format at all. All you have to do in order to make a pie chart into a donut chart is to just set an innerSize value greater than 0 in the data series.
这是最热门的搜索结果，给出的答案对我不起作用。我需要对数据点进行更多控制，而不仅仅是简单的数组数组。我需要使用 JSON 对象来配置其他选项，例如特定数据的显式颜色。我通过一些研究发现你根本不需要修改你的数据格式。要将饼图制作成圆环图，您只需在数据系列中设置一个大于 0 的 innerSize 值。
From the highcharts documentation:
来自 highcharts 文档：
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 pie size. Pixel values are given as integers.
innerSize：饼的内径大小。大于 0 的大小呈现圆环图。可以是百分比或像素值。百分比与饼图大小有关。像素值以整数形式给出。
So you can obtain a simple donut chart with data like the following:
因此，您可以获得一个简单的圆环图，其中包含如下数据：
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'}
]
}]
