HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit（传感器服务）#

前言

在运动类应用中，运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据，如配速、距离、卡路里消耗等，用户可以更清晰地了解自己的运动表现，从而更好地调整运动计划。本文将结合鸿蒙（HarmonyOS）开发实战经验，如何使用 mpchart 绘制运动配速图表，让运动数据的展示更加生动有趣。

一、为什么选择 mpchart

mpchart 是一个功能强大的图表库，支持多种类型的图表，如折线图、柱状图、饼图等。它具有以下特点：

• 丰富的图表类型：提供了多种图表类型，满足不同场景下的数据可视化需求。

• 高度可定制：可以通过丰富的 API 自定义图表的样式、颜色、标签等。

• 性能优化：在绘制大量数据时，mpchart 能够保持良好的性能，确保应用流畅运行。

• 跨平台支持：支持多种平台，包括 Android、iOS 和 HarmonyOS，方便开发者在不同平台上实现一致的图表展示效果。

二、初始化配置

在使用 mpchart 绘制运动配速图表之前，我们需要进行一些初始化配置。以下是初始化配置的代码：

typescript 复制代码

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 lines
    legend.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：生成图表数据，绑定到图表配置类中。

三、数据填充

在初始化配置完成后，我们需要填充数据到图表中。以下是数据填充的代码：

typescript 复制代码

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。

四、样式展示

在数据填充完成后，我们需要将图表展示到页面上。以下是样式展示的代码：

typescript 复制代码

@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，我们可以轻松实现运动配速图表的绘制。