一步一步教你写股票走势图——分时图三(对齐图表、自定义高亮)
目录
一步一步教你写股票走势图——分时图一(概述)
一步一步教你写股票走势图——分时图二(自定义xy轴)
一步一步教你写股票走势图——分时图三(对齐图表、自定义柱状图高亮)
一步一步教你写股票走势图——分时图四(高亮联动)
一步一步教你写股票走势图——分时图五(自定义标记)
一步一步教你写股票走势图——K线图一(概述)
一步一步教你写股票走势图——K线图二(图表联动)
一步一步教你写股票走势图——K线图三(添加均线)
一步一步教你写股票走势图——K线图四(高亮联动一)
一步一步教你写股票走势图——K线图五(高亮联动二)
一步一步教你写股票走势图——商业版
demo更新地址https://github.com/AndroidJiang/StockChart
我们先看一下之前的效果图:
图表的两边明显不对齐,右边尤其明显,左边是因为都写了坐标,看起来不那么明显,但是还是没有对齐的。我们再看一下高亮,折线图的高亮样式是我们想要的,而柱状图的高亮他将整个那根柱子黑色显示了,但是却不是我们要的那种效果,我们要的也是跟上面一样的一根线效果,下面我们先来设计图表的对齐。
对齐图表
我们肯定得用到getViewPortHandler这个类,只想说一句,很牛逼的一个类,大家必须得看看里面的东西,基本上有关图表的所有信息,你都能在它里面获取到。
代码:
/*设置量表对齐*/private void setOffset() {float lineLeft = lineChart.getViewPortHandler().offsetLeft();float barLeft = barChart.getViewPortHandler().offsetLeft();float lineRight = lineChart.getViewPortHandler().offsetRight();float barRight = barChart.getViewPortHandler().offsetRight();float offsetLeft, offsetRight;/*注:setExtraLeft...函数是针对图表相对位置计算,比如A表offLeftA=20dp,B表offLeftB=30dp,则A.setExtraLeftOffset(10),并不是30,还有注意单位转换*/if (barLeft < lineLeft) {offsetLeft = Utils.convertPixelsToDp(lineLeft-barLeft);barChart.setExtraLeftOffset(offsetLeft);} else {offsetLeft = Utils.convertPixelsToDp(barLeft-lineLeft);lineChart.setExtraLeftOffset(offsetLeft);}/*注:setExtra...函数是针对图表绝对位置计算,比如A表offRightA=20dp,B表offRightB=30dp,则A.setExtraLeftOffset(30),并不是10,还有注意单位转换*/if (barRight < lineRight) {offsetRight = Utils.convertPixelsToDp(lineRight);barChart.setExtraRightOffset(offsetRight);} else {offsetRight = Utils.convertPixelsToDp(barRight);lineChart.setExtraRightOffset(offsetRight);}}
代码很好理解,就不做详细说明了,具体的坑我已经写在注释中,这里感谢下天才木木的指正(单位转换),我们直接看下效果吧。
图表的对齐到此结束,下面我们介绍一下如何自定义柱状图的高亮。
自定义柱状图形状以及高亮
这部分就很简单了,我们直接在源码中修改即可。
- 形状
我们要实现如下效果:
首先我们找到BarChartRenderer这个类,定位到drawDataSet方法,然后有这么一段代码:
c.drawRect(buffer.buffer[j], buffer.buffer[j + 1], buffer.buffer[j + 2],buffer.buffer[j + 3], mRenderPaint);
这就是画的柱状图,我们原生的比较粗,那么我们只要自己重画它就ok啦!
我这边将原来的柱状图宽度变成原来的1/3,
c.drawRect(buffer.buffer[j] + (buffer.buffer[j + 2] - buffer.buffer[j]) / 3, buffer.buffer[j + 1], buffer.buffer[j + 2] - (buffer.buffer[j + 2] - buffer.buffer[j]) / 3,buffer.buffer[j + 3], mRenderPaint);
看下效果(为了便于查看,我改了颜色):
高亮
同样,我们找到drawHighlighted这个方法,重写
/*重写高亮*/c.drawLine(mBarRect.centerX(), mViewPortHandler.getContentRect().bottom, mBarRect.centerX(), 0, mHighlightPaint);// c.drawRect(mBarRect, mHighlightPaint);
上效果:
哦了,对齐图表以及自定义柱状图这边就结束了,下一篇将介绍下图表高亮的联动,demo中已经有了,有兴趣的可以查看一下。
目录
一步一步教你写股票走势图——分时图一(概述)
一步一步教你写股票走势图——分时图二(自定义xy轴)
一步一步教你写股票走势图——分时图三(对齐图表、自定义柱状图高亮)
一步一步教你写股票走势图——分时图四(高亮联动)
一步一步教你写股票走势图——分时图五(自定义标记)
一步一步教你写股票走势图——K线图一(概述)
一步一步教你写股票走势图——K线图二(图表联动)
一步一步教你写股票走势图——K线图三(添加均线)
一步一步教你写股票走势图——K线图四(高亮联动一)
一步一步教你写股票走势图——K线图五(高亮联动二)
一步一步教你写股票走势图——商业版
demo更新地址https://github.com/AndroidJiang/StockChart
一步一步教你写股票走势图——分时图三(对齐图表、自定义高亮)相关推荐
- 一步一步教你写股票走势图——K线图二(图表联动)
目录 一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
- 一步一步教你写股票走势图——K线图四(高亮联动一)
目录 一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
- 一步一步教你写股票走势图——K线图三(添加均线)
目录 一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
- android 分时图x轴宽度,一步一步教你写股票走势图——分时图二(自定义xy轴)...
目录 一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
- 一步一步教你写股票走势图——分时图二(自定义xy轴)
目录 一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
- 一步一步教你写股票走势图——K线图五(高亮联动二)
目录 一步一步教你写股票走势图--分时图一(概述) 一步一步教你写股票走势图--分时图二(自定义xy轴) 一步一步教你写股票走势图--分时图三(对齐图表.自定义柱状图高亮) 一步一步教你写股票走势图- ...
- 【vps】教你写一个自己的随机图API
[vps]教你写一个自己的随机图API 前言 刚刚开始使用halo博客的时候,我就发现halo博客系统是可以使用随机图当背景的,所以也是使用了网上一些比较火的随机图API. 在上次发现了各种图片API ...
- android 股票二级列表,Android原生股票图-分时图讲解(二)
Android原生股票图-分时图讲解(一) Android原生股票图-分时图讲解(二) 在 分时图讲解(一)中我们主要实现分时图的绘制和CJL图.MACD图的绘制,以及各个线段的含义和X轴.Y轴各坐标 ...
- 基于AChartEngine绘制股票走势图----分时图一(走势柱状)
概述(项目地址:https://github.com/JiangYueA/android_aps) 使用AChartEngine实现股票分时.五日.k线图,分时图主要有均线,时价的走势和成交量的柱状图 ...
- 手把手教你写《雷神》游戏(三)
这是游戏选项界面: option.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLa ...
最新文章
- 欧氏空间内积定义_线性代数 (8) -- 欧式空间 (让生活大不同)
- 什么是防火墙,真正意义上的防火墙
- rabbitMQ第一篇:rabbitMQ的安装和配置
- ASP.NET 如何取得 Request URL 的各個部分
- 动态规划之划分数组形成两个和相等的子集
- 硬件安全系列 逻辑电路基础知识介绍(一)
- Postman界面了解
- lotus php,LotusPhp笔记之:Cookie组件的使用详解
- Apache启动错误:could not bind to address[::]:443
- android小程序下线,关闭小程序
- mysql 数字序列_MySQL中的数字序列
- oracle 数据操作指令,ORACLE数据操作命令
- MySQL Table is marked as crashed and should be repaired
- 阶段3 1.Mybatis_12.Mybatis注解开发_3 mybatis注解开发保存和更新功能
- python批量图片自动编码
- 在线教学生计算机,洪恩老兔轻松教你学电脑
- 进销存功能上线|新一代ERP经营管家助力企业经营高效
- iOS开发之打包上传到App Store——(一)各种证书的理解
- Flutter Container设置 width 无效
- 苹果手机上的计算机恢复出厂设置在哪里,苹果手机怎么还原出厂设置【详解】...