介紹 MpChart是一個包含各種類型圖表的圖表庫，主要用於業務數據彙總，例如銷售數據走勢圖，股價走勢圖等場景中使用，方便開發者快速實現圖表UI。本示例主要介紹如何使用三方庫MpChart實現柱狀圖UI效果。如堆疊數據類型顯示，Y軸是否顯示，左Y軸位置，右Y軸位置，是否顯示X軸，是否繪製背景色，是否 ...
介紹
MpChart是一個包含各種類型圖表的圖表庫，主要用於業務數據彙總，例如銷售數據走勢圖，股價走勢圖等場景中使用，方便開發者快速實現圖表UI。本示例主要介紹如何使用三方庫MpChart實現柱狀圖UI效果。如堆疊數據類型顯示，Y軸是否顯示，左Y軸位置，右Y軸位置，是否顯示X軸，是否繪製背景色，是否設置MarkerView等。
效果圖預覽
使用說明
- 點擊頁面上控制項即可查看效果。需要註意的是選項”是否設置MarkerView“勾選後，點擊柱狀圖中柱子會有彈窗效果。
實現思路
- 通過this.model = new BarChartModel()初始化圖表配置構建類。源碼參考BarChart.ets。
// 圖表數據初始化
aboutToAppear() {
// 初始化圖表配置構建類
this.model = new BarChartModel();
...
}
- 配置圖表指定樣式，為圖表添加數據選擇的監聽器。源碼參考BarChart.ets。
// 圖表數據初始化
aboutToAppear() {
// 為圖表添加數據選擇的監聽器。
this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
...
// 配置圖表指定樣式：如啟用繪製網格背景。
this.model.setDrawGridBackground(false);
...
}
- 通過this.model.setData(this.data)將數據與圖表配置類綁定。源碼參考BarChart.ets。
// 圖表數據初始化
aboutToAppear() {
...
// 生成單一顏色數據
this.data = this.getNormalData();
// 將數據與圖表配置類綁定
this.model.setData(this.data);
...
}
- 通過BarChart({ model: this.model })為組件設置配置構建類。源碼參考BarChart.ets。
build() {
Column() {
...
// 為組件設置配置構建類。
BarChart({ model: this.model })
...
}
}
高性能知識點
不涉及
工程結構&模塊類型
barchart // har類型
|---src\main\ets\view
| |---BarChart.ets // 視圖層-MpChart柱狀圖頁面
