#MPAndroid 目錄 MPAndroidChart
- 基本介紹
- 圖表類型 與 Layout 設定
- Data設定與操作
- Axis軸線設定
- LimitLine
- Legend圖例設定
- MakerView設置
- ViewPort調整
- BasicStyle
- Animation
# MPAndroidChart
MPAndroid 是一個 Open Source 的 Library,主要用於繪製各式圖表,先有 Android 版本後才開發 iOS 版本,兩版本的 API 設計方式都是同樣的,且是以 Android 為準。
Library 官方網址
Gradle 設定
repositories {
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.PhilJay:MPAndroidChart:v2.1.5'
}
其他加入 Library 的方法可以參考這裡。
MPAndroid 架構如下,主要分為 LineData、Axis、Legend、MakerView、ViewPort:
本篇文章將會依序介紹這五個類別的用法,我們先來看一個基本圖表會如下圖:
■ 黃色區塊:YAXis,負責 Y 軸的樣式,如:刻度間距、 顯示刻度數量、背景橫線、顯示橫向 LimitLine
■ 綠色區塊:XAxis,負責 X 軸的樣式,如:刻度間距、顯示刻度數量、背景直線、顯示直向 LimitLine
■ 紫色區塊:Legend,負責圖例的樣式,如:圖例形狀、行距、間距、自定義顏色
■ 黑色箭頭:LineData,圖表資料與一些樣式設定,如:資料集合、線條樣式、資料點樣式
■ 橘色圓形:MakerView,點選資料點會跳出來的泡泡框
其中最重要的就是 LineData,如果圖表沒有 LineData 資料就只單純顯示「No chart data available
」的文字
所以選擇好圖表類型並把 Chart 放入 Layout 後,第一步是將資料放入 Chart 中。
![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447056445988.png)
2. **長條圖 BarChart**
![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447056370327.png)
3. **長條摺線圖 Combined-Chart**
![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447056347376.png)
4. **圓餅圖 PieChart**
![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447056415729.png)
5. **雷達圖 ScatterChart**
![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447056465848.png)
6. **K線圖 CandleStickChart**
![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447056571061.png)
7. **泡泡圖 BubbleChart**
![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447056582819.png)
8. **雷達圖 RadarChart**
![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447056847896.png)
接下來本篇以最基本的「摺線圖 LineChart」來做為範例。
Chart 用 LineData
作為封裝所有資料的物件,並有 DataSet
、Entry
、XVals
等不同的元件,以下圖 LineChart 來說明基本概念:
LineData
中的List<DataSet>
有兩個 DataSet,每個 DataSet 都是一個類別,並由List<Entry>
所組成,簡單來看,資料的組成會如下表:
DataSet/Entry | Entry0 | Entry1 | Entry2 | Entry3 | Entry4 |
---|---|---|---|---|---|
DataSet A | 0 | 2 | 4 | 6 | 8 |
DataSet B | 0 | 4 | 8 | 12 | 16 |
- 圖右則是實際上程式碼使用的 Method 階層,代表設定資料物件時的架構,
Entry
是最小單位,負責記錄資料數列的值與順序 - 圖左下方綠色區塊的 XVals 則代表顯示 X 軸的座標 Label ,是一個 List
有了基本概念後,我們就開始來實作程式碼啦!
@Override
public void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_linechart);
mChart = (LineChart) findViewById(R.id.chart);
/* 使用 setData 的方法設定 LineData 物件*/
mChart.setData( getLineData() );
}
/* 將 DataSet 資料整理好後,回傳 LineData */
private LineData getLineData(){
final int DATA_COUNT = 5; //資料數固定為 5 筆
// LineDataSet(List<Entry> 資料點集合, String 類別名稱)
LineDataSet dataSetA = new LineDataSet( getChartData(DATA_COUNT, 1), "A");
LineDataSet dataSetB = new LineDataSet( getChartData(DATA_COUNT, 2), "B");
List<LineDataSet> dataSets = new ArrayList<>();
dataSets.add(dataSetA);
dataSets.add(dataSetB);
// LineData(List<String> Xvals座標標籤, List<Dataset> 資料集)
LineData data = new LineData( getLabels(DATA_COUNT), dataSets);
return data;
}
/* 取得 List<Entry> 的資料給 DataSet */
private List<Entry> getChartData(int count, int ratio){
List<Entry> chartData = new ArrayList<>();
for(int i=0;i<count;i++){
// Entry(value 數值, index 位置)
chartData.add(new Entry( i*2*ratio, i));
}
return chartData;
}
/* 取得 XVals Labels 給 LineData */
private List<String> getLabels(int count){
List<String> chartLabels = new ArrayList<>();
for(int i=0;i<count;i++) {
chartLabels.add("X" + i);
}
return chartLabels;
}
LineData
的 Baseclass 是 ChartData,用於封裝所有 Data 與 Styling Data,而不同圖表的類型,有不同的 Subclass,譬如長條圖是使用 BarData
、BarDataSet
、BarEntry
等都是繼承 ChartData
,雖不同物件,但實際上用法大同小異,可在 mChart.setChartData()
查看傳入的物件型態
- addEntry(Entry e) :在 List 最後增加 Entry
- removeFirst() :移除第一個 Entry
- removeLast() :移除最後一個 Entry
- removeEntry(Entry e) :移除指定的 Entry Object
- removeEntry(int xIndex) :移除指定 Index 的 Entry
- addEntry(Entry e, int dataSetIndex) :新增 Entry 到指定的 DataSet
- addDataSet(DataSet d) :增加一個 DataSet
- removeEntry(Entry e, int dataSetIndex) :移除指定的 DataSet 一個 Entry
- removeEntry(int xIndex, int dataSetIndex) :移除指定的 DataSet 中的某 Index 的 Entry
- removeDataSet(DataSet d) :移除一個 DataSet
- removeDataSet(int index) :移除指定 Index 的 DataSet
資料操作完後,切記必須使用 notifyDataSetChanged()
與 invalidate()
方法來刷新 View
mChart.notifyDataSetChanged();
mChart.invalidate();
### Data Style > **Color**
設定此資料類別的基礎顏色
dataSet.setColor( getResources().getColor(R.color.pink) );
如果你有選色障礙的話,MPAndroid 有提供幾個系列色票, ColorTemplate
有以下五個 Static 的 Color Array 可以直接使用:
> **Data Point**
設定每個 Entry 出現點的樣式
dataSet.setDrawCircles( boolean )
預設為 True,可以直接設定 Data Point 的樣式
dataSet.setCircleSize(10f);
dataSet.setCircleColor(ColorTemplate.JOYFUL_COLORS[1]);
dataSet.setDrawCircleHole( boolean )
False = 實心的單一顏色
True = 如範例圖並可以設定 setCircleColorHole
的顏色
dataSetC.setDrawCircleHole(false);
dataSet.setCircleColorHole(Color.WHITE);
> **Line**
設定畫出資料線條的樣式
dataSet.setLineWidth(5f);
dataSet.setDrawCubic(true); //改成平滑曲線
dataSet.enableDashedLine(10f, 10f, 0f); //設定虛線(線條長度, 間隔空間, 角度)
// dataSet.setCubicIntensity(20f);//曲線彎曲強度
> **Hightlight**
Highlight 是當點下 DataPoint 的時候,會在背景 Grid 線上出現一條用來對齊數值的指引線,預設是水平跟垂直都會顯示
設定線條寬度與顏色
dataSet.setHighlightLineWidth(3f);
dataSet.setHighLightColor(ColorTemplate.JOYFUL_COLORS[4]);
如果要設置只有垂直或水平單一條 Highlight 的話,可以先把 setDrawHighlightIndicators( boolean )
設為 False,再透過 setDrawVerticalHighlightIndicator( boolean )
或 setDrawHorizontalHighlightIndicator( boolean )
來打開單邊 Hightlight 線
// 關閉 highlight 線
dataSet.setDrawHighlightIndicators(false);
// 設置垂直線
dataSet.setDrawVerticalHighlightIndicator(true);
> **Fill**
在摺線圖的一個資料類別中,把資料線下的面積填滿
dataSet.setDrawFilled( boolean )
預設是 False,要打開才會有 Fill 作用,而最後加入的 dataset
,他的 z-index 為最大,會顯示在最上層
dataSet.setDrawFilled(true);
dataSet.setFillColor(ColorTemplate.VORDIPLOM_COLORS[0]);
dataSet.setFillAlpha(100); //沒設定的話,alpha 預設為85,範圍是 0-255
> **ValueFormatter**
重新格式化數值 Label 中的文字
ValueFormat 可以設定給 dataset
(單一資料類別)或 Linedata
(所有資料),除了自定義 ValueFormatter 外,作者也提供兩個已定義好的 ValueFormatter,如:
- LargeValueFormatter:超過1000會變1k
- PercentFormatter:顯示成百分比,常用於 PieChart(百分比的數字要自己算好)
dataSet.setValueFormatter(new PercentFormatter());
或你可以自訂義一個 ValueFormatter,如下範例:
public class MyValueFormatter implements ValueFormatter {
private DecimalFormat mFormat;
public MyValueFormatter() {
mFormat = new DecimalFormat("$###,###,##0.0"); // use one
/* NumberFormat 是以每三位數加上逗號的格式化
* DecimalFormat 是可以自定義顯示的數字格式
* # : digit 不顯示零
* 0 : digit 會補零
* @ : 顯示幾位, ex. 12345[@@@]=12300
* format 用法可以參考以下網址
* http://developer.android.com/intl/zh-tw/reference/java/text/DecimalFormat.html
*/
}
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
/* ValueFormatter 一定要實作此方法
* 此方法會把 value 跟 entry 傳過來,在這邊可以做一些邏輯上的處理
* 回傳的 format 字串將會顯示在 Label 上 */
return mFormat.format("$" + value);
}
}
> **Notes**
XAxis 跟 YAxis 也可以設定 ValueFormatter,若要自定義 ValueFormatter 的話,需要實作 YAxisValueFormatter
或 XAxisValueFormatter
- 取得 Y 軸物件
YAxis
,有分為左右兩個:- Left 是影響由左至右的橫線 ,左邊的 Label
- Right 是影響由右至左的橫線,右邊的 Label
// Method 1
YAxis mLeftYAxis = mChart.getAxisLeft();
YAxis mRightYAxis = mChart.getAxisRight();
// Method 2
YAxis mLeftYAxis = mChart.getAxis(YAxis.AxisDependency.LEFT);
YAxis mRightYAxis = mChart.getAxis(YAxis.AxisDependency.RIGHT);
> **Notes**
如果不想要出現任何 X 或 Y 軸的東西,可以 setEnabled(false)
來關閉軸線
### XAxis > **Position**
設置 mXAxis 的位置,可以選擇以下幾個位置:
mXAxis.setPosition(XAxis.XAxisPosition.TOP);
> **Label**
設定 Label 顯示方式,以下介紹主要 Label 的設定:
mXAxis.setDrawLabels(false); // 顯示 或 隱藏 label
mXAxis.setLabelsToSkip(1); // 要略過幾個 Label 才會顯示一個 Label
mXAxis.resetLabelsToSkip(); //重新設定略過 Label 的設定
mXAxis.setSpaceBetweenLabels(20); // 每個欄位的間距,default=4
文字的設定分為 Color、Size、Typeface
mXAxis.setTextColor(getResources().getColor(R.color.accent));
mXAxis.setTextSize(12);
mXAxis.setTypeface(...)
> **Line**
設定 mXAxis 的線條樣式,有分兩種:
GridLine
是負責畫出背景格線中的所有垂直線,可以設定 Color、Width、DashedLine
mXAxis.setGridColor(getResources().getColor(R.color.green));
mXAxis.setGridLineWidth(3);
mXAxis.enableGridDashedLine(10f, 5f, 0f); //設定虛線(線條長度, 間隔空間, 角度)
AxisLine
設定 mXAxis 最靠近數值 Label 的水平線
mXAxis.setAxisLineWidth(5f);
mXAxis.setAxisLineColor(getResources().getColor(R.color.second_accent));
如果不想顯示線條的話,也可以選擇關閉
//圖表的背景線 GridLine
mXAxis.setDrawGridLines(false);
//最靠近 Label 的垂直線 AxisLine
mXAxis.setDrawAxisLine(false);
設定 mYAxis 顯示 Label 數值的最大值與最小值
需要先把 mYAxis.setStartAtZero( boolean )
設為 False,才可以設定上下限
mLeftYAxis.setStartAtZero(false);
mRightYAxis.setStartAtZero(false);
// 設定最大值
mLeftYAxis.setAxisMaxValue(3);
mRightYAxis.setAxisMaxValue(3);
// 設定最小值
mLeftYAxis.setAxisMinValue(-5f); //如果 data 沒有到負數,就不會看到 min value 的效果囉
mRightYAxis.setAxisMinValue(-5f);
可以用 reset 還原上下限
mLeftYAxis.resetAxisMaxValue();
mRightYAxis.resetAxisMaxValue();
或是有特殊需求,只顯示最大/小值,可以設定 setShowOnlyMinMax
,不過這個不受setStartAtZero
的影響,不需要設為 False
mLeftYAxis.setShowOnlyMinMax(true);
mRightYAxis.setShowOnlyMinMax(true);
> **Order**
設定 Lebel 數值要 ASC 或 DESC 排序
mLeftYAxis.setInverted(true);
mRightYAxis.setInverted(true);
> **Space**
Top 為正值所設定多出來的向上空間
mLeftYAxis.setSpaceTop(100f);
mRightYAxis.setSpaceTop(100f);
Bottom 為負值所設定多出來的向下空間
mLeftYAxis.setSpaceBottom(100f);
mRightYAxis.setSpaceBottom(100f);
> **Position**
決定 Label 要顯示在 Chart 內還是外,有兩種:
OUTSIDE_CHART
(預設)INSIDE_CHART
mRightYAxis.setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART);
mLeftYAxis.setPosition(YAxis.YAxisLabelPosition.INSIDE_CHART);
> **Count**
setLabelCount( int count, boolean force)
:設置顯示幾個 Label 數,第二個選項 Force,有一些差異:
-
Ture :代表會精確的平均數值,均勻分配 Label
Interval = [(Max - Min) / (Count - 1)]
-
False:以算出間距來慢慢加上數值,不一定均勻分配 Label
Interval = 透過 [(Max - Min) / Count] 算出 Range 後,再經過 log 跟小數的處理後得出
差異在於這個方法不一定會顯示 chart 頂端的最大數值,沒有設定的話,一般圖表預設都是以這個方式顯示
一般沒有設定的話,Label 數量 Default = 6,最大可以設定 25 個
mLeftYAxis.setLabelCount(7, true);
mRightYAxis.setLabelCount(7, true);
> **Offset**
如果有時候資料的第一個跟最後一個 Label 會與 mYAxis 的數值 Label 擋住的話,可以設定數值 Label 的 Offset,調整數值 Label 的距離
// 設定 X 軸 Offset
mLeftYAxis.setXOffset(40);
mRightYAxis.setXOffset(15);
// 設定 Y 軸 Offset
mLeftYAxis.setYOffset(10);
mRightYAxis.setYOffset(10);
> **Line**
設定 mYAxis 的線條樣式,有分兩種:
GridLine
負責畫出圖表背景格線的所有水平線
//寬度
mLeftYAxis.setGridLineWidth(5f);
mRightYAxis.setGridLineWidth(5f);
//顏色
mLeftYAxis.setGridColor(getResources().getColor(R.color.green));
mRightYAxis.setGridColor(getResources().getColor(R.color.green));
//設定虛線
mLeftYAxis.enableGridDashedLine(20f, 5f, 0f); //設定虛線(線條長度, 間隔空間, 角度)
mRightYAxis.enableGridDashedLine(20f, 5f, 0f); //設定虛線(線條長度, 間隔空間, 角度)
AxisLine
為最靠近數值 Label 的垂直線
//寬度
mLeftYAxis.setAxisLineWidth(5f);
mRightYAxis.setAxisLineWidth(5f);
//顏色
mLeftYAxis.setAxisLineColor(getResources().getColor(R.color.second_accent));
mRightYAxis.setAxisLineColor(getResources().getColor(R.color.second_accent));
如果不想顯示線條的話,也可以選擇關閉
//圖表的背景水平線 GridLine
mLeftYAxis.setDrawGridLines(false);
mRightYAxis.setDrawGridLines(false);
//最靠近 Label 的垂直線 AxisLine
mLeftYAxis.setDrawAxisLine(false);
mRightYAxis.setDrawAxisLine(false);
# LimitLine ![Alt text](https://github.com/25sprout/ChartLib-Demo-Android/blob/master/images/.1447661808116.png)
可以在圖表上加上額外的線,表示限制或上限等等,在一開始產生 LimitLine
時會帶入 Value 與 String
new LimitLine( flaot value , String showString )
下一步再設定給 mXAxis 或 mYAxis,並設定樣式
(特別注意如果是放在 XAxis 的話,value 是指從左數過來第幾個 Label)
初始化與設定 Limit 外觀
LimitLine ll = new LimitLine(3f, "Limit");
//線條顏色、寬度
ll.setLineColor(getResources().getColor(R.color.blue_gray));
ll.setLineWidth(7f);
說明文字的部分,除了設定文字顏色、大小外,還可以設定文字的在 Limit 線的相對位置,有分為:
LEFT_TOP
LEFT_BOTTOM
RIGHT_TOP
RIGHT_BOTTOM
//文字位置
ll.setLabelPosition(LimitLine.LimitLabelPosition.LEFT_BOTTOM)
//文字顏色、大小
ll.setTextColor(getResources().getColor(R.color.blue_gray));
ll.setTextSize(12f);
加入到 mXAxis 或 mYAxis
mXAxis.addLimitLine(ll);
mLeftYAxis.addLimitLine(ll); //YAxis可以只選一邊設定就好
> **Notes**
不管是 XAxis 或 YAxis ,他們addLimitLine
丟進去的 LimitLine
物件都是參考到同一個,所以如果想偷懶把 LimitLine
修改樣式後再丟給其他 Axis 是不行的!!(過來人T_T)
Legend圖例設定
透過 chart.getLegend()
取得 Legend
物件,可以設定圖例的大小、形狀、尺寸外,也可以設定圖例區的行距、間距等等
> **取得 Legend圖例區與設定位置**
(圖中的名稱因長度關係有省略一些文字,可以到Legend.LegendPosition
查看 Static String)
在上圖中有12個位置可以設定外,還有一個 PieChart 專用的 PIECHART_CENTER
Legend lg = chart.getLegend(); //取得 Legend 圖例區
lg.setPosition(Legend.LegendPosition.BELOW_CHART_CENTER); // 設定Legend 圖例區位置
> **圖例組屬性設定**
圖例的外型有三種可以設定:
lg.setFormSize(10f); //圖例尺寸
lg.setForm(Legend.LegendForm.CIRCLE); //圖例外型
//設定說明文字大小與顏色
lg.setTextSize(12f);
lg.setTextColor(Color.GRAY);
> **圖例邊距**
lg.setXEntrySpace(50f); //各圖例組的間距
lg.setYEntrySpace(50f); //各圖例組的行距
lg.setFormToTextSpace(50f); //圖例與說明文字中間的距離
lg.setWordWrapEnabled(true); //圖例區超過圖表的長寬時,True = 保留超過部分, False = 裁切超過的部分
> **圖例顏色組設置**
Replace:重新設定目前圖例的顏色,但顏色數量要跟原本資料 dataSet
數量一樣,否則會出錯
lg.setCustom( int[] colors, String[] labels)
lg.setCustom(ColorTemplate.VORDIPLOM_COLORS, new String[] { "Set1", "Set2", "Set3"});
// 可以呼叫 resetCustom() 還原設定
lg.resetCustom();
Append:添加新的圖例
lg.setExtra( int[] colors, String[] lebels)
lg.setExtra(ColorTemplate.VORDIPLOM_COLORS, new String[]{"Set1", "Set2", "Set3"});
> **Notes**
但這樣設定後,圖例跟資料的顏色設定就不一樣了,不太確定這種功能可以用在哪種狀況上XD
MakerView
是當點下 DataPoint 的時候,會跳出一個顯示資料的 View
,原本預設點下 DataPoint 只有顯示 Highlight
而已,所以要先設計一個 MakerView
的 Layout,再撰寫一個物件繼承 MakerView
並覆寫原有的設計
MyMakerView mv = new MyMakerView(this, R.layout.item_marker_view);
mChart.setMarkerView(mv);
R.layout.item_maker_view
是只有一個 TextView
的 Layout,重點主要在於 MyMakerView
物件所做的事
public class MyMakerView extends MarkerView {
private TextView tvContent;
public MyMakerView (Context context, int layoutResource) {
super(context, layoutResource);
tvContent = (TextView) findViewById(R.id.tvContent);
}
/* 每次畫 MakerView 時都會觸發這個 Callback 方法,通常會在此方法內更新 View 的內容 */
@Override
public void refreshContent(Entry e, Highlight highlight) {
tvContent.setText("" + e.getVal());
}
/*
* offset 是以點到的那個點作為 (0,0) 中心然後往右下角畫出來
* 所以如果要顯示在點的上方
* X=寬度的一半,負數
* Y=高度的負數
*/
@Override
public int getXOffset() {
// this will center the marker-view horizontally
return -(getWidth() / 2);
}
@Override
public int getYOffset() {
// this will cause the marker-view to be above the selected value
return -getHeight();
}
}
另外附上 Layout 作為參考
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/circle_bg" >
<TextView
android:id="@+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="5dp"
android:text="1234567"
android:textSize="12dp"
android:textColor="@android:color/white"
android:ellipsize="end"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
## ViewPort 調整 以下功能僅限於 `LineChart`, `BarChart`, `ScatterChart`, `CandleStickChart` 圖表使用,且在 `mChart.setData()` 之後呼叫,ViewPort 比較多是在跟調整 Chart View 有關係 > **Show Range**
跟 YAxis 設定 Max/Minimum 有點類似,不過出來的y座標值會有差異
mChart.setVisibleXRangeMaximum(3);
mChart.setVisibleXRangeMinimum(1);
mChart.setVisibleYRangeMaximum(5, YAxis.AxisDependency.LEFT);
mChart.setVisibleYRangeMaximum(5, YAxis.AxisDependency.RIGHT);
> **Moving**
移動目前中心視圖到哪一個 X, Y 軸座標(方法會自動 invalidate)
mChart.fitScreen(); //回復原本一開始的樣子
mChart.moveViewToX(float xIndex);
mChart.moveViewToY(float yValue, AxisDependency axis);
mChart.moveViewTo(float xIndex, float yValue, AxisDependency axis); // 至少會顯示一個 Point 的值
mChart.centerViewTo(int xIndex, float yValue, AxisDependency axis); // 以 xy 的座標軸為左邊中心
> **Zoom In/Out**
雖然用放大/縮小的手勢就可以 Zoom In/Out,但你也可以透過動態的方式來操作
mChart.zoomIn();
mChart.zoomOut();
> **Offset**
設定圖表的 padding
// chart 的 padding, 自動計算 padding 後再加上剛剛設定的 padding 值
mChart.setExtraOffsets(100, 100, 100, 100);
// 取消自動計算, 自己設定 padding 給他
mChart.setViewPortOffsets(100, 100, 100, 100);
mChart.resetViewPortOffsets();
Notes
其實 ViewPort 是負責繪畫整個 View 的核心 Controller,可以透過 chart.getViewPortHandler()
取得 Handler 物件,如果有要修改特殊地方的話,可以從 Handler 開始研究
關於 Chart 基本的設定
// Background Color
mChart.setBackgroundColor(int color);
mChart.setDrawGridBackground(boolean enabled);
mChart.setGridBackgroundColor(int color);
// Description 說明的樣式
mChart.setDescription(String desc);
mChart.setDescriptionColor(int color);
mChart.setDescriptionPosition(float x, float y);
mChart.setDescriptionTypeface(Typeface t);
mChart.setDescriptionTextSize(float size);
mChart.setNoDataTextDescription(String desc);
// Border
mChart.setDrawBorders(boolean enabled);
mChart.setBorderColor(int color);
mChart.setBorderWidth(float width);
Animation style 有很多種,可以到 Easing.EasingOption
查看,並且記得設置完要呼叫 invalidate()
刷新
chart.animateY(2000, Easing.EasingOption.Linear);
chart.animateX(2000, Easing.EasingOption.Linear);
chart.invalidate();