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

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

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

一、为什么选择 mpchart
mpchart 是一个功能强大的图表库，支持多种类型的图表，如折线图、柱状图、饼图等。它具有以下特点：
• 丰富的图表类型：提供了多种图表类型，满足不同场景下的数据可视化需求。
• 高度可定制：可以通过丰富的 API 自定义图表的样式、颜色、标签等。
• 性能优化：在绘制大量数据时，mpchart 能够保持良好的性能，确保应用流畅运行。
• 跨平台支持：支持多种平台，包括 Android、iOS 和 HarmonyOS，方便开发者在不同平台上实现一致的图表展示效果。
二、初始化配置
在使用 mpchart 绘制运动配速图表之前，我们需要进行一些初始化配置。以下是初始化配置的代码：

1. import { LineChartModel, Description, Legend, LimitLine, LineData, LineDataSet, EntryOhos, JArrayList, ChartColorStop, ILineDataSet, XAxisPosition, YAxisLabelPosition, LegendForm, LimitLabelPosition, Mode } from '@ohos/mpchart';
3. aboutToAppear(): void {
4.   // Step1:必须：初始化图表配置构建类
5.   this.model = new LineChartModel();
7.   // Step2:配置图表指定样式，各部件间没有先后之分
9.   // 为图表添加数据选择的监听器
10.   // this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
11.   // 获取图表描述部件，设置图表描述部件不可用，即图表不进行绘制描述部件
12.   let description: Description | null = this.model.getDescription()
13.   if (description) {
14.     description.setEnabled(false);
15.   }
17.   // 获取图表图例部件，设置图表图例形状为线形
18.   let legend: Legend | null = this.model.getLegend();
19.   if (legend) {
20.     legend.setEnabled(false);
21.     // draw legend entries as lines
22.     legend.setForm(LegendForm.LINE);
23.   }
25.   // 为左Y轴设置LimitLine,可设置限制线的宽度，线段样式，限制标签的位置，标签字体大小等
26.   let limitLine1 = new LimitLine(120, 'Upper Limit');
27.   limitLine1.setLineWidth(0);
28.   //设置虚线样式
29.   limitLine1.enableDashedLine(10, 10, 0);
30.   //设置标签位置
31.   limitLine1.setLabelPosition(LimitLabelPosition.RIGHT_TOP);
32.   limitLine1.setTextSize(10);
34.   // 设置图表左Y轴信息
35.   let leftAxis = this.model.getAxisLeft();
36.   if (leftAxis) {
37.     leftAxis.setAxisLineWidth(0)
38.     //设置绘制标签个数
39.     leftAxis.setLabelCount(6, false);
40.     //设置标签位置
41.     leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART)
42.     //设置自定义标签格式化
43.     leftAxis.setValueFormatter(new MyIAxisValueFormatter())
44.   }
46.   // 设置图表右Y轴信息
47.   let rightAxis = this.model.getAxisRight();
48.   if (rightAxis) {
49.     rightAxis.setEnabled(false);
50.   }
52.   // 设置X轴信息
53.   let xAxis = this.model.getXAxis();
54.   if (xAxis) {
55.     xAxis.setPosition(XAxisPosition.BOTTOM);
56.     xAxis.setDrawGridLines(false);
57.     xAxis.setGranularity(1);
58.     xAxis.setLabelCount(5);
59.     xAxis.setValueFormatter(new MyXIAxisValueFormatter())
60.   }
62.   // 生成图表数据
63.   let lineData: LineData = this.getLineData();
64.   // 将数据与图表配置类绑定
65.   this.model.setData(lineData);
66. }

复制代码

核心点解析
• Description：设置图表描述部件，可以启用或禁用描述部件。
• Legend：设置图表图例部件，可以自定义图例的形状和样式。
• LimitLine：为 Y 轴设置限制线，可以设置线的宽度、样式、标签位置等。
• XAxis和YAxis：分别设置 X 轴和 Y 轴的样式，包括标签位置、标签格式化等。
• LineData：生成图表数据，绑定到图表配置类中。
三、数据填充
在初始化配置完成后，我们需要填充数据到图表中。以下是数据填充的代码：

1. private getLineData(): LineData {
2.   let values: JArrayList<EntryOhos> = new JArrayList<EntryOhos>();
3.   for (let i = 0; i < this.record!.points.length; i++) {
4.     let point = this.record!.points[i];
5.     let speed = point.speed; // 当前速度
6.     let time = point.netDuration; // 时间
7.     values.add(new EntryOhos(time, speed));
8.   }
10.   let dataSet = new LineDataSet(values, '配速');
11.   dataSet.setHighlightEnabled(false);
12.   dataSet.setDrawIcons(false);
14.   dataSet.setMode(Mode.LINEAR); // 直线模式
15.   dataSet.setDrawCircles(false); // 不绘制数据点圆圈
16.   dataSet.setDrawCircleHole(false); // 不绘制内部孔
17.   dataSet.setColorByColor(0xFFFE9543); // 设置折线颜色
19.   // 渐变色填充
20.   let gradientFillColor = new JArrayList<ChartColorStop>();
21.   gradientFillColor.add(["#99FE9543", 0]);
22.   gradientFillColor.add(["#00FE9543", 1]);
23.   dataSet.setGradientFillColor(gradientFillColor);
24.   dataSet.setDrawFilled(true);
26.   // 设置数据点的颜色
27.   dataSet.setCircleColor(Color.Blue); // 设置为你想要的颜色
29.   // 设置数据点的半径
30.   dataSet.setCircleRadius(4); // 设置半径大小
31.   dataSet.setCircleHoleRadius(2); // 设置内径
33.   let dataSetList: JArrayList<ILineDataSet> = new JArrayList<ILineDataSet>();
34.   dataSetList.add(dataSet);
36.   let lineData: LineData = new LineData(dataSetList);
37.   return lineData;
38. }

复制代码

核心点解析
• EntryOhos：表示图表中的一个数据点，包含 X 和 Y 坐标。
• LineDataSet：表示一组数据点，可以设置数据点的样式、颜色、渐变色填充等。
• LineData：表示图表的数据集合，可以包含多个LineDataSet。
四、样式展示
在数据填充完成后，我们需要将图表展示到页面上。以下是样式展示的代码：

1. @Builder
2. DataAnalysisBuilder() {
3.   Column() {
4.     Text('配速变化趋势')
5.       .fontSize(16)
6.       .fontWeight(FontWeight.Medium)
7.       .margin({ top: 16, bottom: 8 })
8.       .width('100%')
9.       .textAlign(TextAlign.Start)
10.       .padding({ left: 16 })
12.     Row() {
13.       Column() {
14.         Text('最快')
15.           .fontSize(12)
16.           .fontColor('#666')
17.         Text(RunUtil.secondsToPace(Math.min(...this.record!.points.map(p => p.pace))))
18.           .fontSize(20)
19.           .fontColor('#333')
20.           .margin({ top: 4 })
21.       }.layoutWeight(1)
23.       Column() {
24.         Text('平均')
25.           .fontSize(12)
26.           .fontColor('#666')
27.         Text(RunUtil.secondsToPace(this.record!.avgPace))
28.           .fontSize(20)
29.           .fontColor('#333')
30.           .margin({ top: 4 })
31.       }.layoutWeight(1)
32.     }.width('100%').padding(16)
34.     LineChart({ model: this.model })
35.       .width('100%')
36.       .height(240)
37.       .backgroundColor(Color.White)
38.       .margin({ top: 8 })
39.   }.width('100%').backgroundColor('#F5F5F5')
40. }

复制代码

核心点解析
• LineChart：表示图表组件，通过绑定model属性展示图表。
• Text：用于展示文本信息，如标题、数据标签等。
• Row和Column：用于布局，分别表示水平和垂直布局。
五、总结
通过 mpchart，我们可以轻松实现运动配速图表的绘制。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！