巧妙使用WilliamChart绘制出只有两个圆角的柱状图
来源:互联网 发布:淘宝摄影单反相机 编辑:程序博客网 时间:2024/06/06 22:38
一、项目需求
最近项目有这么一个需求,实现一个柱状图,柱状图顶部为圆角,底部不为圆角。一开始接到这个需求,以为会很 简单,认为github上面肯定会有现成的图表库可以使用。所以上github一搜,用上了MPAndroid。
一开始进展得很顺利,MPAndroid也确实好用,直到写完需求,准备去找找是否有设置圆角的方法,结果并没有,没有,没有! 知道真相的我是崩溃的。只得上网找到另外一个图表库——WilliamChart, 有了上次的经验,这次我确定了WilliamChart确实有设置圆角的方法。 万万没想到,不随人愿,WilliamChart 只能设置含四个圆角的柱状图。我一度想要放弃,不过最后还是本着耐心去研究WilliamChart,没想到最后还真找到了解决方法。且听我道来。
另附
- MPAndroidChart 链接
- WilliamChart链接
二、解决问题
首先看WillamChart自带的demo的一种特殊图表 StackBarChartView:
这种图表的特点就是可以填加多个数据集,而且是叠加的方式呈现的。就如上图,是由三组数据组合而成的。一开始看到这个图表的时候,我灵机一动,利用极限的想法,只要设置两组数据,并且底部的数据只要接近0,这样子底部的柱状图就是一个小色块,利用这个小色块和底部的柱状图衔接,这样一来底部的色块就可以挡住底部柱状图下部分的圆角了。,从而就可以“伪造”只有顶部带圆角的柱状图了。
效果如下:
而下图是底部数据比较大的对比图
明显可以看出如果没有处理底部数据的话,柱状图四个角都为圆角,比较不美观。
三、代码实现
- 首先是初始化图表数据 :
float []topChartData = {26, 2, 4, 2, 10, 20, 20, 18, 10, 50, 32, 2, 4, 2, 10, 20, 20,18, 21, 5}; float []bottomChartData = new float[topChartData.length]; Arrays.fill(bottomChartData, 0.01f);
- 接着添加图标柱子的颜色和数据:
BarSet topBarSet = new BarSet(); int i; for(i = 0;i < topChartData.length; i++) { Bar bar = new Bar(i + "", topChartData[i]); bar.setColor(Color.parseColor("#47b484")); topBarSet.addBar(bar); } BarSet bottomBarSet = new BarSet(); for(i = 0;i < bottomChartData.length; i++) { Bar bar = new Bar(i + "", bottomChartData[i]); bar.setColor(Color.parseColor("#47b484")); bottomBarSet.addBar(bar); }
- 最后图表按顺序添加数据集并设置相关属性:
roundBarChart = (StackBarChartView) findViewById(R.id.round_barchart); roundBarChart.addData(bottomBarSet); //先添加底部数据 roundBarChart.addData(topBarSet); roundBarChart.setBarSpacing(Tools.fromDpToPx(10.0f)); //设置柱子的间隔 roundBarChart.setRoundCorners(Tools.fromDpToPx(2.0f)); //设置圆角的角度 // 去除X,Y轴 roundBarChart.setXAxis(false) .setYAxis(false) .setXLabels(XRenderer.LabelPosition.NONE) .setYLabels(XRenderer.LabelPosition.NONE); // 图表展示 roundBarChart.show();
四、总结
通过这次血的教训,下次再实现项目需求的时候,一定会实现做好功课,毕竟即使是成熟的第三方库,也不一定能满足我们的实际要求。
0 0
- 巧妙使用WilliamChart绘制出只有两个圆角的柱状图
- 使用jpgraph绘制柱状图
- Android 如何使用shape绘制只有一个圆角的矩形
- 绘制柱状图的类
- Java中Swing绘制只有一个圆角的边框
- C# 使用zedgraph绘制 柱状图
- C# 使用zedgraph绘制 柱状图
- QT使用QCustomPlot 绘制柱状图
- 使用 highchart 绘制柱状图的通用方法与接口
- Jfreechart-Jfreechart的使用(图表绘制)[柱状图]
- Cocos2d-x--Box2D绘制出两个矩形框的解决方案
- 使用FusionCharts出柱状图和饼状图
- 柱状图绘制
- 使用Silverlight Toolkit绘制图表(上)--柱状图
- 使用Silverlight Toolkit绘制图表(上)--柱状图
- 使用 ZedGraph控件绘制柱状图,饼图
- 使用JFreeChart绘制3D柱状图
- 使用HighCharts绘制bar形柱状图
- 别名(Alias)
- 处理机的三级调度
- hibernate自动建表到数据库及spring下自动建表到数据库
- NYOJ2 括号配对问题
- 1046. Shortest Distance
- 巧妙使用WilliamChart绘制出只有两个圆角的柱状图
- Java高并发程序设计笔记(三)之Volatile与Lock
- LeetCode 442 --- Find All Duplicates in an Array
- 1047. Student List for Course
- 知名的开源apm(Application Performance Management)工具
- LintCode之最长公共子串(Longest Common Substring)
- 组(Group)
- Android开发-自定义application对activity的管理与控制
- Java集合框架详解之继承queue接口