<!-- 引入 Highcharts 库 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<!-- 创建图表容器 -->
<div id="chart-container" style="width: 100%; height: 400px;"></div>
<!-- 在 body 标签的底部添加以下 JavaScript 代码 -->
<script>
// 数据
var data = [5, 3, 7, 2, 4];
// 配置 Highcharts 3D 柱形图
Highcharts.chart('chart-container', {
chart: {
type: 'column', // 图表类型为柱形图
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: 'Highcharts 3D 柱形图' // 图表标题
},
xAxis: {
categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'], // x 轴刻度标签
title: {
text: 'Categories' // x 轴标题
}
},
yAxis: {
title: {
text: 'Values' // y 轴标题
}
},
series: [{
name: 'Series 1',
data: data, // 数据系列
depth: 25, // 数据系列的深度
colorByPoint: true // 按点颜色
}]
});
</script>
在上述示例中,通过在 chart 的 options3d 属性中启用 3D 功能,可以创建一个3D柱形图。alpha 和 beta 控制观察者的视角,depth 控制整体的深度,viewDistance 控制观察者距离图表的距离。
Highcharts 3D图提供了更立体的视觉效果,适用于需要突出显示数据在第三维度上关系的场景。
你可以根据需要进一步自定义图表,例如添加更多的数据系列、调整颜色和样式、设置工具提示等。请参考 [Highcharts 官方文档](https://api.highcharts.com/highcharts) 以获取更详细的配置选项和示例。
转载请注明出处:http://www.zyzy.cn/article/detail/5056/Highcharts