HarmonyOS NEXT應用開發之MpChart圖表實現案例

生活就是这么怪發表於2024-04-17

介紹

MpChart是一個包含各種型別圖表的圖表庫，主要用於業務資料彙總，例如銷售資料走勢圖，股價走勢圖等場景中使用，方便開發者快速實現圖表UI。本示例主要介紹如何使用三方庫MpChart實現柱狀圖UI效果。如堆疊資料型別顯示，Y軸是否顯示，左Y軸位置，右Y軸位置，是否顯示X軸，是否繪製背景色，是否設定MarkerView等。

效果圖預覽

image

使用說明

  1. 點選頁面上控制項即可檢視效果。需要注意的是選項”是否設定MarkerView“勾選後，點選柱狀圖中柱子會有彈窗效果。

實現思路

  1. 透過this.model = new BarChartModel()初始化圖表配置構建類。原始碼參考BarChart.ets。
// 圖表資料初始化
aboutToAppear() {
    // 初始化圖表配置構建類
    this.model = new BarChartModel();
    ...
}
  1. 配置圖表指定樣式，為圖表新增資料選擇的監聽器。原始碼參考BarChart.ets。
// 圖表資料初始化
aboutToAppear() {
    // 為圖表新增資料選擇的監聽器。
    this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
    ...
    // 配置圖表指定樣式：如啟用繪製網格背景。
    this.model.setDrawGridBackground(false);
    ...
}
  1. 透過this.model.setData(this.data)將資料與圖表配置類繫結。原始碼參考BarChart.ets。
// 圖表資料初始化
aboutToAppear() {
    ...
    // 生成單一顏色資料
    this.data = this.getNormalData();
    // 將資料與圖表配置類繫結
    this.model.setData(this.data);
    ...
}
  1. 透過BarChart({ model: this.model })為元件設定配置構建類。原始碼參考BarChart.ets。
build() {
    Column() {
    ...
    // 為元件設定配置構建類。
    BarChart({ model: this.model })
    ...
    }
}

高效能知識點

不涉及

工程結構&模組型別

barchart                                        // har型別
|---src\main\ets\view
|   |---BarChart.ets                            // 檢視層-MpChart柱狀圖頁面

模組依賴

@ohos/routermodule(動態路由)

參考資料

MpChart三方庫

相關文章