鴻蒙核心技術(shù)##運動開發(fā)##Sensor Service Kit（傳感器服務(wù)）#

前言

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

截屏2025-06-06 17.18.24.png

一、為什么選擇 mpchart

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

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

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

? 性能優(yōu)化：在繪制大量數(shù)據(jù)時，mpchart 能夠保持良好的性能，確保應(yīng)用流暢運行。

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

二、初始化配置

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

import { LineChartModel, Description, Legend, LimitLine, LineData, LineDataSet, EntryOhos, JArrayList, ChartColorStop, ILineDataSet, XAxisPosition, YAxisLabelPosition, LegendForm, LimitLabelPosition, Mode } from '@ohos/mpchart';

aboutToAppear(): void {
  // Step1:必須：初始化圖表配置構(gòu)建類
  this.model = new LineChartModel();

  // Step2:配置圖表指定樣式，各部件間沒有先后之分

  // 為圖表添加數(shù)據(jù)選擇的監(jiān)聽器
  // this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
  // 獲取圖表描述部件，設(shè)置圖表描述部件不可用，即圖表不進行繪制描述部件
  let description: Description | null = this.model.getDescription()
  if (description) {
    description.setEnabled(false);
  }

  // 獲取圖表圖例部件，設(shè)置圖表圖例形狀為線形
  let legend: Legend | null = this.model.getLegend();
  if (legend) {
    legend.setEnabled(false);
    // draw legend entries as lines
    legend.setForm(LegendForm.LINE);
  }

  // 為左Y軸設(shè)置LimitLine,可設(shè)置限制線的寬度，線段樣式，限制標(biāo)簽的位置，標(biāo)簽字體大小等
  let limitLine1 = new LimitLine(120, 'Upper Limit');
  limitLine1.setLineWidth(0);
  //設(shè)置虛線樣式
  limitLine1.enableDashedLine(10, 10, 0);
  //設(shè)置標(biāo)簽位置
  limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
  limitLine1.setTextSize(10);

  // 設(shè)置圖表左Y軸信息
  let leftAxis = this.model.getAxisLeft();
  if (leftAxis) {
    leftAxis.setAxisLineWidth(0)
    //設(shè)置繪制標(biāo)簽個數(shù)
    leftAxis.setLabelCount(6, false);
    //設(shè)置標(biāo)簽位置
    leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART)
    //設(shè)置自定義標(biāo)簽格式化
    leftAxis.setValueFormatter(new MyIAxisValueFormatter())
  }

  // 設(shè)置圖表右Y軸信息
  let rightAxis = this.model.getAxisRight();
  if (rightAxis) {
    rightAxis.setEnabled(false);
  }

  // 設(shè)置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())
  }

  // 生成圖表數(shù)據(jù)
  let lineData: LineData = this.getLineData();
  // 將數(shù)據(jù)與圖表配置類綁定
  this.model.setData(lineData);
}

核心點解析

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

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

? LimitLine：為 Y 軸設(shè)置限制線，可以設(shè)置線的寬度、樣式、標(biāo)簽位置等。

? XAxis和YAxis：分別設(shè)置 X 軸和 Y 軸的樣式，包括標(biāo)簽位置、標(biāo)簽格式化等。

? LineData：生成圖表數(shù)據(jù)，綁定到圖表配置類中。

三、數(shù)據(jù)填充

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

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; // 當(dāng)前速度
    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); // 不繪制數(shù)據(jù)點圓圈
  dataSet.setDrawCircleHole(false); // 不繪制內(nèi)部孔
  dataSet.setColorByColor(0xFFFE9543); // 設(shè)置折線顏色

  // 漸變色填充
  let gradientFillColor = new JArrayList<ChartColorStop>();
  gradientFillColor.add(["#99FE9543", 0]);
  gradientFillColor.add(["#00FE9543", 1]);
  dataSet.setGradientFillColor(gradientFillColor);
  dataSet.setDrawFilled(true);

  // 設(shè)置數(shù)據(jù)點的顏色
  dataSet.setCircleColor(Color.Blue); // 設(shè)置為你想要的顏色

  // 設(shè)置數(shù)據(jù)點的半徑
  dataSet.setCircleRadius(4); // 設(shè)置半徑大小
  dataSet.setCircleHoleRadius(2); // 設(shè)置內(nèi)徑

  let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
  dataSetList.add(dataSet);

  let lineData: LineData = new LineData(dataSetList);
  return lineData;
}

核心點解析

? EntryOhos：表示圖表中的一個數(shù)據(jù)點，包含 X 和 Y 坐標(biāo)。

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

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

四、樣式展示

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

@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：用于展示文本信息，如標(biāo)題、數(shù)據(jù)標(biāo)簽等。

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

五、總結(jié)

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