Highcharts 3D 图表详解
Highcharts 支持有限的 3D 图表 功能，主要通过额外模块实现。目前支持的 3D 类型包括：
- 3D 柱状图（column）
- 3D 饼图（pie，包括环形）
- 3D 散点图（scatter）
- 3D 气泡图（bubble）
- 3D 区域图（area）
注意：3D 效果更多用于视觉增强，实际数据分析中可能导致视角误导，建议谨慎使用。
环境配置（必须步骤）
除了核心 Highcharts JS 外，需要额外引入 3D 模块：
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script> <!-- 必须引入 -->核心 3D 配置（chart.options3d）
chart: {
type: 'pie', // 或 'column'、'scatter' 等
options3d: {
enabled: true, // 开启 3D
alpha: 15, // 垂直旋转角度（0-90）
beta: 15, // 水平旋转角度（0-360）
depth: 50, // 图表深度（厚度）
viewDistance: 25, // 视角距离（越大越远）
frame: { // 边框/底板/侧板自定义（可选）
bottom: { size: 1, color: '#f0f0f0' },
side: { size: 1, color: '#f0f0f0' },
back: { size: 1, color: '#f0f0f0' }
}
}
}1. 3D 饼图示例（最常用）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Highcharts 3D 饼图示例</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 600px; margin: 50px auto;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45, // 倾斜角度
beta: 0,
depth: 50 // 饼图厚度
}
},
title: { text: '2024年浏览器市场份额（3D 饼图）' },
tooltip: { pointFormat: '<b>{point.percentage:.1f}%</b>' },
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 45, // 饼图厚度
dataLabels: { enabled: true, format: '{point.name}: {point.percentage:.1f}%' }
}
},
series: [{
type: 'pie',
name: '市场份额',
data: [
['Chrome', 64.8],
['Safari', 19.8],
['Edge', 5.3],
{ name: 'Firefox', y: 4.2, sliced: true, selected: true }, // 突出显示
['其他', 5.9]
]
}]
});
</script>
</body>
</html>- 3D 环形饼图：在
plotOptions.pie中添加innerSize: '50%'即可。
2. 3D 柱状图示例
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
plotOptions: {
column: {
depth: 40, // 单个柱子深度
grouping: false // 多系列时沿 Z 轴排列（可选）
}
}3. 3D 散点图示例
数据点使用 [x, y, z] 格式：
chart: { type: 'scatter' }, // 自动启用 3D
series: [{
data: [
[1, 2, 3],
[4, 5, 6],
{ x: 7, y: 8, z: 9 }
]
}]支持拖拽旋转（draggable）。
4. 其他技巧
- 交互旋转：鼠标拖拽图表可旋转视角。
- 堆叠/分组：3D 柱状图支持 stacking 和 grouping。
- 帧自定义：通过
frame配置底板、侧板、背板。 - 性能：3D 图表渲染较重，避免大数据量。
更多官方演示：
如果你需要特定类型（如 3D 气泡、3D 柱状堆叠）的完整代码，或交互旋转示例，告诉我，我可以提供更详细的配置！
