巧妙使用WilliamChart繪製出只有兩個圓角的柱狀圖

摘要： 最近專案有這麼一個需求，實現一個柱狀圖，柱狀圖頂部為圓角，底部不為圓角。一開始接到這個需求，以為會很 簡單，認為github上面肯定會有現成的圖表庫可以使用。所以上github一搜，用上了MPAndroid。 複製程式碼 一開始進展得很順利，MPAndroid也確實好用，直到寫完...

最近專案有這麼一個需求，實現一個柱狀圖，柱狀圖頂部為圓角，底部不為圓角。一開始接到這個需求，以為會很

簡單，認為github上面肯定會有現成的圖表庫可以使用。所以上github一搜，用上了MPAndroid。
複製程式碼

一開始進展得很順利，MPAndroid也確實好用，直到寫完需求，準備去找找是否有設定圓角的方法，結果並沒有，沒有，沒有！ 知道真相的我是崩潰的。只得上網找到另外一個圖表庫——WilliamChart, 有了上次的經驗，這次我確定了WilliamChart確實有設定圓角的方法。 萬萬沒想到，不隨人願，WilliamChart 只能設定含四個圓角的柱狀圖。我一度想要放棄，不過最後還是本著耐心去研究WilliamChart，沒想到最後還真找到了解決方法。且聽我道來。

另附

• ofollow,noindex">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();
複製程式碼

四、總結

通過這次血的教訓，下次再實現專案需求的時候，一定會實現做好功課，畢竟即使是成熟的第三方庫，也不一定能滿足我們的實際要求。