巧妙使用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();

四、总结

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