自定义的图表DiagramView,柱状图,条形图,线型图

最近不忙,写了一个自定义图表的view,使用超级简单,只需要实现适配器就好。

下面讲解DiagramView的使用

先上图:
diagramview-1.png
diagramview-2.png
diagramview-3.png
diagramview-4.png
diagramview-5.png
diagramview-6.png

通过上面的图片可以看到效果很多,

  • 设置背景色,
  • 设置上下左右间距 app:paddingLeft="@dimen/dp_10" app:paddingRight="@dimen/dp_10" app:paddingTop="@dimen/dp_10" app:paddingBottom="@dimen/dp_10"
  • 设置各轴的颜色,每个轴都可单独设置 app:xAxisColor="@color/lust" app:yAxisColor="@color/lust" app:rightYAxisColor="@color/lust"
  • 设置每一个轴旁边的文字,及其颜色和大小,都可单独设置 app:rightYAxisTextColor="@color/romance" app:rightYAxisTextSize="20" app:yAxisTextSize="20" app:xAxisTextSize="20" app:xAxisTextColor="@color/romance" app:yAxisTextColor="@color/romance"
  • 设置各轴是否带箭头 app:hasArrows="false"
  • 设置是否在轴上留余 app:xAxisSurplus="@dimen/dp_10" app:yAxisSurplus="@dimen/dp_10"
  • 设置横轴上的基准线是实线还是虚线 app:yAxisCellLine="fullLine"
  • 设置是否显示左右两侧竖轴 app:yAxisVisible="invisible"
  • 可以画柱状图和线形图,以及其颜色
  • 可以同时画多个柱状图和线形图

使用说明

  • 先在项目最外层的build.gradle中的allprojects加入代码maven { url 'https://jitpack.io' },如下
allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}
  • 然后在app下的build.gralde下的dependencies中加入以来implementation 'com.github.tangqipeng:diagramview:1.0.1'
    至此配置已经完成
  • 在xml布局的父布局中加上xmlns:app="http://schemas.android.com/apk/res-auto"
    大体如下,还要加什么按照上面的来:
<com.tqp.diagramview.DiagramView
            android:id="@+id/diagramView"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_marginTop="@dimen/dp_10"
            app:paddingLeft="@dimen/dp_10"
            app:paddingRight="@dimen/dp_10"
            app:paddingTop="@dimen/dp_10"
            app:paddingBottom="@dimen/dp_10"
            app:yAxisTextSize="20"
            app:xAxisTextSize="20"
            app:hasArrows="false"
            app:rightYAxisTextColor="@color/romance"
            app:rightYAxisTextSize="20"
            app:xAxisTextColor="@color/romance"
            app:yAxisTextColor="@color/romance"
            android:background="@color/turkish_rose"/>
  • 接下来就是初始化了:
    DiagramView diagramView = findViewById(R.id.diagramView);
  • 然后就是使用适配器,只需要继承DiagramView.Adapter就可以了。
private static class LineOtherAdapter extends DiagramView.Adapter{

        /**
         * XcellBean只是一个对象,这是可变的,你用你自己的,传入的参数可以是List<T>也行,
         * 只是下面的配置由你自己设置好就行。
         * 我这里是List<List<T>>,是因为我这里是多组对比
         */
        private final List<List<XcellBean>> mBeanList;
        private final static int china_type = 0;
        private final static int usa_type = 1;

        public LineOtherAdapter(List<List<XcellBean>> beanList) {
            this.mBeanList = beanList;
        }

        /**
         * 对比的组数,
         * 如果你们只需要显示一组,你传入的参数是List<T>的话,你这里返回就写1,
         * 当然你也可以List<List<T>>,那下面就不用变了
         * @return
         */
        @Override
        public int getTypeCount() {
            return mBeanList.size();
        }

        /**
         * 每组数组的个数,这里实际上是x轴的单元数
         * @return
         */
        @Override
        public int getItemCount() {
            return mBeanList.get(0).size();
        }

        /**
         * y轴上标有数值的基准长度,上图中左侧的y轴每隔几小格就标记了一个文字,
         * 这里是返回有几个这样的标有文字的单元,那些没标数值的不要算,例如图1就是5格
         * @return
         */
        @Override
        public int getYAxleBaseCellNum() {
            return 10;
        }

        /**
         * 每一标有数值的单元格所代表的数值
         * @return
         */
        @Override
        public int getYAxleBaseCell() {
            return 10;
        }

        /**
         * 每一标有数值的单元格的数字所对应的文字
         * @param position
         * @return
         */
        @Override
        public String getYAxleBaseCellText(int position) {
            return getYAxleBaseCell() * (position + 1) + "";
        }

        /**
         * 每一个基准单元格又分为几格,如果不再分割则返回1
         * @return
         */
        @Override
        public int getYAxleBaseCellSegmentationNum() {
            return 5;
        }

        /**
         * 你区分的type,实际上就是对比的每组数组的标识,
         * 这里目前我好像漏掉了没啥用,但不影响显示,以后会完善
         * @param position
         * @return
         */
        @Override
        public int getItemViewType(int position) {
            return position;
        }

        /**
         * 按type区分,每一组的竖状图的颜色
         * @param type
         * @return
         */
        @Override
        public int getItemColor(int type) {
            if (type == china_type) {
                return R.color.havelock_blue;
            }else{
                return R.color.colorAccent;
            }
        }

        /**
         * x轴所标记的文字
         * @param position
         * @return
         */
        @Override
        public String getXAxisText(int position) {
            return mBeanList.get(0).get(position).getNian();
        }

        /**
         * x轴,每一组的竖状图的宽度,可以通过type来设置,如果都是一样宽,那就不需要区分
         * @param type
         * @return
         */
        @Override
        public float getItemWidth(int type) {
            return 50f;
        }

        /**
         * 按type区分,每一组的每一个x单元的竖状图的峰值,是有多高
         * @param type
         * @param position
         * @return
         */
        @Override
        public float getItemHigh(int type, int position) {
            return mBeanList.get(type).get(position).getRenkou();
        }

        /**
         * 这里是是否显示右侧的y轴,适用于画点连线的图,默认是false,
         * 这个方法不一定需要实现,如果启动右侧轴的话就实现,并返回true
         * @return
         */
        @Override
        public boolean openRightYAxle() {
            return true;
        }

        /**
         * 右侧轴的标有数值的基本单元分为几格
         * @return
         */
        @Override
        public int getRightYAxleBaseCellNum() {
            return 6;
        }

        /**
         * 右侧轴的标有数值的每一个基本单元所代表的数值
         * @return
         */
        @Override
        public int getRightYAxleBaseCell() {
            return 10;
        }

        /**
         * 右侧轴的标有数值的每一个基本单元对应的文字
         * @return
         */
        @Override
        public String getRightYAxleBaseCellText(int position) {
            return getRightYAxleBaseCell() * (position + 1) +"%";
        }

        /**
         * 右侧轴的标有数值的每一个基本单元是否再分,不分则返回1
         * @return
         */
        @Override
        public int getRightYAxleBaseCellSegmentationNum() {
            return 5;
        }

        /**
         * 右侧轴标有数值的基本单元所对应的文字
         * @param type
         * @param position
         * @return
         */
        @Override
        public float getRightCellValue(int type, int position) {
            return mBeanList.get(type).get(position).getRate();
        }

        /**
         * 线形图根据type来区分颜色,如果只有一组那就没必要区分了
         * @param type
         * @return
         */
        @Override
        public int getRightItemColor(int type) {
            if (type == china_type) {
                return R.color.lust;
            }else{
                return R.color.sunglow;
            }
        }
    }

上面的方法中有些方法可以不需要实现,根据你个人的需要来写吧,使用起来很简单。

List<List<XcellBean>> cellBeanList = new ArrayList<>();
cellBeanList.add(getList1());
cellBeanList.add(getList2());
LineOtherAdapter adapter = new LineOtherAdapter(cellBeanList);
diagramView11.setAdapter(adapter);

这样便可现实了,当然我这里有数据,数据由你自己设置,XcellBean可以任由你定义。
如果哪位朋友觉得这里面有需求做不到你的要求,可以给我留言,我可以更新。
下面就是源码了,说到这里我本来想上传到外部仓库,供大家使用,但还需要学习一下,暂时先贴源码地址吧:
https://github.com/tangqipeng/diagramview
欢迎留言,有什么特殊的要求的,有没有现成的view的也可以告诉我,我实现了上传

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容