[ Android ] MPAndroidChart 第三方 Library 相關事項

這篇簡單做個筆記

MPAndroidChart 這個第三方 Lib 對我還說還有好多東西要熟悉

內容就一些當下碰到的問題做筆記

目前內容

1. 如何設定顏色

2. 如何設定 X-Axis 的標籤文字？

3. 如何用指定顏色填滿線條下方區域？

4. 要如何設定自訂的資料格式？如小數點或者是數值後面的符號？



 1. 如何設定顏色？

 不管是軸線還是背景顏色，都有相對應的方法可以呼叫

 但在這裡要注意一件事情，並不能像多數情況呼叫color資源

 例如： dataSet.setColor(R.color.chart_color_light_gray);

 這樣的方式畫面上不會有改變，當無法使用指定的color資源

 系統會使用預設的設定

 看過官方的文章與一些論壇的文章後才知道

 需要透過一些方法去做「轉換？」才可以

 範例：

 --------------------------------------------------------------------------------
 int color = ContextCompat.getColor(this, colorResource);

 dataSet.setColor(color);
 --------------------------------------------------------------------------------

 為了簡潔，我將轉換的過程整理成方法，如下所示
 --------------------------------------------------------------------------------
  dataSet.setColor(colorGetter(R.color.xxxxxx));

   // 方法
   private int colorGetter(int colorResource){
        return ContextCompat.getColor(this,colorResource);
    }
 --------------------------------------------------------------------------------

 下面是參考的資料，不過第一篇的方式我還沒用過

 說不定是漸層色彩的方式？

 參考資料：
  https://github.com/PhilJay/MPAndroidChart/wiki/Setting-Colors
  https://stackoverflow.com/questions/29791086/how-to-set-colors-in-mpandroidchart





==================================================

2. 如何設定 X-Axis 的標籤文字？

細節的部分就不多說明了，例如怎麼建立物件之類的

這裡的重點是，依照官方的文件來建立圖表其 X-Axis 標籤應該指定的數值

但希望將數值替換成字串或者是顯示特定的文字該怎麼辦？

首先預設的目標是替換為月份，因此我準備了一個裝有月份字串的陣列 month

再來要先取得 X-Axis 物件，如下列程式碼

--------------------------------------------------------------------------------
XAxis xAxis = lineChart.getXAxis();
--------------------------------------------------------------------------------

再透過 xAxis來設定 X-Axis的標籤，程式碼如下

--------------------------------------------------------------------------------
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                try{
                    return months[(int) value];
                }
                catch (Exception e) {
                    Log.d("ERROR TAG: " , "xAxis.setValueFormatter() -- " + e.toString());
                    return "";
                }
            }
        });
--------------------------------------------------------------------------------

因為要透過 value 作為陣列的標籤數值，使用(int)強行轉換型態

如此應該就可以將對應的數值替換為月份了

也別忘了加上下面的程式碼，避免放大圖表後月份間隔內跑出重複的標籤

--------------------------------------------------------------------------------
xAxis.setGranularity(1f);
--------------------------------------------------------------------------------

參考資料：
https://github.com/PhilJay/MPAndroidChart/issues/2767





==================================================

3. 如何用指定顏色填滿線條下方區域？

首先透過下面程式碼啟動設定

--------------------------------------------------------------------------------
 dataSet.setDrawFilled(true);
--------------------------------------------------------------------------------

下列方法填上顏色 ( drawableGetter為取得資源的方法 )

--------------------------------------------------------------------------------
dataSet.setFillDrawable(drawableGetter(this,R.color.chart_color_light_green));

private Drawable drawableGetter(Context context, int colorResource){
        return ContextCompat.getDrawable(context, colorResource);
}
--------------------------------------------------------------------------------

如此就可以有填滿的效果了

如果要有漸層的效果，只要將 color資源 換成 drawable資源即可

例如

--------------------------------------------------------------------------------
ContextCompat.getDrawable(context, R.drawable.fade_red );
--------------------------------------------------------------------------------

drawable資源下的 fade_red.xml

--------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:startColor="#00ff0000"
        android:endColor="#ffff0000" />
</shape>
--------------------------------------------------------------------------------

這樣就有漸層的效果出來了

參考資料：
https://stackoverflow.com/questions/32907529/mpandroidchart-fill-color-gradient





==================================================

4. 要如何設定自訂的資料格式？如小數點或者是數值後面的符號？

需要自訂一些資料格式

就需要 IValueFormatter 介面來處理了

一開始先建立一個物件，實作 IValueFormatter

--------------------------------------------------------------------------------
 public class MyValueFormatter implements IValueFormatter {

        private DecimalFormat mFormat;

        public MyValueFormatter() {
            mFormat = new DecimalFormat("###,###,##0"); // use one decimal
        }

        @Override
        public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
            return mFormat.format(value) + "+"; // e.g. append a dollar-sign;
        }
    }
--------------------------------------------------------------------------------

之後再使用這個物件，主要是看你要哪邊使用這個格式

例如我希望 DataSet 使用這樣的格式

--------------------------------------------------------------------------------
lineDataSet.setValueFormatter(new MyValueFormatter());
--------------------------------------------------------------------------------

如此就可以數值固定在無小數點，且數值後面還有個 + 的符號


參考資料：
https://stackoverflow.com/questions/47900143/how-to-set-two-decimal-point-into-bar-entry-in-mp-android-bar-chart-in-android