如何使用highcharts制作甜甜圈图表?
我想创建一个甜甜圈图表,如下图所示: 到目前为止,我已经做到了:如何使用highcharts制作甜甜圈图表?,highcharts,donut-chart,Highcharts,Donut Chart,我想创建一个甜甜圈图表,如下图所示: 到目前为止,我已经做到了: var图表=新的Highcharts.图表({ 图表:{ renderTo:'订阅者图', 键入:“馅饼” }, 标题:{ 垂直排列:'中间', 浮动:是的, 文本:“70%750K已利用”, }, 打印选项:{ 馅饼:{ 内部尺寸:“100%” }, 系列:{ 国家:{ 悬停:{ 已启用:false }, 非活动:{ 不透明度:1 } } } }, 系列:[{ 边框宽度:0, 姓名:'订户', 数据:[ { y: 30岁,
var图表=新的Highcharts.图表({
图表:{
renderTo:'订阅者图',
键入:“馅饼”
},
标题:{
垂直排列:'中间',
浮动:是的,
文本:“70%
750K
已利用”,
},
打印选项:{
馅饼:{
内部尺寸:“100%”
},
系列:{
国家:{
悬停:{
已启用:false
},
非活动:{
不透明度:1
}
}
}
},
系列:[{
边框宽度:0,
姓名:'订户',
数据:[
{
y: 30岁,
名称:“在线”,
颜色:{
线性半径:{x1:0,x2:0,y1:0,y2:1},
停止:[
[0,#4679F8'],
[1,#57B2A5']
]
},
},
{
y:20,
名称:“离线”,
颜色:“DDF4E4”,
}
],
大小:“100%”,
内部尺寸:“75%”,
showInLegend:false,
数据标签:{
已启用:false
}
}],
学分:{
已启用:false
}
});代码>
您可以添加另一个具有适当大小的系列
和内部大小
属性:
series: [{
...
}, {
size: '65%',
innerSize: '95%',
dataLabels: {
enabled: false
},
data: [{
y: 30
}, {
y: 20,
color: 'rgba(0,0,0,0)'
}]
}]
现场演示:
API参考:我认为highcharts并不是为这种定制级别而设计的。在引擎盖下,它创建了SVG——因此,如果你想走这条路,你可以按自己喜欢的方式自定义它。如果你想走原始SVG路线,那么我可以提供一些帮助。