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

开发
文章由鸿蒙社区产出,想要了解更多内容请前往:51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz

 想了解更多内容,请访问:

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

https://harmonyos.51cto.com/#zz

一、运行效果

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


二、实现思路

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

三、代码详解

打开文件index.hml。

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

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

代码如下所示:

  1. <div class="container"
  2.     <text class="title"
  3.         柱状图 
  4.     </text> 
  5.     <chart class="chart" type="bar" options="{{options}}" datasets="{{datasets}}"
  6.     </chart> 
  7. </d 

 打开文件index.css。

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

代码如下所示:

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

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

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


项目源代码,请见附件。

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

https://harmonyos.51cto.com/column/27

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

想了解更多内容,请访问:

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

https://harmonyos.51cto.com/#zz

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-01-04 11:10:14

鸿蒙HarmonyOSCanvas

2022-05-23 10:53:54

canvas柱状图鸿蒙

2023-05-11 08:00:00

JavaScript柱状图

2011-12-21 12:58:41

JavaJFreeChart

2021-02-24 11:23:22

Pyecharts可视化工具柱状图

2021-07-01 09:24:35

PythonTable数据表

2022-02-14 14:14:02

鸿蒙数据可视化JS

2023-03-06 08:03:10

Python可视化工具

2021-01-21 09:10:29

ECharts柱状图大数据

2012-02-22 15:41:50

HTML 5

2022-06-14 15:13:22

Echarts柱状图

2022-03-11 20:31:35

canvasHarmony鸿蒙

2012-02-24 15:28:36

ibmdw

2015-07-22 10:57:36

watchOS图表自定义

2020-04-25 20:11:23

Python热力图代码

2022-02-28 15:52:07

canvasHarmonyOS鸿蒙

2009-07-20 15:48:10

OWC组件ASP.NET 2.0

2023-11-06 10:04:51

Go语言大数据

2020-12-28 10:15:18

鸿蒙HarmonyOSListContain

2022-02-23 15:17:04

鸿蒙OpenHarmonJacascript
点赞
收藏

51CTO技术栈公众号