高级图表实现解决方案
mpchart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI,mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
确认网络状况解决方案
290浏览 • 1回复 待解决
HarmonyOS代码封装解决方案
334浏览 • 1回复 待解决
抓包应用,求解决方案
1690浏览 • 1回复 待解决
HarmonyOS事件通信能力解决方案
566浏览 • 1回复 待解决
HarmonyOS有访问相册有解决方案
206浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
527浏览 • 1回复 待解决
HarmonyOS C++模块引用解决方案
252浏览 • 1回复 待解决
支持图文混排组件及解决方案
111浏览 • 1回复 待解决
HarmonyOS 音视频处理相关解决方案
264浏览 • 1回复 待解决
应用包体积大小优化解决方案
334浏览 • 1回复 待解决
图片存储解决方案谁知道啊?
2433浏览 • 1回复 待解决
webview中跨域问题解决方案
2065浏览 • 1回复 待解决
图像处理库是否有替代的解决方案
219浏览 • 0回复 待解决
List滚动条时长时短,求解决方案?
832浏览 • 1回复 待解决
Harmony API9之后 GIS 解决方案有哪些?
2074浏览 • 1回复 待解决
背景色透明度问题解决方案
330浏览 • 1回复 待解决
基于原生实现高级显示效果
460浏览 • 1回复 待解决
List滚动到底部提示,是否有好的解决方案?
793浏览 • 1回复 待解决
HarmonyOS list组件包含tab组件上下滑动冲突解决方案
107浏览 • 1回复 待解决
请问我要如何发布我的HarmonyOS组件或解决方案?
5779浏览 • 1回复 已解决
基于动态配置签名的多人协同开发应用签名解决方案
789浏览 • 1回复 待解决
调试运行的时候报错,有好的解决方案吗?
753浏览 • 0回复 待解决
HarmonyOS将两张图片合成一张的解决方案
333浏览 • 1回复 待解决
支持图文混排组件及解决方案,且图片需要支持点击
171浏览 • 2回复 待解决
HarmonyOS应用是否需要加固,需要的话是否已有解决方案
224浏览 • 1回复 待解决
mpchart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI,mpchart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。
使用准备
1. 下载三方库控制台输入:ohpm install @ohos/mpchart。
2. 初始化图表配置构建类。
初始化三方库得构建类,图表数据,线性数据等。
3. 配置图表指定样式。
注:此步骤是初始化底层的表框架,也是就后面的网格。
图表生成分为x、y轴。
setPosition设置:
x轴(getXAxis)得显示范围:TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE,x轴只需要设置一次即可。
y轴(getAxisLeft,getAxisRight)表内左右显示范围:OUTSIDE_CHART, INSIDE_CHART,如需只设置一侧,创建实例时,添加属性添加所需侧即可。
应用场景
解决方案:mpchart
场景一:线性表虚实线交接【曲线】
实现效果
图1-1
核心代码
我们需要写一个MyLineDataSet类,继承自LineDataSet,也就是线型图的数据类。为什么需要这个类呢?因为我们需要在初始化数据的时候定义这个虚实相接的线是从哪里开始由实线变为虚线的,这里MyLineDataSet类的构造方法比它的父类多了一个interval参数,也就是虚实分隔点。
定义好自己的数据类之后,就要定义MyRender类了,实线具体的绘制功能,MyRender类继承自LineChartRenderer,因为是要绘制曲线,所以重写的是drawCubicBezier方法,MyRender类的代码。
这个方法主要内容就是定义了两条path2D,也就是线段来绘制实线和虚线。
绘制方法如下:
就是调用path2D的方法bezierCurveTo方法,这个方法有6个参数,分别是控制点1的(x值,y值 )和 控制点2的(x值,y值)以及目标点的(x值,y值)。直接把父类的方法抄过来即可。
我们需要有一个if判断,if(j <= dataSet.interval)就是当j小于dataSet.interval时,写绘制实线的方法,当j等于dataSet.interval时,虚线要moveTo当前位置;当j大于dataSet.interval时,就调用dashedLinePath.bezierCurveTo方法绘制虚线了。
最后绘制方法是调用c.stroke方法绘制的。c.setLineDash([5,5,0]);是设置虚线效果。
最后就是使用,代码如下:
场景二:线性表模拟数据图表实时变化
实现效果
核心代码
初始化底层表格后,需要给表格上绑定数据。
首先判定data是否有数据,不为空的话获取这个DataSet这个容器,如果容器DataSet为空,添加样式即可。
调用接口addEntry填充数据,将之前的生成的数据用set.getEntryCount一起添加,再利用随机数填充新数据,从0索引开始。
notifyDataChanged计算数据的最大值和最小值,notifyDataSetChanged触发数据更新,以x轴移动。
注:每次通过调用addEntry()获取set容器不断更新里面的数据做渲染。
场景三:线性表自定义表节点和线性节点
实现效果
上方slider:x轴传值监听,下方slider:y轴传值监听。
注册监听事件"seekBarXValueWatch"和"seekBarYValueWatch",滑动组件Slider,当值变化时触发监听,传递给setData。
核心代码
将监听后数据传入setData,经过计算得出X,Y轴的数量,传入数据结构基础类JArrayList<EntryOhos>,添加样式,绑定图表。
注:每次滑动slider改变的时候,触发监听将值传递给setData重新计算数据,达到变化效果。
注意事项
aboutToAppear定义x/y轴的外层图表时,x轴只用定义一次,Y轴根据业务来。
设置渐变颜色线性内的范围不是所有渐变,而只是最表层,如需设置渐变,只推荐两种相邻颜色过度。