没有内在馅饼的高级甜甜圈图表?
-
12-12-2019 - |
题
我一直在寻找解决方案,以生成最简单的甜甜圈图表与HighCharts库。但是,HIGHCHARTS的所有示例都显示了内部饼图和外甜甜圈的图表(参见: http://www.highcharts.com/demo/pie-donut )
如何摆脱内部馅饼,只需保持外甜甜圈,就像其他图书馆一样?(像RGHAGE: http://www.rgraph.net/examples/donut.html)
谢谢。
解决方案
只需要将数据提供为两个元素(键/值)阵列的数组。指定一个innerSize
以获取甜甜圈样式。
所以你的参数将包含这样的东西:
...
data: [["Firefox",6],["MSIE",4],["Chrome",7]],
innerSize: '20%',
...
.
这是一个 jsfiddle为一个完整的例子。
其他提示
**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的内部值。
从高级文档:
内部:内径的尺寸 馅饼。大小超过0呈甜甜圈图。可以是A. 百分比或像素值。百分比相对于饼图大小。 像素值作为整数给出。
因此,您可以使用如下数据获得简单的甜甜圈图:
.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'} ] }]
不隶属于 StackOverflow