HISTOGRAM
API_LEVEL
2.0
开始支持,API 兼容性请参考 API_LEVEL。
绘制直方图。
创建 UI 控件
import { createWidget, widget } from '@zos/ui'
const histoGram = createWidget(widget.HISTOGRAM, Param)
类型
Param: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
x | 控件 x 坐标 | 是 | number |
y | 控件 y 坐标 | 是 | number |
w | 控件宽 | 是 | number |
h | 控件高 | 是 | number |
item_width | 柱子宽 | 是 | number |
item_space | 柱子间距 | 是 | number |
item_radius | 柱子圆角 | 是 | number |
item_start_y | 柱子起始 Y 点 相对坐标 不填默认为 0 | 否 | number |
item_max_height | 柱子最大高度 不填默认为控件高 | 否 | number |
item_color | 柱子颜色 | 是 | number |
data_min_value | 柱子最小值 用于计算柱子实际高度 | 是 | number |
data_max_value | 柱子最大值 用于计算柱子实际高度 | 是 | number |
data_array | 柱子数据数组 | 是 | Array<number> |
data_count | 数据长度 | 是 | number |
xline | x 轴配置对象 | 是 | XLine |
xText | x 轴文字配置对象 | 是 | XText |
yline | y 轴配置对象 | 是 | YLine |
yText | y 轴文字配置对象 | 是 | YText |
XLine: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
pading | 分割线基于 x 轴的边距 | 是 | number |
space | 分割线间隔 | 是 | number |
start | 分割线开始的 y 轴坐标 | 是 | number |
end | 分割线结束的 y 轴坐标 end-start 为分割线宽度 | 是 | number |
width | 分割线高度 | 是 | number |
count | 分割线数量 | 是 | number |
color | 分割线颜色 | 是 | number |
YLine: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
pading | 分割线基于 y 轴的边距 | 是 | number |
space | 分割线间隔 | 是 | number |
start | 分割线开始的 x 轴坐标 | 是 | number |
end | 分割线结束的 x 轴坐标 end-start 为分割线宽度 | 是 | number |
width | 分割线高度 | 是 | number |
count | 分割线数量 | 是 | number |
color | 分割线颜色 | 是 | number |
XText: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
x | 文字初始的 x 坐标 | 是 | number |
y | 文字初始的 y 坐标 | 是 | number |
w | 文字宽度 | 是 | number |
h | 文字高度 | 是 | number |
space | 文字间隔 第 n 个文字的 x 坐标 = x +(w + space)* (n - 1) | 是 | number |
color | 文字颜色 | 是 | number |
data_array | 文字数组 | 是 | Array<string> |
count | 数组长度 | 是 | number |
yText: object
属性 | 说明 | 是否必须 | 类型 |
---|---|---|---|
x | 文字初始的 x 坐标 | 是 | number |
y | 文字初始的 y 坐标 | 是 | number |
w | 文字宽度 | 是 | number |
h | 文字高度 | 是 | number |
space | 文字间隔 第 n 个文字的 x 坐标 = y +(h + space)* (n - 1) | 是 | number |
color | 文字颜色 | 是 | number |
data_array | 文字数组 | 是 | Array<string> |
count | 数组长度 | 是 | number |
更新 item 数据
const view = ......;
view.setProperty(prop.UPDATE_DATA, {
data_array: [100, 100, 0, 0, 0, 100],
data_count: 6
})
代码示例
import { createWidget, widget, align } from '@zos/ui'
Page({
build() {
const fillRect = createWidget(widget.FILL_RECT, {
x: 100,
y: 120,
w: 300,
h: 300,
color: 0xffffff
})
const view = createWidget(widget.HISTOGRAM, {
x: 100,
y: 120,
h: 300,
w: 300,
item_width: 20,
item_space: 10,
item_radius: 10,
item_start_y: 50,
item_max_height: 230,
item_color: 0x304ffe,
data_array: [20, 30, 40, 50, 60, 100, 80, 90, 20, 30],
data_count: 10,
data_min_value: 10,
data_max_value: 100,
xline: {
pading: 20,
space: 20,
start: 0,
end: 300,
color: 0x00c853,
width: 1,
count: 15
},
yline: {
pading: 10,
space: 10,
start: 0,
end: 300,
color: 0xff6d00,
width: 1,
count: 30
},
xText: {
x: 12,
y: 270,
w: 20,
h: 50,
space: 10,
align: align.LEFT,
color: 0x000000,
count: 10,
data_array: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
},
yText: {
x: 0,
y: 20,
w: 50,
h: 50,
space: 10,
align: align.LEFT,
color: 0x000000,
count: 6,
data_array: ['a', 'b', 'c', 'd', 'e', 'f']
}
})
}
})