个人Android进阶之旅------>【强力推荐】Android开源图表库XCL-Charts版本发布及展现页

时间  2019-11-09 标签 个人 android 进阶 之旅 强力推荐 开源 图表 xcl charts 版本 发布 展现

         由于要作图表相关的应用，后来百度发现了一个很好的Android开源图表库(XCL-Charts is a free charting library for Android platform.)css

                     下面内容转载于：http://blog.csdn.net/xcl168/article/details/29675613，详细介绍了XCL-Charts的展现内容。html

 

====================================================================================XCL-Charts V2.4java

        Android开源图表库(XCL-Charts is a free charting library for Android platform.)git

        XCL-Charts基于原生的Canvas来绘制各类图表,在设计时，尽可能在保证开发效率的同时，给使用者提供足够多的定制化能力。github

所以使用简便,同时具备至关灵活的定制能力。
         目前支持(3D/非3D,背向式/横向/竖向)柱形图(Bar Chart)、3D/非3D饼图(Pie Chart)、堆叠图(Stacked Bar Chart)、面积图(Area Chart)、
 折线图(Line Chart)、曲线图(Spline Chart)、环形图(Dount Chart)、南丁格尔玫瑰图(Rose Chart)、仪表盘(Dial Chart)、刻度盘(Gauge Chart)、 雷达图(Radar Chart)、圆形图(Circle Chart)、弧线比较图、范围条形图(RangeBar Chart)、气泡图(Bubble Chart)、散点图(Scatter Chart)、玫瑰风向图(Wind Rose)、漏斗图(Funnel Chart) 、象限图等图表。web

        其它特性还包括支持手势缩放、图表滑动、点击交互、多图叠加、图表批注、动画效果、多XY轴显示、轴线任意方位显示、动态图例、图表参考线、柱图刻度居中风格切换、混合图表及同数据源图表类型切换等。算法

Licensecanvas

      采用Apache v2 License开源协议。app

GitHub上的代码托管地址:ide

 https://github.com/xcltapestry/XCL-Charts

  QQ群: 374780627

 开源中国的收录地址: http://www.oschina.net/p/xcl-charts


   为何会有这个库?

         之因此有这个库，是由于前段时间学习Canvas时研究了一下各类图的实现方式，后面想一想或许能够本身整理成一个图表库。 就利用下班时间敲代码,造成了如今这个图表库XCL-Charts。很麻烦，由于期间我还有别的项目要写。不过总算整理得能跑了。 

        因此XCL-Charts对我来讲是个纯兴趣项目，纯练手用的，我不是搞Android的，因此在工做中也用不到这个。 但没想到的是，到今天为止，能作到如今这种程度，已大大出乎我本身的预料了。只能说，有时写代码是有惯性的，停都停不下来。


   关于库的一些东西:

    1.  基于原生的库

         以前看好多人是用Webview调用js库来画图，而XCL-Charts是直接利用原生Canvas 相关函数画出图形，固然，这各有好处，

         但基于原生的在速度和可操做性仍是有优点的，并且也无须你再去对web作啥研究。

    2 .  开放，自由，高定制性的库

                     XCL-Chart尽可能把图的绘制逻辑封装在类中，而把绘制相关的各个基础元素开放出来，若是用过的人会发现，

           我分门别类开放了大量的Paint画笔类及其它函数， 供使用者去定制图的各类属性功能...... 

                     结果出现了这种状况：不少人问怎么找不到改文字大小的函数，改颜色的函数......之类问题。

                      亲们，没发现我把Android强大的Paint类都已经开放给大家了？里面有着大量现成的这些函数，有现成的我何须还要再封装一遍呢？

            同时我都把Paint类开放给大家了， 就至关于提供了无限的改造性。

打开枷锁，把那些封装弱弱的库丢一边去吧。 你要习惯拥有这么大的自由度， 自由很美好。

       3.  库的设计想法

             有网友曾经问过我一个问题, 这么多图，这么多代码，怎么没有看到继承哪一个view? 只传了个draw中的canvas进来？？

                        是的，确实库只传了一个canvas进来，那么多代码都是围着这个canvas来作的。 

                        由于我更偏向于作一个基类库，一个产生图表的组件库。

           我认为绘图与view 应当作适当的隔离，让你们各自作各家的事，而不是混在一块儿纠缠不清。 

           若是图表须要做交互，响应一些view的事件，图库提供一些相关的接口给view去调用，或经过一些技巧再去相互组合，这样更加灵活。

           并且现有方式在处理混合图时，再多的图均可以调用图类，在同一块canvas上一层层的画。 对那种一个view对应一种图类型封装的形式真不太感冒。                       

      4. 库如今支持多少种图

               今天加函数时数了数，目前大大小小有18种图。惊讶 。不知不觉弄出这么多种类的图出来了。

      5. 功能需求

                特殊功能需求，要是能本身动手的，你们本身动手吧。我一般只加本身认为有意思的东东，再说精力实在也有限。

      6.bug，代码抽取

                 发现bug,欢迎动手提交修正。  

                 但对于只知道从库里抽取代码出来人。不要光索取，请记得还有回馈这回事。

       7.开源有没有用？

                 开源也有段时间了，到底有没有用呢？ 结论是有用，能收集到一堆的需求，五花八门，如今的app真是为了界面无所不用。 参考这些需求，能进一步

         完善这个项目。 但暂时就真正用改bug,加功能等方式参与进来的，屈指可数。因此就敲代码这个活而言，开源对个人帮助有，

         但没想象中的那么大。 不过无所谓了，这玩意原本就是本身图写个爽。

                对于真正有用代码方式参与的，我都有在代码和Demo的about中有写上他们的网名，确实很感谢他们。 还有一群兄弟有些由于各类缘由

         没实际参与代码编写， 不过他们用其它方式也算参与进来了，不少从开始到如今一直在关注，真的很不错。这也算是开源的另外一种收获了。

           

    Demo工程中附带的部份图表例子:  

   

  

 



           


                       


       


   

   

   

    

   

      

     

      

   

      

       

  

 

   

     

        

     

  



====================================================================================

 

XCL-Charts图表库简要教程及常见问题

 

PS：如下内容转载于：http://blog.csdn.net/xcl168/article/details/42318669

 

这个Andriod图表库项目从开始至如今，热情消耗几近殆尽。还好已基本实现我想作的那些东西。趁还剩下点兴趣，把一些点很是简单的概括一下。

      

所支持的图表类型:

   基类                            图表名称

   BarChart                横/竖向柱形图及背向式柱形图

   BarChart3D           横/竖向3D柱形图

   StackBarChart      横/竖向堆叠式柱形图

   RangeBarChart    范围柱形图  

    LineChart        折线图

   SplineChart      曲线图

   AreaChart         区域图(折线/平滑)

   PieChart           饼图

   PieChart3D     3D饼图

   DountChart      环形图

   ArcLineChart   弧线比较图

   RoseChart       南丁格尔玫瑰图/玫瑰风向图

   FunnelChart    漏斗图

   CircleChart      圆/半圆图

   BubbleChart    气泡图

   RadarChart     雷达图

   GaugeChart    刻度盘

   ScatterChart    散点图

   DialChart         仪表盘


 




 主要组成(附注:不少命名都是我本身乱命名的，专业的不用太较真，能实现效果就好。)

图表范围:

    即图中蓝色渐变背景所在的范围。

   设置函数：

   setChartRange(float width, float height)
   setChartRange(float startX, float startY, float width, float height)    

   

绘图区:

   图中黄色部分的范围。

   可用下面函数设置绘图区与整个图表范围的缩收间距：

   setPadding(float left, float top, float right, float bottom)   

   getPlotArea()

   如数据量太多，屏幕显示不下时，可经过getPlotArea().extWidth()来扩大范围，经过手势滑动来查看。

    

标题栏:

   分主标题与子标题

   部份函数：

   setTitle(java.lang.String title)
   addSubtitle(java.lang.String subtitle)


坐标轴:

轴分两种数据轴与分类轴，轴能够显示在上下左右中位置，或依数据值显示在任意位置。

   引用函数：

  getDataAxis()
  getCategoryAxis()


轴标题:

     可设置上下底部三个部份的标题

     引用函数：

getAxisTitle()


图例:

   可设置成行或列模式，并显示在图表中任意位置。

   部份函数：

    getPlotLegend()


动态图例:

   能够作各类图表说明的补充。

  引用函数:

   getDyLegend()

    

定制线

   用于作各类标示或分界线。

   设置函数:

   setCustomLines()


图批注

   用于在显示时，在图表指定元素上特别标识时使用。

   设置函数:

   setAnchorDataPoint()


焦点框

   在点击选中时，标识出当前选中项。

   激活函数:

    showClikedFocus();


焦点线(动态线):

  用于在点击时显示相关的十字线等其它标识线。

   showDyLine() 激活。

   getDyLine()   获取相关对象。


图表缩放:

   disableScale()  禁用

   enabledScale() 启用


手势滑动

   disablePanMode() 禁用

   enabledPanMode() 启用

   setPlotPanMode() 设置滑动模式(上下/左右/任意方向)


常见问题:

 1.  没找到设置颜色的函数.

       找到相关子类的画笔，自行设置颜色便可。

      如设置轴线的颜色: 

                chart.getDataAxis().getAxisPaint().setColor(Color.BLUE);


 2. 字体大小没有随着屏幕大小变化

      自行依屏幕大小设置相关子类画笔的字体大小便可.

      如，设置图表主标题字体大小:

           chart.getPlotTitle().getTitlePaint().setTextSize(22);


 3. 隐藏轴线或轴上的刻度/标签

          以数据轴为例:

       chart.getDataAxis().hideAxisLine();
chart.getDataAxis().hideTickMarks();
chart.getDataAxis().hideAxisLabels();

         分类轴同理.


4. 如何设置轴或图表对象上的显示格式:

          图库有提供相关回调函数，自行实现便可.

          一个简单的例子代码:           

[java] view plain copy print ? 在CODE上查看代码片 派生到个人代码片
  1. //定义数据轴标签显示格式   
  2.             chart.getDataAxis().setLabelFormatter(new IFormatterTextCallBack(){  
  3.       
  4.                 @Override  
  5.                 public String textFormatter(String value) {  
  6.                     // TODO Auto-generated method stub         
  7.                     Double tmp = Double.parseDouble(value);  
  8.                     DecimalFormat df=new DecimalFormat("#0");  
  9.                     String label = df.format(tmp).toString();                 
  10.                     return (label);  
  11.                 }  
  12.                   
  13.             });  

     其它依此类推。


  5. 若是从Activity向view中的图传值，刷新

       一个简单的同时刷新两个曲线图的例子:          

[java] view plain copy print ? 在CODE上查看代码片 派生到个人代码片
  1. Activity:  
  2.    chartView.refreshChart(linePoint1, linePoint2);        
  3. View:  
  4.    public void refreshChart( List<PointD> linePoint1,  
  5.                              List<PointD> linePoint2){  
  6.           
  7.         dataSeries1.setLineDataSet(linePoint1);  
  8.         dataSeries2.setLineDataSet(linePoint2);  
  9.         this.invalidate();  
  10.     }  

         

  6. 双Y轴怎么处理

      多图叠加便可。参考下Demo中的混合图例子。


  7. 须要柱形图与折线图合在一块儿显示 

    多图叠加便可。参考下Demo中的混合图例子。


 8. 须要特别标识某一个点或值

    使用图批注便可。


9. 须要显示这种或那种动画效果

    可参考Demo中一些例子的动画，如渐显，由远及近等来本身实现，也可调用第三方库来作。


10. 可否设置柱形宽度

   柱形大小是依绘图区宽度及柱形个数自动设置的，不能显式指定。


11. 图表移出绘图区范围不见了。

    目前是任意移动，可以使用hscrollview来作。可参考相关例子

  

12. 数据量很大，滑动时速度慢

      如不需点击和缩放效果，可以使用hscrollview来作，不然可以使用disableHighPrecision()来提升性能。

   但这个函数饼图类图表慎用。


13. 怎么在Activity中，获得图表的点击对象和相关值

     可参考Demo,有相关演示。


14. 温度计轴/不等距轴怎么作?

     XCL-Charts目前不支持，但幸亏大S写了一个经典实现，在网友图表库目录下。


15. 区域图有没渐变效果。

      有，可指定渐变起始和结束色，从上到下或从左至右渐变。


16. 图例要显示在下方或左右。

     有相关函数，直接设置便可。Demo中有相关例子。


17. 有个轴要显示在顶部

    有相关属性，直接设置便可。Demo中有相关例子。


18. 折线图左右滑动的例子

     两个View,一个view用于显示Y轴，图标题，图例，另外一个用于显示scrollview及图表。


 19. Y轴标题显示在顶部,X轴标题显示在右下

     两种方式，要么参考Demo中“竖向定制线柱形图"例子的作法。

      要么在view的render()中，经过 chart.getPlotArea().getLeft()及chart.getPlotArea().getTop()等函数获得相关坐标，

     直接drawText便可。


 20. 点击时选中不够灵敏，怎么办？

    利用extPointClickRange(10); 扩大选中范围便可。


21.手势移动时，轴标签已移出绘图区范围了仍显示。

          有提供相关函数来控制，移出后的显示范围，以X方向为例:

                     //平移时收缩下
float margin = DensityUtil.dip2px(getContext(), 20);
chart.setXTickMarksOffsetMargin(margin);

      Y方向依上例类推。


22. 饼图标签折线从扇区边上起始延伸出来。

       直接设置折线线起始点便可。chart.getLabelBrokenLine().setBrokenStartPoint(10f); 值为0-10的比例。


23. 饼图标签和线与扇区要相同颜色.

     chart.syncLabelLineColor()便可。


24. 饼图数据传进去有空隙或不显示？

   Java的float和double类型在计算时会有偏差。形成圆心角合计小于或超出360度。

    建议调用库中的Mathhelper类中的相关函数来作计算处理。


25. 饼图标签太密，看不清。

        太密集的标签不重叠的处理算法还没兴趣去研究, 但库已提供了5,6种标签显示风格。建议不一样扇区依角大小错开，

  并不一样扇区指定不一样标签显示风格来处理。


26.我须要多图同步，并定时刷新数据。

    Demo中有，可参考双线图的例子。


27. 从哪能够下载源码

     https://github.com/xcltapestry/XCL-Charts


28. 下载后怎么这么多叉。

    从新导入一下 xclcharts.jar便可。


29.怎么有两个工程。

     xcl-charts是生成jar的工程

     xcl-charts-demo 是用来演示的工程。


30 怎么在xml中放图表,在ChartsActivity中全是代码生成的。

    亲，还有其它不少例子是将view放在xml中的。别老盯着ChartsActivity一个。


31. 线上的点或线太大或过小，怎么调？

   有相关函数设置半径

       /设置线上点的大小
       line6.setDotRadius(15)
//设置线的粗线
line6.getLinePaint().setStrokeWidth(5);


32. 多条线在一块儿时，标签重叠。

    数据源是无法管控的，能够给不一样线设置不一样风格和旋转角度，标签的位置也是

    能够调的，能够有些显示在上面，有些显示在点下面。


33.怎么一下占这么多内存。

   为了方面挂演示例子,仅ChartsActivity就一次生成了40多个view。你单挑试试，虽然由于定制性强，因此选项多，

但哥们当初也用了很多优化内存手段的。


34.细类好多。

   嗯，由于我野心比较大，封装好零件，之后无任想加什么图，只需关注图自己的实现逻辑便可。

   哥搭的是一套Android绘图的基础平台，而不是仅仅只画的某一类图。

   再说一句，用Java写代码就啰嗦，我如今很喜欢Golang。


35.群主，库的设计思想是什么？

    不知道怎么回答。 我只想到几个，图效果要炫，定制性要高，调用要灵活，对复杂图能经过图组合叠加来实现。

    全部零部件都要封装好，这样我之后加图方便。


36.这库的文档在哪？

     doc目录下有Javadoc可查函数和相关类信息。其它直接看Demo吧，目前有40几个例子，你觉得我真很闲？


37. 群主，请教一个aChartEngine问题

    抱歉，不会也没使用过aChartEngine。曾浏览过源码，很是经典，但不曾看懂过。


38. 帮看看MPAndroidChart的问题

        抱歉，没研究过，但看过MPAndroidChart demo. 而后，我以为我作得不少方面比这个更好。

    至少图表表现方法和组合要更灵活，图表种类也更多。


39. 我只想抽取你的部份代码。

    滚。


40. 你不是要收手吗？

   是的，说过不少次收手了。


41.柱形不想要渐变效果

     自行设置BarStyle便可

     chart.getBar().setBarStyle(XEnum.BarStyle.OUTLINE);


MAIL: xcl_168@aliyun.com

BLOG: http://blog.csdn.net/xcl168

联系我们 沪ICP备13005482号-10