Highcharts 3D 功能模块提供了少量的 3D 图形支持,目前支持 3D 柱状图、3D 饼图及 3D 散点图。
使用 Highcharts 3D 图形需要额外的加载 3D 功能模块文件
<script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
一、3D 配置
3D 配置是在 chart.options3d 下面,另外也可以配置在 plotOptions 下的图表类型里,是针对某种图表类型生效。下面是所有的 3D 配置及说明
chart: {
....
options3d: {
enabled: false, // 使用开始 3D 功能,
alpha: 0, // 内旋转角度
beta: 0, // 外旋转角度
depth: 100, // 图表的全深比,即为3D图X,Y轴的平面点固定,以图的Z轴原点为起始点上
// 下旋转,值越大往外旋转幅度越大,值越小往内旋转越大
viewDistance: 100, // 视图距离,它对于计算角度影响在柱图和散列图非常重要。此值不能用于3D的饼图
frame: { // Frame框架,3D图包含柱的面板,我们以X ,Y,Z的坐标系来理解,X轴与 Z轴所形成
// 的面为bottom,Y轴与Z轴所形成的面为side,X轴与Y轴所形成的面为back,bottom、
// side、back的属性一样,其中size为感官理解的厚度,color为面板颜色
bottom: {
size: 1,
color: 'transparent'
},
side: {
size: 1,
color: 'transparent'
},
back: {
size: 1,
color: 'transparent'
}
}
},
...
}
...
plotOptions: { // 针对特定图表类型生效的 3D 配置
...
column: {
...
depth: 25,
groupZPadding: 1, // z 轴间距,用于 3D 图形中的多个数据列间距
...
},
...
pie: {
depth: 0
},
...
}