HarmonyOS NEXT应用开发之MpChart图表实现案例
介绍
MpChart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI。本示例主要介绍如何使用三方库MpChart实现柱状图UI效果。如堆叠数据类型显示,Y轴是否显示,左Y轴位置,右Y轴位置,是否显示X轴,是否绘制背景色,是否设置MarkerView等。
效果图预览
使用说明
- 点击页面上控制项即可查看效果。需要注意的是选项”是否设置MarkerView“勾选后,点击柱状图中柱子会有弹窗效果。
实现思路
- 通过this.model = new BarChartModel()初始化图表配置构建类。源码参考BarChart.ets。
// 图表数据初始化
aboutToAppear() {
// 初始化图表配置构建类
this.model = new BarChartModel();
...
}
- 配置图表指定样式,为图表添加数据选择的监听器。源码参考BarChart.ets。
// 图表数据初始化
aboutToAppear() {
// 为图表添加数据选择的监听器。
this.model.setOnChartValueSelectedListener(this.valueSelectedListener);
...
// 配置图表指定样式:如启用绘制网格背景。
this.model.setDrawGridBackground(false);
...
}
- 通过this.model.setData(this.data)将数据与图表配置类绑定。源码参考BarChart.ets。
// 图表数据初始化
aboutToAppear() {
...
// 生成单一颜色数据
this.data = this.getNormalData();
// 将数据与图表配置类绑定
this.model.setData(this.data);
...
}
- 通过BarChart({ model: this.model })为组件设置配置构建类。源码参考BarChart.ets。
build() {
Column() {
...
// 为组件设置配置构建类。
BarChart({ model: this.model })
...
}
}
高性能知识点
不涉及
工程结构&模块类型
barchart // har类型
|---src\main\ets\view
| |---BarChart.ets // 视图层-MpChart柱状图页面
模块依赖
参考资料
写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing,不定期分享原创知识。
- 想要获取更多完整鸿蒙最新VIP学习资源,请移步前往小编:
https://qr21.cn/FV7h05
HarmonyOS NEXT应用开发之MpChart图表实现案例的更多相关文章
- 李洪强IOS开发之iOS好项目收集
李洪强IOS开发之iOS好项目收集 在这里收集一些最近出现的比较实用好玩的框架或者项目,会不断更新 项目 简述 日期 SCTableViewCell 类似与QQ侧滑删除Cell的Demo 201501 ...
- 微信公众号开发之VS远程调试
目录 (一)微信公众号开发之VS远程调试 (二)微信公众号开发之基础梳理 (三)微信公众号开发之自动消息回复和自定义菜单 前言 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流 ...
- Android混合开发之WebViewJavascriptBridge实现JS与java安全交互
前言: 为了加快开发效率,目前公司一些功能使用H5开发,这里难免会用到Js与Java函数互相调用的问题,这个Android是提供了原生支持的,不过存在安全隐患,今天我们来学习一种安全方式来满足Js与j ...
- Android混合开发之WebView与Javascript交互
前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...
- UWP开发之Template10实践二:拍照功能你合理使用了吗?(TempState临时目录问题)
最近在忙Asp.Net MVC开发一直没空更新UWP这块,不过有时间的话还是需要将自己的经验和大家分享下,以求共同进步. 在上章[UWP开发之Template10实践:本地文件与照相机文件操作的MVV ...
- UWP开发之Template10实践:本地文件与照相机文件操作的MVVM实例(图文付原代码)
前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...
- UWP开发之Mvvmlight实践七:如何查找设备(Mobile模拟器、实体手机、PC)中应用的Log等文件
在开发中或者后期测试乃至最后交付使用的时候,如果应用出问题了我们一般的做法就是查看Log文件.上章也提到了查看Log文件,这章重点讲解下如何查看Log文件?如何找到我们需要的Packages安装包目录 ...
- Android混合开发之WebView使用总结
前言: 今天修改项目中一个有关WebView使用的bug,激起了我总结WebView的动机,今天抽空做个总结. 混合开发相关博客: Android混合开发之WebView使用总结 Android混合开 ...
- Android Studio快速开发之道
概述 现如今开发越来越追求效率和节奏,节省出时间做更多的事情,除了开发技术上的封装等,开发工具的使用技巧也是很重要的,今天就根据自己的经验来给大家介绍一下Android Studio快速开发之道. P ...
- Android开发之Java集合类性能分析
对于Android开发者来说深入了解Java的集合类很有必要主要是从Collection和Map接口衍生出来的,目前主要提供了List.Set和 Map这三大类的集合,今天Android吧(ard8. ...
随机推荐
- Navicat 15下载教程
Navicat 15下载_永久激活注册码(附图文安装教程) 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转 ...
- day04-2发送文件
多用户即时通讯系统04 4.编码实现03 4.6功能实现-发送文件功能实现 4.6.1思路分析 客户端(发送者): 先把文件a.jpg读取到客户端的字节数组 把文件对应的字节数组封装到message对 ...
- 地理探测器R语言实现:geodetector
本文介绍基于R语言中的geodetector包,依据多张栅格图像数据,实现地理探测器(Geodetector)操作的详细方法. 需要说明的是,在R语言中进行地理探测器操作,可以分别通过geod ...
- 在 SwiftUI 中使用 Metal Shader
简介 从 iOS 17/macOS 14 开始,SwiftUI 支持使用 Metal shader 来实现一些特效.主要提供三个 View Modifier:colorEffect. distorti ...
- Hong Kong Azure / .NET club first meetup - WPF business value in the financial industry
The first meeting of the Hong Kong Azure / .NET Club was held on December 29, 2019 at Starbucks, She ...
- Chrome浏览器:The request client is not a secure context and the resource is in more-private address ...
1.概述 新版的chrome浏览器会校验发起端的域名和访问资源的域名直接的关系,如果客户端发起域名比访问资源所在的域名更public(开放),会导致The request client is not ...
- verilog之基本结构
verilog语法的基本结构 1.verilog的定义 verilog,一种硬件描述语言,致力于提高数字电路,尤其是大规模数字电路的描述规范.从描述就可以看出,这个语言和C不同,不是高级语言.但是,这 ...
- P9966 [THUPC 2024 初赛] 机器人 题解
细节大模拟. 题意 一堆机器人在一起,每个人有左右手和一些指令,依次执行并输出结果. 做法 首先这种指令的执行还算是比较简单的大模拟,一个个实现即可,在此给出我的定义. struct Robot{ i ...
- Python爬虫爬取国家统计局网站【统计用区划和城乡划分代码】并存入MySQL数据库
国家统计局网站相关分级页面截图 基本思路 爬取每个页面的a标签内容,生成省市两级数据字典,最后合成区县对应的链接,爬取第三层区划代码和名字,结合省市两级名字生成最后的标准. 代码 1 import p ...
- OpenHarmony设备环境查询:Environment
开发者如果需要应用程序运行的设备的环境参数,以此来作出不同的场景判断,比如多语言,暗黑模式等,需要用到Environment设备环境查询. Environment是ArkUI框架在应用程序启动时创 ...