背景
BI中会涉及到不少图形可视化的应用，因为考虑到APP用户体验方面的需求（移动端版本主要面向集团领导使用），BI APP主要采用Native的图形可视化解决方案（当然Swift优先_）。
涉及的图形类型
BI show.png
BI 中的各种图形图表都封装成了对应的卡片类型，根据接口的卡片类型描述动态生成对应的数据卡片进行展示。
开源库选型
1.Charts
应用场景：
主力图形库，常规图形的展示。
优势：
- 图形类型支持覆盖率较高，基本涵盖了所有常用的图形类型（组合图待完善中...）。
- 文档较完备，且iOS、Android平台接口一致，迁移成本低
- 图形库热度高，持续更新中。
- 较为优雅的动画支持、默认数据展示区域的控制、各种展示细节的灵活控制等。
2.ESArcProgressView
应用场景：
Circle.png
多层环形图（暂时这么称呼她吧）
其实是仿照的Apple Watch的Activity，不过确实比纯粹的柱状图更具美感一些_。
优势：
- 其它的类似轮子还真没找到。。。
- 支持简单动画，不过需要手动处理下timer的runloop mode的问题。
3.XCL-Charts
应用场景：
android circle.png
Android的多层环形图解决方案，XCL也是一个较为完备的Android图形库，不过相较来说库的成熟度没有Charts高，一些细节功能也存在一定程度的缺失。
解决方案
这里主要就Charts的问题解决方案进行一些分享：
1. 展示图形中的最后几个元素
//显示可视区域的元素个数
chartView?.setVisibleXRangeMaximum(6)
/*
* moveViewToX存在bug无法正确切换位置
* 调用此方法的前提条件是需要预先提供一个确定的frame
* xIndex为显示到的x元素的序列
*/
chartView?.moveViewToAnimated(xIndex: CGFloat(xVals.count - 1), yValue: 0, axis: ChartYAxis.AxisDependency.Left, duration: 1)
这里setVisibleXRangeMaximum设置的数目在grouped柱状图配置的时候记得要乘以单位组内柱子的数目并包含组之间间隔的空间（往往间隔的空间也算做一个柱子）。
2. 完整显示x轴所有的元素标签
Charts默认自动计算相邻x轴元素标签的距离, 控制x轴部分标签的隐藏以达到较好的现实效果。但实际需求中往往会要求展示所有x轴的元素标签，那么就可以通过以下配置禁用默认的计算。
xAxis?.setLabelsToSkip(0)
3. 设置为可拖动的图形与tableview的滑动存在冲突
暂时的解决办法是在可拖动的图形顶部覆盖一层隐藏层，需要看全局数据的用户需要先进行一步点击才能进行图形的拖动操作。
存在的不足
1. 组合图包含grouped柱状图时存在bug
problem.png
solution.png
尚未解决，暂时只能将grouped柱状图跟线形图分开成两个图进行展示。。。
或者研究下liuxuan30的这个PR
issue传送门
2. 堆积图缺失线性堆积图
目前只提供柱状堆积图的支持。
3. ChartMarker堆积图功能缺失
堆积图的ChartMarker目前只能展示堆积后的总值，而不能展示分项的值。
小结
目前的这套方案可以满足基本的数据可视化需求，对于一些较为复杂灵活的图形展示需求，也可以封装一个单独的web类型的卡片，对于这部分需求采用web相关的图形可视化解决方案进行处理。
网友评论