##鸿蒙核心技术 ##运动开发 ##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 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：生成图表数据，绑定到图表配置类中。
三、数据填充
在初始化配置完成后，我们需要填充数据到图表中。以下是数据填充的代码：
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。
四、样式展示
在数据填充完成后，我们需要将图表展示到页面上。以下是样式展示的代码：
@BuilderDataAnalysisBuilder() { 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，我们可以轻松实现运动配速图表的绘制。
评论