分时图三(对齐图表、自定义高亮)

[复制链接]
[投诉]
180 0
online_moderator 爱卡网小编手机认证 实名认证 发表于 2022-5-27 18:10:00 | 只看该作者 |阅读模式 打印 上一主题 下一主题
目录
一步一步教你写股票走势图——分时图一(概述)
一步一步教你写股票走势图——分时图二(自定义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 代码很好理解,就不做详细说明了,具体的坑我已经写在注释中,这里感谢下天才木木的指正(单位转换),我们直接看下效果吧。

分时图三(对齐图表、自定义高亮)

图表的对齐到此结束,下面我们介绍一下如何自定义柱状图的高亮。

自定义柱状图形状以及高亮
这部分就很简单了,我们直接在源码中修改即可。

形状我们要实现如下效果:
分时图三(对齐图表、自定义高亮)

首先我们找到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

版权声明:本站部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们将及时更正、删除,谢谢!


weinxin
爱卡网站长——亚熙哥
若开通会员无法使用
请扫码联系爱卡网站长
本平台不放贷、也不接网贷代做!
上一篇:炒股入门必读——传说中的日本蜡烛图技术,你真的了解吗?
下一篇:股市涨跌难料?不如学一下蜡烛图技术
楼主热帖
分享到:  QQ好友和群QQ好友和群
收藏
收藏0
支持
支持0
反对
反对0
122329my40v0m19mm281y0
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 qq_login wechat_login1

本版积分规则

avatar

0关注

26粉丝

1091904帖子

发布主题
精选帖子
热帖排行
推荐
162349x8b848x8bpq4qaaz
客服咨询

155-5555-5876

服务时间 9:00-24:00

爱卡网APP下载

app

知识改变命运,技术改变未来!

  • 客服Q Q:70079566     微信:79710
  • 工作时间:周一到周日     9:00-22:00
  • 加入爱卡网VIP会员,菜鸟也能变大神!
15555555876

关注我们

  • app
  • app
  • app
本站唯一官网:www.7177.cn Copyright    2010-2021  爱卡网  Powered by Discuz!  技术支持:亚熙工作室   浙ICP备17046104号-1