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

1、项目需求

最近项目有这么一个需求，实现一个柱状图，柱状图顶部为圆角，底部不为圆角。一开始接到这个需求，觉得会很  

简单，认为github上面确定会有现成的图表库可使用。因此上github一搜，用上了MPAndroid。  
复制代码

一开始进展得很顺利，MPAndroid也确实好用，直到写完需求，准备去找找是否有设置圆角的方法，结果并无，没有，没有！ 知道真相的我是崩溃的。只得上网找到另一个图表库——WilliamChart, 有了上次的经验，此次我肯定了WilliamChart确实有设置圆角的方法。 万万没想到，不随人愿，WilliamChart 只能设置含四个圆角的柱状图。我一度想要放弃，不过最后仍是本着耐心去研究WilliamChart，没想到最后还真找到了解决方法。且听我道来。

另附

• MPAndroidChart 连接
• WilliamChart连接

2、解决问题

首先看WillamChart自带的demo的一种特殊图表 StackBarChartView：

这种图表的特色就是能够填加多个数据集，并且是叠加的方式呈现的。就如上图，是由三组数据组合而成的。一开始看到这个图表的时候，我灵机一动，利用极限的想法，只要设置两组数据，而且底部的数据只要接近0，这样子底部的柱状图就是一个小色块，利用这个小色块和底部的柱状图衔接，这样一来底部的色块就能够挡住底部柱状图下部分的圆角了。，从而就能够“伪造”只有顶部带圆角的柱状图了。
效果以下：

而下图是底部数据比较大的对比图

明显能够看出若是没有处理底部数据的话，柱状图四个角都为圆角，比较不美观。

3、代码实现

• 首先是初始化图表数据 ：

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();
复制代码

4、总结

经过此次血的教训，下次再实现项目需求的时候，必定会实现作好功课，毕竟即便是成熟的第三方库，也不必定能知足咱们的实际要求。

5、后话

至于后来，经过一种自定义视图的方式实现了这个需求，自定义视图---圆角柱状图（一）