最近项目上需要用到一个图表的绘制控件,于是选用了网络上较为常用的helloChart,项目的需求简要概述就是收到一条消息,将消息中的携带的数据更新为界面上的柱状图,并且当前屏幕显示最新的几条数据,往后翻动可以查看历史数据,柱体的x轴标签为柱体的接收时间。
看似很容易实现吧,实际上确实在查阅资料后确实能利用hello很快的编写出来,但是…遇到了一个bug,查阅了很多资料也没有解决掉,后来还是自己慢慢研究了两天才解决掉(大神也可以觉得是小弟太菜导致的),具体是什么bug呢?就是刚开始接收数据很好,但是当数据一多,到了某一个临界点,就会出现柱体自动变窄,当前屏幕内的柱体个数也会随着发生变化,我项目中编写的代码是到120个柱体便会出现这种情况。(详情请见下图)刚开始百思不得其解其解,我在程序中未设置过120这个值啊,难道是helloChart作者设计的?
可以看到在超过120多个柱体后,柱体的宽度在渐渐的变窄,原本设置的一屏六个柱体,慢慢也变得多了起来。如果添加的柱体越来越多,柱体会越来越窄,当然不符合需求了。于是开始寻求解决办法。
在看了一堆博客和各种评论后也始终没有找到解决办法,只能自己慢慢来,无意之中发现了一个写helloChart常用API介绍的文章,于是按自己的理解进行尝试,慢慢的终于解决了,先上一部分关键代码吧!需要其他代码请至文末点击下载链接进行下载。这是源代码中相关的柱体配置好后需要调用的方法。
//设置图表的相关配置信息
private void setColumnConfig(int currentNum) {
/*===== 坐标轴相关设置 =====*/
Axis axisX = new Axis(axisValues);//声明X轴实例
Axis axisY = new Axis();////声明Y轴实例
//初始化X轴
axisX.hasTiltedLabels();//设置斜体标签
axisX.setHasTiltedLabels(true);
axisX.setMaxLabelChars(6);//设置标签与坐标轴的距离
axisX.setAutoGenerated(true);//自动产生标签
//初始化Y轴
axisY.setName("能量值");//设置竖轴名称
axisY.setHasLines(true);
axisY.setLineColor(Color.BLACK);
axisY.setHasTiltedLabels(true);
axisY.setAutoGenerated(true);
mColumnChartData.setFillRatio(0.66f);
mColumnChartData.setAxisXBottom(axisX); //设置横轴
mColumnChartData.setAxisYLeft(axisY); //设置竖轴
mColumnChartView.setInteractive(true);//设置图表是可以交互的(拖拽,缩放等效果的前提)
mColumnChartView.setMaxZoom(currentNum/6+66);//按照柱体数量增加缩放次数
mColumnChartView.setColumnChartData(mColumnChartData);
//下面的代码放在setColumnChartData之前是无法得到有效执行的
Viewport v = new Viewport(mColumnChartView.getMaximumViewport());
v.top = 105;
v.bottom= 0;
mColumnChartView.setMaximumViewport(v);
v.left= currentNum-7;//从最右边最新的数据开始进行显示
v.right=currentNum;
mColumnChartView.setCurrentViewport(v);
}
最终的实现结果如下:
分析:最关键的就是
mColumnChartView.setMaxZoom(currentNum/6+66);
这行代码了,其中currentNum,是我当前添加的柱体个数,通过这句话,我动态的设置了hellochart的缩放倍数,因此能够实现柱体再多,也能按之前设置的宽度显示,没有这句话就会出现上述的bug,终于正常实现需求了!真是开心!!!
还有个需要给大家补充的小窍门就是
axisX.setAutoGenerated(true);
这句代码了,因为在使用时无法查看具体的柱体个数不是我定义的X轴标签,利用这行代码可以自动产生标签,以便于查看柱体个数,若程序调试成功,可将其注释掉,便能显示我需要的柱体生成时间了作为x轴的标签了。
需要源码的朋友可以去我的github上下载源码:https://github.com/jiwanging/hellochartDemo.git