# 柱状图
使用BarChart可创建三维柱状图，由 @tx3d/extension 包提供。
import { BarChart, ChartCrossSectionType } from '@tx3d/extension';
const barChart = new BarChart( engine, {
name: '3D柱状图',
shape: ChartCrossSectionType.Square,
size: 16,
heightRatio: 0,
angle: 0.0,
space: 15,
position: [ 0, 0, 0 ],
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' } },
{ name: "菠萝", value: 401, color: { startColor: '#ff00ff', endColor: '#ffccff' } },
{ name: "樱桃", value: 1122, color: { startColor: '#ffff00', endColor: '#ffffcc' }},
],
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
40
41
42
43
44
45
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
40
41
42
43
44
45
提示
BarChart对象初始化参数，详见BarChartParameters。
# 属性
🌏 guid 3D柱状图表GUID，只读
// 获取GUID
const guid = barChart.guid;
1
2
2
🌏 name 3D柱状图表的名称，只读
// 获取Name
const name = barChart.name;
1
2
2
🌏 rootEntity 3D柱状图表根节点，只读
// 获取根节点
const rootEntity = barChart.rootEntity;
1
2
2
🌏 childrenEntites 获取所有子实体，只读
// 获取所有子实体
const entities = barChart.childrenEntites;
1
2
2
🌏 occluded 是否可被遮挡
// 获取可被遮挡
const occluded = barChart.occluded;
// 设置不可遮挡
barChart.occluded = false;
1
2
3
4
5
2
3
4
5
🌏 edgeOpacity 边框透明度，只写
// 设置边框透明度
barChart.edgeOpacity = 1.0;
1
2
2
注意
opacity取值应在[ 0.0 ~ 1.0 ]区间
🌏 edgeColor 边框颜色，只写
// 设置边框颜色
barChart.edgeColor = '#ffff00';
1
2
2
🌏 edgeVisible 边框是否显示，只写
// 设置边框显示
barChart.edgeVisible = true;
1
2
2
🌏 edgeWidth 边框宽度，只写
// 设置边框宽度
barChart.edgeWidth = 2.0;
1
2
2
🌏 heights 获取数据对应高度，只读
// 获取数据对应高度
const heights = barChart.heights;
1
2
2
# 接口
🌏 update 3D柱状图表批量属性更新接口
barChart.update( {
// 更新数据属性
data: [
{ name: "苹果", value: 100, color: { startColor: '#ffff22', endColor: '#0000ff' } },
{ name: "橘子", value: 200, color: { startColor: '#770077', endColor: '#ff00ff' } },
{ name: "香蕉", value: 300, color: { startColor: '#007700', endColor: '#00ff00' } },
{ name: "榴莲", value: 400, color: { startColor: '#777700', endColor: '#ffff00' } },
{ name: "葡萄", value: 500, color: { startColor: '#007777', endColor: '#00ffff' } },
{ name: "菠萝", value: 600, color: { startColor: '#000077', endColor: '#0000ff' } },
{ name: "樱桃", value: 700, color: { startColor: '#606060', endColor: '#f0f0f0' } },
],
heightRatio: 0.05,
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
注意
- update接口适用于更新当前数据, 更新参数中的data参数，数量长度最大不应超过初始数据data的长度。
- 若更新参数data长度大于初始data长度，即更新从零到初始data长度的数据，超出数据不做处理。
- 理论上允许更新参数data长度小于初始参数data长度，即更新索引从0到最新data.length - 1对应的数据柱，超出最新data长度的柱子不予更新。
- 如果新数据数量和初始数据数量不一致（多指最新数据data长度大于初始数据data长度），建议使用新数据重建图表
提示
BarChart更新接口参数，同BarChartParameters