##鴻蒙核心技術##運動開發##Sensor Service Kit（傳感器服務）#

前言

在運動類應用中，運動數據的可視化是提升用戶體驗的重要環節。通過直觀的圖表展示運動過程中的關鍵數據，如配速、距離、卡路里消耗等，用戶可以更清晰地了解自己的運動表現，從而更好地調整運動計劃。本文將結合鴻蒙（HarmonyOS）開發實戰經驗，如何使用 mpchart 繪制運動配速圖表，讓運動數據的展示更加生動有趣。

一、為什么選擇 mpchart

mpchart 是一個功能強大的圖表庫，支持多種類型的圖表，如折線圖、柱狀圖、餅圖等。它具有以下特點：

? 豐富的圖表類型：提供了多種圖表類型，滿足不同場景下的數據可視化需求。

? 高度可定制：可以通過豐富的 API 自定義圖表的樣式、顏色、標簽等。

? 性能優化：在繪制大量數據時，mpchart 能夠保持良好的性能，確保應用流暢運行。

? 跨平臺支持：支持多種平臺，包括 Android、iOS 和 HarmonyOS，方便開發者在不同平臺上實現一致的圖表展示效果。

二、初始化配置

在使用 mpchart 繪制運動配速圖表之前，我們需要進行一些初始化配置。以下是初始化配置的代碼：

import { LineChartModel, Description, Legend, LimitLine, LineData, LineDataSet, EntryOhos, JArrayList, ChartColorStop, ILineDataSet, XAxisPosition, YAxisLabelPosition, LegendForm, LimitLabelPosition, Mode } from '@ohos/mpchart';aboutToAppear(): void {// Step1:必須：初始化圖表配置構建類this.model = new LineChartModel();// Step2:配置圖表指定樣式，各部件間沒有先后之分// 為圖表添加數據選擇的監聽器// this.model.setOnChartValueSelectedListener(this.valueSelectedListener);// 獲取圖表描述部件，設置圖表描述部件不可用，即圖表不進行繪制描述部件let description: Description | null = this.model.getDescription()if (description) {description.setEnabled(false);}// 獲取圖表圖例部件，設置圖表圖例形狀為線形let legend: Legend | null = this.model.getLegend();if (legend) {legend.setEnabled(false);// draw legend entries as lineslegend.setForm(LegendForm.LINE);}// 為左Y軸設置LimitLine,可設置限制線的寬度，線段樣式，限制標簽的位置，標簽字體大小等let limitLine1 = new LimitLine(120, 'Upper Limit');limitLine1.setLineWidth(0);//設置虛線樣式limitLine1.enableDashedLine(10, 10, 0);//設置標簽位置limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);limitLine1.setTextSize(10);// 設置圖表左Y軸信息let leftAxis = this.model.getAxisLeft();if (leftAxis) {leftAxis.setAxisLineWidth(0)//設置繪制標簽個數leftAxis.setLabelCount(6, false);//設置標簽位置leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART)//設置自定義標簽格式化leftAxis.setValueFormatter(new MyIAxisValueFormatter())}// 設置圖表右Y軸信息let rightAxis = this.model.getAxisRight();if (rightAxis) {rightAxis.setEnabled(false);}// 設置X軸信息let xAxis = this.model.getXAxis();if (xAxis) {xAxis.setPosition(XAxisPosition.BOTTOM);xAxis.setDrawGridLines(false);xAxis.setGranularity(1);xAxis.setLabelCount(5);xAxis.setValueFormatter(new MyXIAxisValueFormatter())}// 生成圖表數據let lineData: LineData = this.getLineData();// 將數據與圖表配置類綁定this.model.setData(lineData);
}

核心點解析

? Description：設置圖表描述部件，可以啟用或禁用描述部件。

? Legend：設置圖表圖例部件，可以自定義圖例的形狀和樣式。

? LimitLine：為 Y 軸設置限制線，可以設置線的寬度、樣式、標簽位置等。

? XAxis和YAxis：分別設置 X 軸和 Y 軸的樣式，包括標簽位置、標簽格式化等。

? LineData：生成圖表數據，綁定到圖表配置類中。

三、數據填充

在初始化配置完成后，我們需要填充數據到圖表中。以下是數據填充的代碼：

private getLineData(): LineData {let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();for (let i = 0; i < this.record!.points.length; i++) {let point = this.record!.points[i];let speed = point.speed; // 當前速度let time = point.netDuration; // 時間values.add(new EntryOhos(time, speed));}let dataSet = new LineDataSet(values, '配速');dataSet.setHighlightEnabled(false);dataSet.setDrawIcons(false);dataSet.setMode(Mode.LINEAR); // 直線模式dataSet.setDrawCircles(false); // 不繪制數據點圓圈dataSet.setDrawCircleHole(false); // 不繪制內部孔dataSet.setColorByColor(0xFFFE9543); // 設置折線顏色// 漸變色填充let gradientFillColor = new JArrayList<ChartColorStop>();gradientFillColor.add(["#99FE9543", 0]);gradientFillColor.add(["#00FE9543", 1]);dataSet.setGradientFillColor(gradientFillColor);dataSet.setDrawFilled(true);// 設置數據點的顏色dataSet.setCircleColor(Color.Blue); // 設置為你想要的顏色// 設置數據點的半徑dataSet.setCircleRadius(4); // 設置半徑大小dataSet.setCircleHoleRadius(2); // 設置內徑let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();dataSetList.add(dataSet);let lineData: LineData = new LineData(dataSetList);return lineData;
}

核心點解析

? EntryOhos：表示圖表中的一個數據點，包含 X 和 Y 坐標。

? LineDataSet：表示一組數據點，可以設置數據點的樣式、顏色、漸變色填充等。

? LineData：表示圖表的數據集合，可以包含多個LineDataSet。

四、樣式展示

在數據填充完成后，我們需要將圖表展示到頁面上。以下是樣式展示的代碼：

@Builder
DataAnalysisBuilder() {Column() {Text('配速變化趨勢').fontSize(16).fontWeight(FontWeight.Medium).margin({ top: 16, bottom: 8 }).width('100%').textAlign(TextAlign.Start).padding({ left: 16 })Row() {Column() {Text('最快').fontSize(12).fontColor('#666')Text(RunUtil.secondsToPace(Math.min(...this.record!.points.map(p => p.pace)))).fontSize(20).fontColor('#333').margin({ top: 4 })}.layoutWeight(1)Column() {Text('平均').fontSize(12).fontColor('#666')Text(RunUtil.secondsToPace(this.record!.avgPace)).fontSize(20).fontColor('#333').margin({ top: 4 })}.layoutWeight(1)}.width('100%').padding(16)LineChart({ model: this.model }).width('100%').height(240).backgroundColor(Color.White).margin({ top: 8 })}.width('100%').backgroundColor('#F5F5F5')
}

核心點解析

? LineChart：表示圖表組件，通過綁定model屬性展示圖表。

? Text：用于展示文本信息，如標題、數據標簽等。

? Row和Column：用于布局，分別表示水平和垂直布局。

五、總結

通過 mpchart，我們可以輕松實現運動配速圖表的繪制。