使用 Highcharts 3D图表入门

开始使用 Highcharts 3D 支持

Highcharts 3D 是一个 Highcharts 模块，提供有限的三维支持。它目前允许创建三维柱状图、三维饼图和三维散点图。

加载所需的文件

要使用 Highcharts 3D，首先需要像平常一样加载 Highcharts，然后加载额外的 3D 插件模块：

html 复制代码

<script src="https://code.highcharts.com/highcharts-3d.js"><script>

(This should be included after highcharts.js)

配置图表的三维选项

加载3D模块不会改变已有的图表，除非它们被特别设置为3D，这样你就可以在同一页面上同时拥有3D图表和普通图表。

一般来说，3D图表的配置是在选项的图表部分完成的，而不同图表类型的某些特定设置可以在绘图选项plotOptions 中找到；这里你可以看到完整扩展的3D选项及其对应的值类型：

js 复制代码

chart: {
    ....
    options3d: {
        enabled: 'boolean value',
        alpha: 'numeric value',
        beta: 'numeric value',
        depth: 'numeric value',
        viewDistance: 'numeric value',
        frame: {
            bottom: {
                size: 'numeric value',
                color: 'color value'
            },
            side: {
                size: 'numeric value',
                color: 'color value'
            },
            back: {
                size: 'numeric value',
                color: 'color value'
            }
       }
   },
   ...
}
...
plotOptions: {
    ...
    column: {
        ...
        depth: 'numeric value',
        groupZPadding: 'numeric value',
        ...
    },
    ...
    pie: {
        depth: 'numeric value'
    },
    ...
}

综合

对于所有3D图表，以下选项是最重要的（属于 chart.options3d）：

enabled 这表示图表是否需要三维，将其设置为 true。
depth 图表的总深度，默认为 100。
viewDistance 这定义了观察者与图表的距离。
alpha 和 beta 角度用于控制图表视角的旋转角度。

请注意，设置较低的 viewDistance 可能会导致透视效果扭曲，因为观察点距离图表太近。

在 3D图表选项中chart.options3d ，还可以构建围绕图表的三个面板，称为框架frame ，默认这些面板是不可见的，但它们可以在图表.3D.框架chart.options.3d.frame 中分别进行配置：

js 复制代码

bottom|side|back: {
    size:   The thickness of the pane (defaults to 0)
    color:  The color of the pane (default to transparent)
}

3D Columns 三维柱状图

columns: 类型为 columns柱状图的3D图表会将每个柱子绘制成立方体，从而产生3D效果。默认情况下，这个柱子的深度设置为25。要定义其他深度，您需要进入绘图选项并为柱状图设置一个：

js 复制代码

plotOptions.column.depth: The depth of each individual column.

显示多个柱子

就像普通柱状图一样，Highcharts 的 3D 插件也允许显示一系列图表，并可以使用分组grouping 和堆叠stacking 等技术按需排列。

默认情况下，在Highcharts中是分组grouping 是 true 开启 ，显示柱状图的柱子彼此相邻，在Highcharts 3D中也是一样：柱子会在图表的前排紧挨着。

通过将分组grouping 设置为 false 关闭 ，柱子会按照出现顺序一个接一个地排列在后面。默认行为是柱子之间没有空隙，这可以通过设置分组Z填充groupZPadding参数来调整。

js 复制代码

plotOptions.column.groupZPadding: Spacing between columns on the z-axis.

确保图表的深度足以显示所有的柱子。你至少需要以下深度：柱子数量 ×（柱子深度 + z 方向的填充）。

常规的Highcharts柱状图也支持堆叠柱子，当然在3D图表中也同样适用，方法是将堆叠stacking 设置为true开启，并为每个系列定义一个堆叠编号。

3D Pie 三维饼图

对于 pie chart 饼图总图的深度并不重要，设置框架也没有任何作用（框架与轴线相关联，而饼图没有像其他图表那样的轴线）。设置plotOptions.中的深度属性非常重要。

js 复制代码

plotOptions.pie.depth: Defines the 'thickness' of the pie.

3D Scatter 三维散点图

除了像普通scatter chart 散点图那样的x和y坐标外，3D插件还为每个点添加了一个额外的z坐标，以实现三维空间中的位置。与普通图表类似，这些坐标可以直接传递，也可以使用数组的形式。

js 复制代码

{x: 1, y: 1, z: 1} is the same point as [1,1,1]

3D Area 三维区域图

类型为 area 面积/区域图的 3D 图表与柱状系列类似。它会将每个面积系列绘制成一个 3D 平面。默认情况下，面积系列的深度设置为 25。

显示多个区域

就像在普通的区域图中一样，Highcharts 3D 插件确实允许显示多个区域系列，并可以根据需要使用分组grouping 和堆叠stacking 来排序这些系列。

Make sure the depth of the chart is sufficient to display all your area series. You will need at least the following depth: (number of area series - 1) * (depth of single area series)

在3D图表中，堆叠功能仍然可用，并且以完全相同的方式工作，只需将堆叠stacking 设置为true.