Component Chart mapping lvgl lv_chart)
- style
- moveToFront
- moveToBackground
- setStyle
- scrollIntoView
- type, controll display types, with following values
- none, line, bar, scatter
- divLineCount, controll the number of horizontal and vertical division lines
- type Array[horizontalDiv, verticalDiv]
- pointNum, controll the number of points in the series
- type Number
- leftAxisOption, controll left axis ticks and labels, with following property
- majorLen
- minorLen
- majorNum
- minorNum
- drawSize
- rightAxisOption, controll right axis ticks and labels, with following property
- majorLen
- minorLen
- majorNum
- minorNum
- drawSize
- topAxisOption, controll top axis ticks and labels, with following property
- majorLen
- minorLen
- majorNum
- minorNum
- drawSize
- bottomAxisOption, controll bottom axis ticks and labels, with following property
- majorLen
- minorLen
- majorNum
- minorNum
- drawSize
- leftAxisData, add left series to the charts
- type {color: string; data: number[]}[]
- bottomAxisData
- type {color: string; data: number[]}[]
- rightAxisData
- type {color: string; data: number[]}[]
- topAxisData
- type {color: string; data: number[]}[]
- scatterData, set data when type is scatter
- type {color: string; data: [number, number][]}[]
- leftAxisLabels, rightAxisLabels, topAxisLabels, bottomAxisLabels, add axis labels
- type string[]
- leftAxisRange, rightAxisRange, topAxisRange, bottomAxisRange, set axis range
- type [number, number]
- style
- onPressedStyle
- indicatorStyle
- itemStyle
- onClick
- onPressed
- onLongPressed
- onLongPressRepeat
- align
- alignTo
import { Button, Text, Image } from 'lvlgjs-ui'
import { useRef, useState } from 'react'
function App () {
return (
<Chart
style={style.chart}
type={"bar"}
pointNum={12}
leftAxisRange={[0, 100]}
rightAxisRange={[0, 400]}
bottomAxisLabels={[
'Jan',
'Febr',
'March',
'Apr',
'May',
'Jun',
'July',
'Aug',
'Sept',
'Oct',
'Nov',
'Dec'
]}
leftAxisOption={{
majorLen: 10,
minorLen: 5,
majorNum: 6,
minorNum: 2,
drawSize: 50
}}
bottomAxisOption={{
majorLen: 10,
minorLen: 5,
majorNum: 12,
minorNum: 3,
drawSize: 40
}}
rightAxisOption={{
majorLen: 10,
minorLen: 5,
majorNum: 3,
minorNum: 4,
drawSize: 50
}}
leftAxisData={[
{
color: '#00FA9A',
data: [
31,
66,
10,
89,
63,
56,
32,
35,
57,
85,
22,
58
]
},
]}
rightAxisData={[
{
color: '#008080',
data: [
92,
71,
61,
15,
21,
35,
35,
58,
31,
53,
33,
73
]
}
]}
align={{
type: EAlignType.ALIGN_CENTER,
}}
/>
)
};
const style = {
chart: {
'width': 200,
'height': 150,
'transform': 'scaleX(3)'
}
};
const style = {
onPressedStyle: {},
button: {},
}
test/button