当前位置: 首页 > 线上学习 > 技术文章 > 开源一个Android自定义图表库

开源一个Android自定义图表库

来源:汇众教育 编辑:小汇 2018-06-19 1331

摘要:项目中有一些图表需求,这些图表库功能很强大,图表种类应有尽有,是不错的选择。于是自己尝试写了一个图表库,使用起来非常方便,注释清晰,后期扩展性强。


转载请标明出处: https://blog.csdn.net/xmxkf/article/details/80690993 

本文出自:【openXu的博客】



  项目中有一些图表需求,一开始尝试使用一些开源的图表库,这些图表库功能很强大,图表种类应有尽有,是不错的选择。但是这些类库使用起来通常需要大量的设置,对于项目风格不能很好的贴合。于是自己尝试写了一个图表库,使用起来非常方便,注释清晰,后期扩展性强。

类库接入

build.gradle中添加依赖

     implementation 'com.openxu.viewlib:OXViewLib:<new version>'1

其中<new version>替换为最新版本,版本查看OXChart

使用示例

1、南丁格尔玫瑰图 NightingaleRoseChart

      南丁格尔玫瑰图

<com.openxu.cview.chart.rosechart.NightingaleRoseChart    android:id="@+id/roseChartSmall"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>1234
NightingaleRoseChart roseChartSmall = (NightingaleRoseChart)findViewById(R.id.roseChartSmall);
roseChartSmall.setShowChartLable(true);    //是否在图表上显示指示lableroseChartSmall.setShowChartNum(false);     //是否在图表上显示指示numroseChartSmall.setShowNumTouched(false);   //点击显示数量roseChartSmall.setShowRightNum(true);      //右侧显示数量roseList.add(new RoseBean(10, "数据1"));
roseList.add(new RoseBean(13, "数据2"));
roseList.add(new RoseBean(31, "数据3"));
roseList.add(new RoseBean(8, "数据4"));
roseList.add(new RoseBean(21, "数据5"));//参数1:数据对象class, 参数2:数量属性字段名称, 参数3:名称属性字段名称, 参数4:数据集合roseChartSmall.setData(RoseBean.class, "count", "ClassName", roseList);
roseChartSmall.setLoading(false);//是否正在加载,数据加载完毕后置为false12345678910111213


2、占比饼状图表 PieChartLayout

      占比饼状图表

<com.openxu.cview.chart.piechart.PieChartLayout   android:id="@+id/pieChart1"
   android:layout_width="match_parent"
   android:layout_height="180dp"
   android:layout_centerVertical="true"
   android:paddingRight="10dp"
   android:background="#ffffff"
   android:orientation="horizontal">
   <com.openxu.cview.chart.piechart.PieChart       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_weight="1" />
   <com.openxu.cview.chart.piechart.PieChartLableView       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_weight="2" /></com.openxu.cview.chart.piechart.PieChartLayout>1234567891011121314151617
 PieChartLayout pieChart1 = (PieChartLayout)findViewById(R.id.pieChart1);/*
 * 圆环宽度
 * ringWidth > 0 :空心圆环,内环为白色,可以在内环中绘制字
 * ringWidth <=0 :实心
 */pieChart1.setRingWidth(DensityUtil.dip2px(this, 15));pieChart1.setLineLenth(DensityUtil.dip2px(this, 8)); // //指示线长度pieChart1.setTagModul(PieChartLayout.TAG_MODUL.MODUL_CHART);       //在扇形图上显示tagpieChart1.setDebug(false);pieChart1.setLoading(true);//请求数据
List<PieChartBean> datalist = new ArrayList<>();datalist.add(new PieChartBean(20, "理发屋"));datalist.add(new PieChartBean(20, "KTV"));//显示在中间的lable
List<ChartLable> tableList = new ArrayList<>();tableList.add(new ChartLable("建筑", DensityUtil.sp2px(this, 12), getResources().getColor(R.color.text_color_light_gray)));tableList.add(new ChartLable("性质", DensityUtil.sp2px(this, 12), getResources().getColor(R.color.text_color_light_gray)));pieChart1.setLoading(false);//参数1:数据类型   参数2:数量字段名称   参数3:名称字段   参数4:数据集合   参数5:lable集合
pieChart1.setChartData(PieChartBean.class, "Numner", "Name",datalist ,tableList);12345678910111213141516171819202122


3、进度环形图 ProgressPieChart

      进度环形图

<com.openxu.cview.chart.ProgressPieChart    android:id="@+id/chart1"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:background="#ffffff"/>12345
ProgressPieChart chart1 = (ProgressPieChart)findViewById(R.id.chart1);chart1.setProSize(DensityUtil.dip2px(this, 5));  //圆环宽度chart1.setDebug(false);chart1.setLoading(false);chart1.setProColor(Color.parseColor("#ff0000"));  //进度颜色//环形中间显示的lable
List<ChartLable> lables = new ArrayList<>();lables.add(new ChartLable("60.0%",
        DensityUtil.sp2px(this, 12), Color.parseColor("#ff0000")));lables.add(new ChartLable("完成率",
        DensityUtil.sp2px(this, 8), getResources().getColor(R.color.text_color_light_gray)));chart1.setData(100, 60, lables);123456789101112


4、纵向柱状图 BarVerticalChart

      纵向柱状图

<com.openxu.cview.chart.barchart.BarVerticalChart    android:id="@+id/chart1"
    android:layout_width="match_parent"
    android:layout_height="250dip"
    android:background="#ffffff"
    android:padding="10dp"/>123456
BarVerticalChart chart1 = (BarVerticalChart)findViewById(R.id.chart1);
chart1.setBarSpace(DensityUtil.dip2px(this, 1));  //双柱间距chart1.setBarItemSpace(DensityUtil.dip2px(this, 20));  //柱间距chart1.setDebug(false);
chart1.setBarNum(2);   //一组柱子数量chart1.setBarColor(new int[]{Color.parseColor("#5F93E7"),Color.parseColor("#F28D02")});//X轴List<String> strXList = new ArrayList<>();//柱状图数据List<List<BarBean>> dataList = new ArrayList<>();for(int i = 0; i<5; i++){    //此集合为柱状图上一条数据,集合中包含几个实体就是几个柱子
    List<BarBean> list = new ArrayList<>();    list.add(new BarBean(random.nextInt(30), "接入系统"));    list.add(new BarBean(random.nextInt(20), "审核信息"));
    dataList.add(list);
    strXList.add((i+1)+"月");
}
chart1.setLoading(false);
chart1.setData(dataList, strXList);1234567891011121314151617181920


5、横向柱状图 BarHorizontalChart

      横向柱状图

<com.openxu.cview.chart.barchart.BarHorizontalChart    android:id="@+id/chart1"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:layout_marginTop="20dp"
    android:background="#ffffff"
    android:padding="10dip"/>1234567
 BarHorizontalChart chart1 = (BarHorizontalChart)findViewById(R.id.chart1);
chart1.setBarSpace(DensityUtil.dip2px(this, 1));  //双柱间距chart1.setBarItemSpace(DensityUtil.dip2px(this, 20));  //柱间距chart1.setDebug(false);
chart1.setBarNum(3);
chart1.setBarColor(new int[]{Color.parseColor("#5F93E7"),Color.parseColor("#F28D02")});//X轴List<String> strXList = new ArrayList<>();//柱状图数据List<List<BarBean>> dataList = new ArrayList<>();for(int i = 0; i<100; i++){    //此集合为柱状图上一条数据,集合中包含几个实体就是几个柱子
    List<BarBean> list = new ArrayList<>();    list.add(new BarBean(random.nextInt(30), "lable1"));    list.add(new BarBean(random.nextInt(20), "lable2"));
    dataList.add(list);
    strXList.add((i+1)+"月");
}
chart1.setLoading(false);
chart1.setData(dataList, strXList);1234567891011121314151617181920

欢迎关注,希望在这里有你想要的,博主会持续更新高(di)质(ji)量(shu)的文章和大家交流学习

喜欢请点赞,no爱请勿喷~O(∩_∩)O谢谢




相关文章

关注我们

  • 官方微信

    咨询热线

    010-82826482 校区地址
  • 官方微博

    建议与投诉

    400-0065-789 联系我们
  • 线上直播平台