【图解鸿蒙】使用绘图组件Canvas绘制柱状图

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

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

https://harmonyos./#zz

一、运行效果

在页面中分别使用红色、黄色和蓝色显示三组柱状图，如下图所示：

二、实现思路

通过将组件chart的属性type设置为"bar"来绘制一张柱状图。在组件chart中，通过动态绑定的方式指定属性options和datasets的值，以对图形的参数进行设置。

三、代码详解

打开文件index.hml。

将组件text中显示的页面标题修改为：柱状图。

在页面标题的下方添加一个组件chart。在组件chart中，通过动态绑定的方式将属性options和datasets的值分别设置为"{{options}}"和"{{datasets}}"。将属性type的值设置为"{{bar}}"，以显示一张柱状图。

代码如下所示：

  
 
 
 
    
   
  
  
  
  1.  
    2.    
  
  
  
  2.      
    3.    
  
  
  
  3.         柱状图 
    4.    
  
  
  
  4.      
    5.    
  
  
  
  5.      
    6.    
  
  
  
  6.      
    7.    
  
  
  
  7.

 打开文件index.css。

分别定义三个类选择器，以定义index.hml中组件div、text和chart的样式。

代码如下所示：

 
 
 
 
    
  
  
  
  
  1. container { 
    2.   
  
  
  
  2.     width: 454px; 
    3.   
  
  
  
  3.     height: 454px; 
    4.   
  
  
  
  4.     flex-direction: column; 
    5.   
  
  
  
  5.     justify-content: flex-start; 
    6.   
  
  
  
  6.     align-items: center; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8. .title { 
    9.   
  
  
  
  9.     width: 240px; 
    10.   
  
  
  
  10.     height: 90px; 
    11.   
  
  
  
  11.     margin-top: 40px; 
    12.   
  
  
  
  12.     font-size: 38px; 
    13.   
  
  
  
  13.     text-align: center; 
    14.   
  
  
  
  14. } 
    15.   
  
  
  
  15. .chart { 
    16.   
  
  
  
  16.     width: 400px; 
    17.   
  
  
  
  17.     height: 200px; 
    18.   
  
  
  
  18. } 
    19.

 打开文件index.js。

在data中将占位符options的值初始化为一个字典，该字典中包含两个元素，分别用于设置x轴和y轴的参数。第一个元素的key是xAxis，对应的value是一个字典，该字典中只包含一个元素，对应的key和value分别是axisTick和10，用于设置x轴上的刻度数量。在options对应的字典中，第二个元素的key是yAxis，对应的value是一个由两个元素组成的字典，分别用于设置y轴的最大值和刻度数量，其中，两个元素的key分别是max和axisTick，对应的value分别是100和1。

在data中将占位符datasets的值初始化为一个字典的数组，该数组中包含三个字典。第一个字典中只包含一个元素，元素的key是data，对应的value是一个整数数组。第二个字典和第三个字典中都包含两个元素，第一个元素指定柱状图对应的整数数组，第二个元素指定柱状图填充的颜色。

代码如下所示：

 
 
 
 
    
  
  
  
  
  1. export default { 
    2.   
  
  
  
  2.     data: { 
    3.   
  
  
  
  3.         options: { 
    4.   
  
  
  
  4.             xAxis: { 
    5.   
  
  
  
  5.                 axisTick: 10  
    6.   
  
  
  
  6.             }, 
    7.   
  
  
  
  7.             yAxis: { 
    8.   
  
  
  
  8.                 max: 100,  
    9.   
  
  
  
  9.                 axisTock: 1,  
    10.   
  
  
  
  10.             } 
    11.   
  
  
  
  11.         }, 
    12.   
  
  
  
  12.         datasets: [ 
    13.   
  
  
  
  13.             { 
    14.   
  
  
  
  14.                 data: [33, 96, 53, 25, 99, 39, 59, 16, 22, 99], 
    15.   
  
  
  
  15.             }, 
    16.   
  
  
  
  16.             { 
    17.   
  
  
  
  17.                 data:[45, 10, 80, 18, 21, 35, 86, 70, 84, 36], 
    18.   
  
  
  
  18.                 fillColor: "#ffff00" 
    19.   
  
  
  
  19.             }, 
    20.   
  
  
  
  20.             { 
    21.   
  
  
  
  21.                 data: [38, 80, 70, 69, 74, 47, 26, 67, 32, 28], 
    22.   
  
  
  
  22.                 fillColor: "#4169e1" 
    23.   
  
  
  
  23.             }, 
    24.   
  
  
  
  24.         ] 
    25.   
  
  
  
  25.     } 
    26.   
  
  
  
  26. } 
    27.

 保存所有代码后打开模拟器，运行效果如下图所示：

项目源代码，请见附件。

欢迎订阅我的专栏【图解鸿蒙】：

https://harmonyos./column/27

©著作权归作者和HarmonyOS技术社区共同所有，如需转载，请注明出处，否则将追究法律责任

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

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

https://harmonyos./#zz

 

分享文章：【图解鸿蒙】使用绘图组件Canvas绘制柱状图
文章转载：http://www.shufengxianlan.com/qtweb/news13/353963.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

用户体验知识

各行业网站

重庆做网站　　 　护栏钻孔机　　 　广告媒介投放　　 　绵竹网站建设　　 　内江广告　　 　绵阳电信机房　　 　重庆网站制作　　 　成都移动服务器托管　　 　犀浦雨棚定制　　 　网站空间　　 　成都h5网站建设　　 　西信服务器托管　　 　成都网站建设　　 　LED显示屏厂家　　 　虚拟主机　　 　品牌网站建设　　 　网站推广　　 　成都网站优化　　 　名片设计　　 　重庆网站营销