介紹
MpChart是一個(gè)包含各種類型圖表的圖表庫哑子，主要用于業(yè)務(wù)數(shù)據(jù)匯總，例如銷售數(shù)據(jù)走勢(shì)圖饺律，股價(jià)走勢(shì)圖等場(chǎng)景中使用声滥，方便開發(fā)者快速實(shí)現(xiàn)圖表UI。本示例主要介紹如何使用三方庫MpChart實(shí)現(xiàn)柱狀圖UI效果空繁。如堆疊數(shù)據(jù)類型顯示，Y軸是否顯示朱庆，左Y軸位置盛泡，右Y軸位置，是否顯示X軸娱颊，是否繪制背景色傲诵，是否設(shè)置MarkerView等。
效果圖預(yù)覽
使用說明
- 點(diǎn)擊頁面上控制項(xiàng)即可查看效果箱硕。需要注意的是選項(xiàng)”是否設(shè)置MarkerView“勾選后掰吕，點(diǎn)擊柱狀圖中柱子會(huì)有彈窗效果。
實(shí)現(xiàn)思路
- 通過this.model = new BarChartModel()初始化圖表配置構(gòu)建類颅痊。源碼參考BarChart.ets殖熟。
// 圖表數(shù)據(jù)初始化
aboutToAppear() {
// 初始化圖表配置構(gòu)建類
this.model = new BarChartModel();
...
}
- 配置圖表指定樣式，為圖表添加數(shù)據(jù)選擇的監(jiān)聽器斑响。源碼參考BarChart.ets菱属。
// 圖表數(shù)據(jù)初始化
aboutToAppear() {
// 為圖表添加數(shù)據(jù)選擇的監(jiān)聽器。
this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
...
// 配置圖表指定樣式：如啟用繪制網(wǎng)格背景舰罚。
this.model.setDrawGridBackground(false);
...
}
- 通過this.model.setData(this.data)將數(shù)據(jù)與圖表配置類綁定纽门。源碼參考BarChart.ets。
// 圖表數(shù)據(jù)初始化
aboutToAppear() {
...
// 生成單一顏色數(shù)據(jù)
this.data = this.getNormalData();
// 將數(shù)據(jù)與圖表配置類綁定
this.model.setData(this.data);
...
}
- 通過BarChart({ model: this.model })為組件設(shè)置配置構(gòu)建類营罢。源碼參考BarChart.ets赏陵。
build() {
Column() {
...
// 為組件設(shè)置配置構(gòu)建類。
BarChart({ model: this.model })
...
}
}
高性能知識(shí)點(diǎn)
不涉及
工程結(jié)構(gòu)&模塊類型
barchart // har類型
|---src\main\ets\view
| |---BarChart.ets // 視圖層-MpChart柱狀圖頁面
模塊依賴
@ohos/routermodule(動(dòng)態(tài)路由)
