HelloChart应用之柱状图--关于需要动态滑动显示大量柱体遇到的问题

最新推荐文章于 2024-08-08 07:48:50 发布

Jiwanging

最新推荐文章于 2024-08-08 07:48:50 发布

阅读量1.3k

点赞数 1

分类专栏： android

本文链接：https://blog.csdn.net/znlubin/article/details/82528450

版权

android 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

最近项目上需要用到一个图表的绘制控件，于是选用了网络上较为常用的helloChart，项目的需求简要概述就是收到一条消息，将消息中的携带的数据更新为界面上的柱状图，并且当前屏幕显示最新的几条数据，往后翻动可以查看历史数据，柱体的x轴标签为柱体的接收时间。
看似很容易实现吧，实际上确实在查阅资料后确实能利用hello很快的编写出来，但是…遇到了一个bug，查阅了很多资料也没有解决掉，后来还是自己慢慢研究了两天才解决掉（大神也可以觉得是小弟太菜导致的），具体是什么bug呢？就是刚开始接收数据很好，但是当数据一多，到了某一个临界点，就会出现柱体自动变窄，当前屏幕内的柱体个数也会随着发生变化，我项目中编写的代码是到120个柱体便会出现这种情况。（详情请见下图）刚开始百思不得其解其解，我在程序中未设置过120这个值啊，难道是helloChart作者设计的？

出现bug的情况

可以看到在超过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);

    }

最终的实现结果如下：
解决bug后效果
分析：最关键的就是

mColumnChartView.setMaxZoom(currentNum/6+66);

这行代码了，其中currentNum，是我当前添加的柱体个数，通过这句话，我动态的设置了hellochart的缩放倍数，因此能够实现柱体再多，也能按之前设置的宽度显示，没有这句话就会出现上述的bug，终于正常实现需求了！真是开心！！！
还有个需要给大家补充的小窍门就是

axisX.setAutoGenerated(true);

这句代码了，因为在使用时无法查看具体的柱体个数不是我定义的X轴标签，利用这行代码可以自动产生标签,以便于查看柱体个数，若程序调试成功，可将其注释掉，便能显示我需要的柱体生成时间了作为x轴的标签了。
需要源码的朋友可以去我的github上下载源码：https://github.com/jiwanging/hellochartDemo.git