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

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

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

https://harmonyos.51cto.com/#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}}、次/分。

上述讲解请见如下代码：

<div class="container" onswipe="toNextPage"> 
    <div class="title-container"> 
        <text class="title"> 
            心率曲线 
        </text> 
    </div> 
    <div class="chart"> 
 
    </div> 
    <list class="list"> 
        <list-item class="list-item" for="{{maxmin}}"> 
            <image class="icon" src="/common/{{$item.iconName}}.png"/> 
            <text class="maxmin"> 
                {{$item.mValue}} 
            </text> 
        </list-item> 
    </list> 
    <div class="average-container"> 
        <text class="average"> 
            平均 
        </text> 
        <text class="average-number"> 
            {{average}} 
        </text> 
        <text class="average"> 
            次/分 
        </text> 
    </div> 
</div> 

打开文件index.css。

本文转载自网络，原文链接：https://harmonyos.51cto.com/#zz
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！

上一篇：机器编程驾到，会让2700万程序员丢掉饭碗吗？ 下一篇：用Python处理不平衡数据集