基于RecyclerChart的KLine绘制Volume实现详解

目录
  • 正文
    • 创建AttacheChart YAxis
    • Attache Chart绘制

正文

本章节是基于RecyclerChart的KLine 绘制第三章节,底部AttacheChart 成交量图表 Volume的绘制,可以看到直接在原来的KLine MainChart下面绘制的,用的是第二章最后提及的方案,就是跟MainChart的绘制在一个For循环里处理的,所以也不存在两表联动的问题了。但是这个方案可能会有个隐患,这个后面提及吧,暂时放一放,直接看gif效果图(没有设计UI的出图,暂且看着吧,哈哈)

这几天习惯了实现功能后,然后随即就开始记录,所以比较随意,以下Volume 实现前列的功能点

底部副图表 成交量图的绘制
1. 调整底部 ContentPaddingBottom,  腾出空间绘制

2. 底部 XAxisRenderer 考虑是否单独列出来,调整XAxisLabel.

3. 创见 底部 attacheYAxis , 实时动态调整max/min,  resetYAixsAttache( ), 传到绘制的StockChartRender的drawChart() 中去。

4. 绘制底部 AttacheChart, Volume图表。

待改动:

将ContentPaddingBottom、paddingBottom 从xml中移到 StockAttrs的 default值中去,规范统一化。

创建AttacheChart YAxis

绘制图表前,需要给AttcacheChart 前需要给 它框住,所以依赖YAxis的Max/Min值。需要借助 ContentPaddingBottom、paddingBottom值将 绘制的区域确定,确定绘制区域时,顺便将图表顶部的 desc 文案"成交量:xxx万股" drawText(desc) 绘制一下。

Attache YAxis的创建跟 Main YAxis在一个函数里处理了

紧接着就是实时更换Attache YAxis的Max/Min value, 同样跟Main YAxis 放在同一个函数里

Attache Chart绘制

依照文章开头那里提到的跟Main Chart 基本上在同一个For循环里处理的,这里基本上只添加了两个函数的调用,而绘制Volume Chart还是调用原来的drawChart() 函数,只是Params中的RectF的相关的坐标需要单独计算,这里通过ContentPaddingBottom, paddingBottom等去定位YAxis的上下界,上面的Attache YAxis的绘制有提及到。

drawAttacheTextAndDivide() 是绘制desc 文案的,然后基本上依旧是通过 contentPaddingBottom等去定位位置的

private fun drawAttacheTextAndDivide(canvas: Canvas, parent: RecyclerView, parentStart: Float, parentEnd: Float){
  val yDivideTop = parent.bottom - parent.paddingBottom - mStockAttrs.contentPaddingBottom
  val yDivideBottom = parent.bottom - parent.paddingBottom - mStockAttrs.contentPaddingBottom + 25.dp
  mLineChartPaint.color = mStockAttrs.yAxisLineColor
  mLineChartPaint.strokeWidth = 0.75f
  canvas.drawLine(parentStart, yDivideBottom, parentEnd, yDivideBottom, mLineChartPaint)
  val volumeStr = "成交量:9399万股"
  val txtWidth = mHighLightDescPaint.measureText(volumeStr)
  val rectLeft = parent.left + 5.dpf
  val rectF = RectF(rectLeft, yDivideTop, rectLeft + txtWidth, yDivideBottom)
  val baseY = TextUtil.getTextBaseY(rectF, mHighLightDescPaint)
  mHighLightDescPaint.color = mStockAttrs.xAxisTxtColor
  mHighLightDescPaint.textSize = mStockAttrs.xAxisTxtSize
  canvas.drawText(volumeStr, rectLeft, baseY, mHighLightDescPaint)
}

然后这里Attache Item RectF的计算单独列了一个函数getAttacheStockRectF()

至此,Volume Chart 的绘制到此就结束了,代码 加上 码文花费了大概一上午的时间,整体来说实现起来还是比较简单的,需要转换了一下思想,不能单单局限在固定的思维里,不过这里提到后续扩展可能会有些隐患,不过目前是可以的。

下次就进入到缩放环节了,缩放限定最大、最小;当缩小到一个limit Level时需要切换 Main Chart到 Line Chart,带有底部Fill. 不过先处理正常的缩放吧,这个更新可能会比较久了,加油,钢巴得,更多关于RecyclerChart KLine绘制Volume的资料请关注我们其它相关文章!

(0)

相关推荐

  • RecyclerChart的KLine的绘制

    目录 正文 StockValueFormatter 绘制蜡烛图 正文 继上次章节介绍完RecyclerChart的一些动态属性之后,本章节开始基于RecyclerChart绘制新的图表,股票相关的Chart,笔者花了大概一天,绘制如下的一个效果,发现换了电脑之后没有装PS,所以CandleChart的颜色自己随意取的.其实无论绘制什么业务的图形,最终交给图表的不过是一堆要展示的数据而已. 下面是gif图,还有好些功能没有加,比如高亮用的是原来的RecyclerChart之前的样式.Kline作为

  • Android RecyclerChart其它图表绘制示例详解

    目录 正文 1. 心电图 2. 睡眠图 正文 之前章节介绍了RecyclerChart 中一些通用的图表的相关绘制逻辑,本章节介绍两种Special的Chart的绘制,一种是心电图,一种是睡眠图.首先我们来看下心电图EcgChart的绘制. 1. 心电图 EcgChart 跟LineChart形态上是相似的,但是EcgChart的点相对于LineChart密集的多,之前的LineChart相当于每个RecyclerView的Itemview 中的Model对应的value值,而心电图的ItemD

  • 基于RecyclerChart的KLine绘制详解

    本章节是KLine的绘制的第二章节,在原来的基础上绘制5.10.20日均线.下面是gif的效果. 其实只是把线性图表的绘制逻辑搬到这边一起,上篇文章提到在一个For循环里处理,减少遍历,之前是通过Entry的Y值找对应的PointF的Y值,这里需要用StockEntry中的5日.10日.20日均线值去求值.就是类似的一些逻辑替换,思想还是不变,然后左右边界的处理暂时先放一放,滑动到边界会有一些bug. 同时,这里的均值没有参与到图表YAxis的Max.min的计算中去,会有线出上下边界的情况,待

  • 基于RecyclerChart的KLine绘制Volume实现详解

    目录 正文 创建AttacheChart YAxis Attache Chart绘制 正文 本章节是基于RecyclerChart的KLine 绘制第三章节,底部AttacheChart 成交量图表 Volume的绘制,可以看到直接在原来的KLine MainChart下面绘制的,用的是第二章最后提及的方案,就是跟MainChart的绘制在一个For循环里处理的,所以也不存在两表联动的问题了.但是这个方案可能会有个隐患,这个后面提及吧,暂时放一放,直接看gif效果图(没有设计UI的出图,暂且看着

  • 基于vue+canvas的excel-like组件实例详解

    a vue component,基于vue的表格组件,主要解决大数据量的表格渲染性能问题,使用canvas绘制表格,同时支持类似excel的批量选中,复制黏贴删除,实时编辑等功能. vue-grid-canvas Install NPM / Yarn Install the package: npm install vue-canvas-grid --save Then import it in your project import Vue from 'vue' import Grid fro

  • Android Flutter利用CustomPaint绘制基本图形详解

    目录 绘制矩形 绘制圆形 绘制椭圆 绘制任意形状 绘制弧形 总结 上一篇我们介绍了 CustomPaint 的基本概念和使用,可以看到 CustomPaint 其实和 前端的 Canvas基本上是一样的,实际上前端 Canvas 支持的绘制方法 CustomPaint 都支持,毕竟 CustomPaint 其实也是基于 Canvas 实现的.本篇我们来介绍 CustomPaint 基本图形的绘制. 绘制矩形 绘制矩形比较简单,方法定义如下: void drawRect(Rect rect, Pa

  • 基于python中的TCP及UDP(详解)

    python中是通过套接字即socket来实现UDP及TCP通信的.有两种套接字面向连接的及无连接的,也就是TCP套接字及UDP套接字. TCP通信模型 创建TCP服务器 伪代码: ss = socket() # 创建服务器套接字 ss.bind() # 套接字与地址绑定 ss.listen() # 监听连接 inf_loop: # 服务器无限循环 cs = ss.accept() # 接受客户端连接 comm_loop: # 通信循环 cs.recv()/cs.send() # 对话(接收/发

  • 基于C++ bitset常用函数及运算符(详解)

    C++ bitset--高端压位卡常题必备STL ------------------------------------------------------------ 以下内容翻译自cplusplus.com,极大地锻炼了我的英语能力. bitset存储二进制数位. bitset就像一个bool类型的数组一样,但是有空间优化--bitset中的一个元素一般只占1 bit,相当于一个char元素所占空间的八分之一. bitset中的每个元素都能单独被访问,例如对于一个叫做foo的bitset,

  • 基于JS脚本语言的基础语法详解

    JS脚本语言的基础语法:输出语法  alert("警告!");  confirm("确定吗?");   prompt("请输入密码");为弱类型语言: 开始时要嵌入JS代码:<script type="text/javascript"></script>: 关于写程序是需注意的基本语法: 1.所有的字符全都是英文半角的: 2.大部分情况下每条语句结束后要加分号: 3.每一块代码结束后加换行:4.程序前呼

  • 基于java涉及父子类的异常详解

    java中的异常涉及到父子类的问题,可以归纳为一句话:子类的构造函数抛出的异常必须包含父类的异常,子类的方法可以选择抛出"范围小于等于"父类的异常或不抛出异常. 1. 为什么构造函数必须抛出包含父类的异常? 在<thingking in java>中有这么一段话: 异常限制:当覆盖方法时,只能抛出在基类方法的异常说明中列出的那些异常 异常限制对构造器不起作用,你会发现StormyInning的构造器可以抛出任何异常,而不必理会基类构造函数所抛出的异常.然而因为必须构造函数必

  • classloader类加载器_基于java类的加载方式详解

    基础概念 Classloader 类加载器,用来加载 Java 类到 Java 虚拟机中.与普通程序不同的是.Java程序(class文件)并不是本地的可执行程序.当运行Java程序时,首先运行JVM(Java虚拟机),然后再把Java class加载到JVM里头运行,负责加载Java class的这部分就叫做Class Loader. JVM本身包含了一个ClassLoader称为Bootstrap ClassLoader,和JVM一样,BootstrapClassLoader是用本地代码实现

  • 基于线程、并发的基本概念(详解)

    什么是线程? 提到"线程"总免不了要和"进程"做比较,而我认为在Java并发编程中混淆的不是"线程"和"进程"的区别,而是"任务(Task)".进程是表示资源分配的基本单位.而线程则是进程中执行运算的最小单位,即执行处理机调度的基本单位.关于"线程"和"进程"的区别耳熟能详,说来说去就一句话:通常来讲一个程序有一个进程,而一个进程可以有多个线程. 但是"任务

随机推荐