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

##鸿蒙核心技术##运动开发##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')
}