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

       这个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. 如何设置轴或图表对象上的显示格式:

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

          一个简单的例子代码:           

//定义数据轴标签显示格式chart.getDataAxis().setLabelFormatter(new IFormatterTextCallBack(){@Overridepublic String textFormatter(String value) {// TODO Auto-generated method stub		Double tmp = Double.parseDouble(value);DecimalFormat df=new DecimalFormat("#0");String label = df.format(tmp).toString();				return (label);}});
     其它依此类推。


  5. 如果从Activity向view中的图传值,刷新

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

Activity:chartView.refreshChart(linePoint1, linePoint2);		
View:public void refreshChart( List<PointD> linePoint1,List<PointD> linePoint2){dataSeries1.setLineDataSet(linePoint1);dataSeries2.setLineDataSet(linePoint2);this.invalidate();}

         要实在不懂,把chart类设为Public, 然后直接在Activity中更新值及调用view.refreshChart()来刷新图表.


  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);


42. 如何去掉柱子间的间隔    

      //柱子间无间隔
      chart2.getBar().setBarTickSpacePercent(1.5f);

      主要是设比例,1.5f只是个例子


43 Jar体积太大(现在有400多k),如何精简库?

        简单粗暴的方法如下:

               打开XCL-Charts工程,  找到org.xclcharts.chart目录,把你不需要的图表类型,统统删除掉就行了。放心,没有后遗症。 

       如果你还有耐心,你还可以去其它目录清除不必要的组件类。


44 Chart类与View的关系

         Chart只是个普通的Java类, View把Canvas传给它,然后Chart类作一系列的绘制动作。

   所以一个View理论上可以有无数个Chart.这些Chart类可以相互叠加,组合成各种各样的混合图。 

   这是与其它很多图库那种一个view对应一种Chart不同的地方.


45 Chart类怎么用在XML中

     Demo中有很多例子,请留意com.demo.xclcharts目录。


46. 图库没有想要的样式或能不能嵌入图片?

     自己找到相应的代码位置,去增加代码吧。 别指望啥都有。



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


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/57678.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Google Chart API 创建实时图表

实时图表可以实时显示数据。这意味着数据将永久更新以始终显示当前图表。要创建实时图表&#xff0c;我们使用JavaScript和Google Chart API。 这些实时图表通常用于仪表板中&#xff0c;以显示例如温度或价格的变化情况。应用领域多样&#xff0c;它们看起来确实不错。你自己看…

利用ARCGIS实现图片与excel中坐标点的匹配并绘图

一、背景 本次的实验完成的是坐标点文件与图片的匹配&#xff0c;已有的数据分别是点的坐标excel文件以及区域图片&#xff0c;来实现区域的绘制。 二、步骤 1、首先将坐标点excel文件导入ARCGIS中进行展点&#xff0c;数据的格式如下&#xff1a; 2、点击ARCGIS界面中的文件…

chatgpt赋能Python-python_plot坐标轴

Python绘图库中坐标轴的设置 介绍 Python是一种简单易学&#xff0c;功能强大的编程语言。它被广泛用于数据科学和可视化领域。Python绘图库中的坐标轴设置可以让我们更好地展示数据&#xff0c;让我们更轻松地理解数据。本篇文章将介绍Python绘图库中坐标轴设置的方法和技巧…

Unity数据可视化图表插件XCharts(折线图、柱状图、饼图、雷达图、散点图、热力图、热力图、仪表盘、环形图、极坐标、水位图等等)

文章目录 一、前言二、Unity数据可视化图表插件&#xff1a;XCharts1、运行效果2、文档教程 三、结束语 一、前言 点关注不迷路&#xff0c;持续输出Unity干货文章。 嗨&#xff0c;大家好&#xff0c;我是新发。 今天&#xff0c;我在GitHub上看到一个屌炸天的Unity插件&…

pyecharts0.5.x制作含地图的数据看板

引言 pyecharts作为Python的数据可视化包&#xff0c;其强大的功能不言而喻&#xff0c;Python Echart&#xff0c;想想就觉得牛叉。目前pyecharts有两个大的版本&#xff0c;一个是0.5.x版本的&#xff0c;一个是1.0以后版本&#xff0c;而且这两个版本差别很大。如果是有的…

antv/g2图表tooltip自定义并展示坐标之外的数据

首先使用itemTpl自定义tooltip 效果是这样的tooltip展示坐标之外的数据 感觉Antv文档很不详细&#xff0c;写这块时找了好久才找到方法&#xff0c;现在记一下&#xff0c;方便今后的观看和其他遇到此问题的同学解决办法。 itemTpl this.chart.tooltip({showCrosshairs: true,…

pyecharts源码解读(13)图表类包charts之组合图表:直角坐标系(网格布局)Grid

当前pyecharts的版本为1.9.0。 概述 pyecharts/charts/composite_charts/包中的四个模块分别定义了组合图表类&#xff0c;其中pyecharts/charts/composite_charts/grid.py模块只定义了网格布局类Grid。 Grid类继承自图表基类Base&#xff0c;作用为在一个echarts实例中利用…

宇宙中大数字

1、高德纳箭头 2、葛力函数 如果脑子里面装一个葛里恒数&#xff0c;脑子就成了黑洞了。 后来人们研究出tree3

CCF-CSP 小中大 C语言

时间限制&#xff1a;0.1s 空间限制&#xff1a;512.0MB #include<stdio.h> int main() { int n,max,min,mid,midd,i; scanf("%d",&n); int a[n]; for(i0;i<n;i) {scanf("%d",&a[i]);} //输入 if(a[0]>a[n-1]){maxa[0];mina[n-1];} e…

redis中大Value问题的解决

我们日常在使用redis的时候, 有时会碰到大Value的问题, 超级大的一个Value存到redis中去, 这样其实不好, 我们可以把value进行压缩. 下面我们使用java自带的压缩, 对字符串进行压缩. /*** 使用gzip压缩字符串** param originString 要压缩的字符串* return 压缩后的字符串*/…

java中大素数生成算法

目前的公开密钥 算法大部分基于大整数分解、有限域上的离散对数问题和椭 圆曲线上的离散对数问题&#xff0c;这些数学难题的构建大部分都需 要生成一种超大的素数&#xff0c;尤其在经典的RSA算法中&#xff0c;生成的素数的质量对系统的安全性有很大的影响。 1.原理 费马小…

解决js中大数的问题

大数的理解: 就是由于数字太大了,然后js解析不了,不认识. 就比如实际生活中,在双11的时候,我们知道淘宝一夜之间总购买量肯定是一个很大很大的金额,当我们前端碰到一个非常大的数字的时候,js可能会解析不了. JS中的安全数字: > Number.MAX_SAFE_INTEGER 可以查看js中的…

CSP 201903-1 小中大

题目链接&#xff1a; 计算机软件能力认证考试系统http://118.190.20.162/view.page?gpidT89 【分析】主要学一下java的四舍五入&#xff0c;String,format("%.f", double&#xff09;&#xff1b; import java.util.Arrays; import java.util.Scanner;public cla…

CSP:小中大

试题编号&#xff1a;201903-1 试题名称&#xff1a;小中大 时间限制&#xff1a;1.0s 内存限制&#xff1a;512.0MB 思路&#xff1a;题目很简单&#xff0c;依次输出最大值&#xff0c;中位数&#xff0c;最小值。输出中位数的时候很神奇的出错。。。费了好半天事才改对。…

ccf小中大

试题编号&#xff1a;201903-1试题名称&#xff1a;小中大时间限制&#xff1a;1.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 思路很简单&#xff0c;但是有很多细节要考虑 如果中位数是小数&#xff0c;则要四舍五入&#xff0c;保留一位小数 否则直接输出整…

Spring中大事务拆分方案

Spring中大事务拆分方案 模块设计的时序图 启动流程 激活事件 完成事件 长事务造成的影响 由于现在事件的完成及后续激活都在一个事务中&#xff0c;比如完成融资申请事件之后会去激活批次启动签约&#xff0c;前置协议&#xff0c;资质认证等事件&#xff0c;这些操作…

AI 将完全取代前端开发吗?

注&#xff1a;今晨&#xff0c;我浏览 Medium&#xff0c;看到了篇颇为标题党的文章&#xff0c;于是我就将它抛给了 ChatGPT。本篇文章全部由 ChatGPT 所写。同时&#xff0c;我也请 ChatGPT 分享了它对此的观点。 最近&#xff0c;我的同事向我讲述了他与他老板的一次谈话。…

全网多种方法解决未连接到互联网 代理服务器出现问题,或者地址有误的错误

文章目录 1. 复现错误2. 分析错误3. 解决错误4. 解决该错误的其他方法5. 补充说明 1. 复现错误 今天&#xff0c;单位的实习生准备下载公司的代码&#xff0c;由于公司的代码放在gitlab上&#xff0c;需要内网才能登录gitlab。 而登陆内网需借助Hillstone Secure Connect&…

【实战篇】37 # 如何使用 QCharts 图表库绘制常用数据图表?

说明 【跟月影学可视化】学习笔记。 QCharts 图表库 QCharts 是一个基于 spritejs 封装的图表库&#xff0c;可以让用户以组件的形式组合出各种图表&#xff1a;https://www.qcharts.cn/#/home QCharts 图表的基本用法 最简单的方式是&#xff0c;直接通过 CDN&#xff0c;…

2021年微软研究博士奖研金名单出炉!三位华人博士生入选,每人42000美元

点击上方“CVer”&#xff0c;选择加"星标"置顶 重磅干货&#xff0c;第一时间送达 本文转载自&#xff1a;AI科技评论 作者 | 陈大鑫 就在今日&#xff0c;微软研究院宣布了2021年微软研究博士奖研金获奖名单&#xff01; 今年一共有十位在读博士生荣获此殊荣&…