巧妙使用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、後話

至於後來，經過一種自定義視圖的方式實現了這個需求，自定義視圖---圓角柱狀圖（一）