Highcharts3D环形图

***Highcharts3D环形图***小知识：
//渐变
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: { cx: 0.1, cy: 0.3, r: 0.3},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.1).get('rgb')] // darken
]
};
});
var chart = Highcharts.chart('container', {
//去除Highcharts的水印
credits: {
enabled: false
},
chart: {
type: 'pie',
//设置背景透明
backgroundColor: 'rgba(0,0,0,0)',
options3d:{
//画图表是否启用3D函数，默认值为：false
enabled:true,
//3D图旋转角度，此为α角，内旋角度默认为0
alpha:70,
//3D图旋转角度，此为β角，外旋角度 默认为0
beta:0,
//图表的全深比，即为3D图X，Y轴的平面点固定，以图的Z轴原点为起始点上下旋转，值越大往外旋转幅度越大，值越小往内旋转越大，depth的默认值为100
//默认是： 100
depth:40,
//它定义了观看者在图前看图的距离，它是非常重要的对于计算角度影响在柱图和散列图，此值不能用于3D的饼图，默认值为100
viewDistance: 10
}
},
//Highcharts标题
title: {
text: '' " //标题为空
},
//Highcharts副标题
// subtitle: {
// // text: 'Highcharts 中的3D环形图'
// },
plotOptions: {
pie: {
colors: ['#007968', '#9B63A1'],
innerSize: 100,
depth: 36,
dataLabels: {
//是否显示饼图的线形tip
enabled: true,
formatter: function() {
//设置字体与引导线和饼图颜色一致`在这里插入代码片`
return '<p style="color:'+ this.color+'">'+ this.point.name +'</p><br>
<p style="color:'+ this.color+'">'+ (this.percentage).toFixed(1)+'%</p>';
},
style: {
//去掉文字白边
textOutline: 'none',
//字体大小`在这里插入代码片`
fontSize: "26px",
}
}
}
},
series: [{
name: '所占比例',
data: [
['男', 8],
['女', 3]
],
xAxis: {
labels: {
rotation: 90
}
}
}],
});

最后

以上就是从容秀发为你收集整理的Highcharts3D环形图的全部内容，希望文章能够帮你解决Highcharts3D环形图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。