巧妙使用WilliamChart绘制出只有两个圆角的柱状图

一、项目需求

最近项目有这么一个需求，实现一个柱状图，柱状图顶部为圆角，底部不为圆角。一开始接到这个需求，以为会很 简单，认为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();

四、总结

通过这次血的教训，下次再实现项目需求的时候，一定会实现做好功课，毕竟即使是成熟的第三方库，也不一定能满足我们的实际要求。