【图解鸿蒙】使用绘图组件Canvas绘制心率曲线图

想了解更多内容，请访问：

创新互联公司服务项目包括零陵网站建设、零陵网站制作、零陵网页制作以及零陵网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，零陵网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到零陵省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

和华为官方合作共建的鸿蒙技术社区

https://harmonyos./#zz

一、运行效果

在页面中显示页面标题、心率曲线图、心率最大值及其图标、心率最小值及其图标、心率在每分钟内的平均次数。如下图所示：

二、实现思路

在页面的生命周期事件函数onInit()中，随机生成若干个指定范围内的整数，以作为所有的心率数据。根据随机生成的整数统计所有心率的最大值、最小值和平均值，并通过动态绑定的方式将其显示在页面中。使用组件chart绘制心率曲线图。通过动态绑定的方式指定组件chart中属性options和datasets的值，以对图形的参数进行设置。

三、代码详解

打开文件index.hml。

将组件text中显示的页面标题修改为：心率曲线，并在其外层嵌套一个组件div，以便对其样式进行设置。将该组件div的属性class的值设置为"title-container"。

在页面标题的下方添加一个组件div以显示心率曲线图，并将属性class的值设置为"chart"。

在心率曲线图的下方添加一个组件list，以显示心率的最大值、最小值及其图标，并将属性class的值设置为"list"。

在组件list的内部嵌套一个组件list-item以显示列表中的每个列表项，并将属性class的值设置为"list-item"。通过动态绑定的方式指定属性for的值为"{{maxmin}}"，从而对index.js中data里面的maxmin进行迭代。

每个列表项都由一张图片和一个文本组成，因此在组件list-item中添加一个组件image和一个组件text。

在组件image中将属性class的值设置为"icon"，并通过动态绑定的方式将属性src的值设置为"/common/{{$item.iconName}}.png"。这样，report2.js中data里面的maxmin可以是一个字典的数组，数组中的每个字典都包含一个key为iconName的元素。

在组件text中将属性class的值设置为"maxmin"，并通过动态绑定的方式将显示的文本设置为"{{$item.mValue}}"。这样，对于index.js中data里面的数组maxmin，其中的每个字典都包含一个key为mValue的元素。

在列表的下方添加一个组件div以显示心率在一分钟内的平均次数，并将属性class的值设置为" average-container "。

在组件div中嵌套定义三个组件text，其属性class的值分别为："average"、"average-number"和"average"，其显示的文本分别为：平均、{{average}}、次/分。

上述讲解请见如下代码：

.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
left: 0px;
top: 0px;
width: 454px;
height: 454px;
}
.title-container {
justify-content: center;
align-items: center;
width: 300px;
height: 130px;
}
.title {
margin-top: 40px;
font-size: 38px;
text-align: center;
width: 454px;
height: 100px;
}
.chart {
width: 400px;
height: 180px;
}
.list {
flex-direction: row;
width: 240px;
height: 45px;
}
.list-item {
justify-content: center;
align-items: center;
width: 120px;
height: 45px;
}
.icon {
width: 32px;
height: 32px;
}
.maxmin {
font-size: 24px;
letter-spacing: 0px;
}
.average-container {
justify-content: space-between;
align-items: center;
width: 280px;
height: 55px;
}
.average {
font-size: 24px;
color: gray;
}
.average-number {
font-size: 38px;
letter-spacing: 0px;
}

import router from '@system.router'
export default {
data: {
maxmin: [{
iconName: 'max',
mValue: 0
},
{
iconName: 'min',
mValue: 0
}],
average: 0
}
}

import router from '@system.router'
export default {
data: {
......
},
onInit() {
let heartRates = [];
for (let i = 0; i < 100; i++) {
heartRates.push(this.getRandomInt(73, 159));
}
this.countMaxMinAverage(heartRates);
},
getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
},
countMaxMinAverage(heartRates) {
}
}

import router from '@system.router'
export default {
......
countMaxMinAverage(heartRates) {
this.maxmin[0].mValue = Math.max.apply(null, heartRates);
this.maxmin[1].mValue = Math.min.apply(null, heartRates);
let sum = 0;
for (let index = 0; index < heartRates.length; index++) {
sum += heartRates[index];
}
this.average = Math.round(sum / heartRates.length);
},
......
}

心率曲线
......
......

import router from '@system.router'
export default {
data: {
......
average: 0,
options: {
xAxis: {},
yAxis: {
min: 0,
max: 160
}
},
datasets: [{
gradient: true,
data: []
}]
},
onInit() {
let heartRates = [];
for (let i = 0; i < 100; i++) {
heartRates.push(this.getRandomInt(73, 159));
}
this.datasets[0].data = heartRates;
this.countMaxMinAverage(heartRates);
},
......
}