HISTOGRAM
Start from API_LEVEL
2.0
. Please refer to API_LEVEL.
Draws a histogram.
Create UI widget
import { createWidget, widget } from '@zos/ui'
const histoGram = createWidget(widget.HISTOGRAM, Param)
Type
Param: object
Properties | Description | Required | Type |
---|---|---|---|
x | The x-coordinate of widget. | YES | number |
y | The y-coordinate of widget. | YES | number |
w | The width of widget. | YES | number |
h | The height of the widget. | YES | number |
item_width | Width of column. | YES | number |
item_space | Space of column. | YES | number |
item_radius | Radius of column. | YES | number |
item_start_y | The starting Y point of the column, relative coordinate, default is 0 if not filled. | NO | number |
item_max_height | Maximum height of column.If unfilled,default is widget height. | NO | number |
item_color | Color of column. | YES | number |
data_min_value | Minimum value of the column.Used to calculate the actual height of the column. | YES | number |
data_max_value | Maximum value of the column.Used to calculate the actual height of the column. | YES | number |
data_array | Data array of columns. | YES | Array<number> |
data_count | Length of data. | YES | number |
xline | Configuration objects for the x-axis. | YES | XLine |
xText | Configuration object for x-axis text. | YES | XText |
yline | Configuration objects for the y-axis. | YES | YLine |
yText | Configuration object for y-axis text. | YES | YText |
XLine: object
Properties | Description | Required | Type |
---|---|---|---|
pading | Margin of dividing line based on x-axis. | YES | number |
space | The interval of the dividing line. | YES | number |
start | The y-axis coordinates of the start of the divider. | YES | number |
end | The y-axis coordinate of the end of the divider end-start is the width of the divider. | YES | number |
width | The width of the line. | YES | number |
count | The number of dividers. | YES | number |
color | The color of the dividing line. | YES | number |
YLine: object
Properties | Description | Required | Type |
---|---|---|---|
pading | Margin of dividing line based on y-axis. | YES | number |
space | The interval of the dividing line. | YES | number |
start | The x-axis coordinates of the start of the divider. | YES | number |
end | The x-axis coordinate of the end of the divider end-start is the width of the divider. | YES | number |
width | The width of the line. | YES | number |
count | The number of dividers. | YES | number |
color | The color of the dividing line. | YES | number |
XText: object
Properties | Description | Required | Type |
---|---|---|---|
x | The initial x-coordinate of the text. | YES | number |
y | The initial y-coordinate of the text. | YES | number |
w | The width of the text. | YES | number |
h | The height of the text. | YES | number |
space | The spacing of the text.The x-coordinate of the nth text = x + (w + space)*(n - 1). | YES | number |
color | The color of the text | YES | number |
data_array | The array of text. | YES | Array<string> |
count | The length of the array. | YES | number |
yText: object
Properties | Description | Required | Type |
---|---|---|---|
x | The initial x-coordinate of the text. | YES | number |
y | The initial y-coordinate of the text. | YES | number |
w | The width of the text. | YES | number |
h | The height of the text. | YES | number |
space | The spacing of the text.The x-coordinate of the nth text = y + (h + space)*(n - 1). | YES | number |
color | The color of the text | YES | number |
data_array | The array of text. | YES | Array<string> |
count | The length of the array. | YES | number |
Update item data
const view = ......;
view.setProperty(prop.UPDATE_DATA, {
data_array: [100, 100, 0, 0, 0, 100],
data_count: 6
})
Code example
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']
}
})
}
})