# 金字塔图

使用PyramidChart可创建三维金字塔图，由 @tx3d/extension 包提供。

import { PyramidChart, ChartCrossSectionType } from '@tx3d/extension';

const pyramidChart = new PyramidChart( engine, {

    name: '3D金字塔',
    type: ChartCrossSectionType.Square, 
    firstSize: 50.0,
    height: 0,
    space: 0.0,
    position: [ 0, 0, 0 ],
    heightByDate: false,
    edge: { 

        color: '#66ffff',
        opacity: 1.0,
        width: 1.50

    },

    material:{

        opacity: 1.0,
        roughness: 0.0,
        metalness: 0.0,
        clearcoat: 1.0,
        clearcoatRoughness: 0,

    },
    data:  [
        { name: "Ⅰ级数据", value: 582, color: { startColor: '#cc00ff', endColor: '#cc99ff' } },
        { name: "Ⅱ级数据", value: 1032, color: { startColor: '#00ff00', endColor: '#ffff00' } },
        { name: "Ⅲ级数据", value: 1688, color: { startColor: '#6600ff', endColor: '#66ccff' } },
        { name: "Ⅳ级数据", value: 288, color: { startColor: '#00ffff', endColor: '#99ffcc' } },
        { name: "Ⅴ级数据", value: 763, color: { startColor: '#0066ff', endColor: '#00ccff' } },
    ], 

    onCompleted:(chart)=>  {}

} );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

提示

PyramidChart对象初始化参数，详见PyramidChartParameters。

# 属性

🌏 guid 3D金字塔数据模型图表GUID，只读

// 获取GUID
const guid = pyramidChart.guid;

1
2

🌏 name 3D金字塔数据模型图表的名称，只读

// 获取Name
const name = pyramidChart.name;

1
2

🌏 rootEntity 3D金字塔数据模型图表根节点，只读

// 获取根节点
const rootEntity = pyramidChart.rootEntity;

1
2

🌏 childrenEntites 获取所有子实体，只读

// 获取所有子实体
const entities = pyramidChart.childrenEntites;

1
2

🌏 occluded 是否可被遮挡

// 获取可被遮挡
const occluded = pyramidChart.occluded;

// 设置不可遮挡
pyramidChart.occluded = false;

1
2
3
4
5

🌏 edgeOpacity 边框透明度，只写

// 设置边框透明度
pyramidChart.edgeOpacity = 1.0;

1
2

注意

opacity取值应在[ 0.0 ~ 1.0 ]区间

🌏 edgeColor 边框颜色，只写

// 设置边框颜色
pyramidChart.edgeColor = '#ffff00';

1
2

🌏 edgeVisible 边框是否显示，只写

// 设置边框显示
pyramidChart.edgeVisible = true;

1
2

🌏 edgeWidth 边框宽度，只写

// 设置边框宽度
pyramidChart.edgeWidth = 2.0;

1
2

🌏 heights 数据对应的高度，只读

// 获取各数据对应的高度值
const heights = pyramidChart.heights;

1
2

# 接口

🌏 update 3D金字塔数据模型图表批量属性更新接口

pyramidChart.update( { 

    // 更新数据属性
    data:  [

        { name: "Ⅰ级数据", value: 100, color: { startColor: '#ffff22', endColor: '#0000ff' } },
        { name: "Ⅱ级数据", value: 200, color: { startColor: '#ff00ff', endColor: '#770077' }  },
        { name: "Ⅲ级数据", value: 300, color: { startColor: '#00ff00', endColor: '#007700' }  },
        { name: "Ⅳ级数据", value: 400, color: { startColor: '#ffff00', endColor: '#777700' }  },
        { name: "Ⅴ级数据", value: 500, color: { startColor: '#00ffff', endColor: '#007777' }  },

    ]

} );

1
2
3
4
5
6
7
8
9
10
11
12
13
14

注意

update接口适用于更新当前数据, 更新参数中的data参数，数量长度最大不应超过初始数据data的长度。
若更新参数data长度大于初始data长度，即更新从零到初始data长度的数据，超出数据不做处理。
理论上允许更新参数data长度小于初始参数data长度，即更新索引从0到最新data.length - 1对应的数据子金字塔对象，超出最新data长度的子金字塔对象不予更新。
如果新数据数量和初始数据数量不一致（多指最新数据data长度大于初始数据data长度），建议使用新数据重建图表

提示

PyramidChart更新接口参数，同PyramidChartParameters

← 饼状图简介 →