520悶在家裡做圖（ 安卓統計圖MPAndroidChart開發 ）

東小東發表於2020-05-21
安卓Android

有些時候覺得一個人挺好的，可以更自由安排自己的時間；

有些時候覺得有個人挺好的，很多事情一個人做起來太沒意思了，縱使心中澎湃，傾聽的獨有自己。

廢話少說，直接上圖

MPAndroidChart是啥

一個可以在安卓上實現各種資料統計圖的開源專案。來看看它都能顯示啥圖：

LineChart（帶有圖例，簡單設計）

 LineChart（帶有圖例，簡單設計）

 LineChart（立方線）

 LineChart（漸變填充）

 

 

 條形圖（帶有圖例，簡單設計）

條形圖（分組資料集）

水平條形圖

組合圖（在這種情況下為條形圖和折線圖）

PieChart（帶有選擇項，...）

                       

ScatterChart（帶有正方形，三角形，圓形等）

CandleStickChart（用於財務資料）

BubbleChart（氣泡覆蓋的區域表示yValue） 

RadarChart（蜘蛛網路圖表）

                           

使用前的準備工作

需要先將庫下載到我們的工程中，新增依賴後同步一下即可自動下載

新增依賴

repositories {
    maven { url 'https://jitpack.io' }
}

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

 新增檢視檔案

com.github.mikephil.charting.charts.PieChart裡的PieChart可以為LineChart, BarChart, ScatterChart, CandleStickChart, PieChart, BubbleChart or RadarChart，這些要根據實際情況決定

事件相關API

該庫允許您完全自定義與圖表檢視的可能的觸控（和手勢）互動，並通過回撥方法對互動做出反應。

啟用/禁用互動

setTouchEnabled(boolean enabled)：允許啟用/禁用與圖表的所有可能的觸控互動。

setDragEnabled(boolean enabled)：啟用/禁用圖表的拖動（平移）。

setScaleEnabled(boolean enabled)：啟用/禁用兩個軸上圖表的縮放。

setScaleXEnabled(boolean enabled)：啟用/禁用x軸縮放。

setScaleYEnabled(boolean enabled)：啟用/禁用y軸縮放。

setPinchZoom(boolean enabled)：如果設定為true，則啟用縮放。如果禁用，則可以分別縮放x軸和y軸。

setDoubleTapToZoomEnabled(boolean enabled)：將其設定為false可禁止通過雙擊來放大圖表。

注意：這裡很多事件不支援餅狀圖，比如縮放、平移、放大

觸控圖表時運動/減速

setDragDecelerationEnabled(boolean enabled)：如果設定為true，則在觸控後圖表將繼續滾動。預設值：true。

setDragDecelerationFrictionCoef(float coef)：減速摩擦係數[0; 1]間隔，較高的值表示速度將緩慢降低，例如，如果將其設定為0，它將立即停止。1是無效值，並將自動轉換為0.9999。

事件監聽介面

 1 dongxiaodongchart = findViewById(R.id.chart);
 2 //觸控事件監聽
 3 dongxiaodongchart.setOnChartGestureListener(new OnChartGestureListener() {
 4     //開始觸控手勢時回撥
 5     @Override
 6     public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
 7         //Toast.makeText(MainActivity.this,"東小東：觸控事件開始",Toast.LENGTH_SHORT).show();
 8     }
 9     //結束觸控手勢時回撥
10     @Override
11     public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
12         //Toast.makeText(MainActivity.this,"東小東：觸控事件結束",Toast.LENGTH_SHORT).show();
13     }
14     //長按圖表時回撥
15     @Override
16     public void onChartLongPressed(MotionEvent me) {
17         Toast.makeText(MainActivity.this,"東小東：圖表長按",Toast.LENGTH_SHORT).show();
18     }
19     //雙擊圖表時回撥
20     @Override
21     public void onChartDoubleTapped(MotionEvent me) {
22         Toast.makeText(MainActivity.this,"東小東：圖表被雙擊",Toast.LENGTH_SHORT).show();
23     }
24     //單擊圖表時進行回撥
25     @Override
26     public void onChartSingleTapped(MotionEvent me) {
27         Toast.makeText(MainActivity.this,"東小東：圖表單擊",Toast.LENGTH_SHORT).show();
28     }
29     //圖幅描述變化
30     /*引數：
31     x的速度
32     y的速度
33      */
34     @Override
35     public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {
36         Toast.makeText(MainActivity.this,"東小東：圖幅描述變化",Toast.LENGTH_SHORT).show();
37     }
38     //縮放圖表時的回撥
39     /*引數：
40     scaleX x軸上的比例因子
41     scaleY y軸上的比例因子
42     */
43     @Override
44     public void onChartScale(MotionEvent me, float scaleX, float scaleY) {
45         Toast.makeText(MainActivity.this,"東小東：圖表正在縮放中。。。。。",Toast.LENGTH_SHORT).show();
46     }
47     //通過拖動手勢移動/轉換圖表時的回撥
48     /*引數：
49        dX 在x軸上的平移距離
50        dY 在y軸上的平移距離
51     */
52     @Override
53     public void onChartTranslate(MotionEvent me, float dX, float dY) {
54         Toast.makeText(MainActivity.this,"東小東：圖表正在移動中。。。。。",Toast.LENGTH_SHORT).show();
55     }
56 });

動畫製作API

animateX(int durationMillis)：在水平軸上對圖表值進行動畫處理，這意味著圖表將在指定的時間內從左到右建立。

animateY(int durationMillis)：對垂直軸上的圖表值進行動畫處理，這意味著圖表將在指定的時間內從下到上建立。

animateXY(int xDuration, int yDuration)：對水平和垂直軸都進行動畫處理，從而形成左/右底部/頂部

上面三個函式還可以在最後新增一個引數：Easing.EasingOption option

該庫允許您將漂亮的緩動功能應用於動畫。您可以在以下靜態預定義 之間進行選擇Easing.EasingOption：

public enum EasingOption {
      Linear,
      EaseInQuad,
      EaseOutQuad,
      EaseInOutQuad,
      EaseInCubic,
      EaseOutCubic,
      EaseInOutCubic,
      EaseInQuart,
      EaseOutQuart,
      EaseInOutQuart,
      EaseInSine,
      EaseOutSine,
      EaseInOutSine,
      EaseInExpo,
      EaseOutExpo,
      EaseInOutExpo,
      EaseInCirc,
      EaseOutCirc,
      EaseInOutCirc,
      EaseInElastic,
      EaseOutElastic,
      EaseInOutElastic,
      EaseInBack,
      EaseOutBack,
      EaseInOutBack,
      EaseInBounce,
      EaseOutBounce,
      EaseInOutBounce,
  }

示例

//預設效果動畫
dongxiaodongchart = findViewById(R.id.chart);
dongxiaodongchart.animateX(2000);
//新增固定效果動畫
dongxiaodongchart = findViewById(R.id.chart);
dongxiaodongchart.animateX(2000,Easing. EaseInOutQuad);

 軸與網格線API

軸可以分為X和Y軸，其x和y軸的例項都可以使用下面的效果自定義

X軸：

相關函式

setLabelRotationAngle(float angle);設定x軸刻度的顯示的旋轉度數

setPosition(XAxisPosition pos);設定X軸在圖表中的顯示位置，TOP（圖表上面，刻度在表格外），BOTTOM（圖表下面，刻度在表格外），BOTH_SIDED（圖表上下都顯示），TOP_INSIDE（圖表上面，刻度在表格內）或BOTTOM_INSIDE（圖表下面，刻度在表格內）

使用：

dongxiaodongchart = findViewById(R.id.chart);
XAxis xAxis = dongxiaodongchart.getXAxis();//獲取x軸的例項
xAxis.setLabelRotationAngle(-45);//刻度旋轉-45度
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//只在圖表下面顯示

Y軸：

獲取y軸左右例項

dongxiaodongchart = findViewById(R.id.chart);
YAxis leftAxis = dongxiaodongchart.getAxisLeft();
YAxis rightAxis = dongxiaodongchart.getAxisRight();

效果

控制應繪製（軸的）哪些部分

setEnabled(boolean enabled)：設定啟用或禁用軸。如果禁用，則無論任何其他設定，都不會繪製軸的任何部分。

setDrawLabels(boolean enabled)：將其設定為true以啟用繪製軸的標籤，（刻度）

setDrawAxisLine(boolean enabled)：如果是否繪製沿軸的線（軸線），則將其設定為true。

setDrawGridLines(boolean enabled)：將其設定為true以啟用繪製軸的網格線。

自定義軸範圍（最小/最大）

setAxisMaximum(float max)：為此軸設定自定義最大值。如果設定，則根據提供的資料將不會自動計算該值。

resetAxisMaximum()：呼叫此命令可撤消先前設定的最大值。這樣，您將再次允許軸自動計算其最大值。

setAxisMinimum(float min)：為此軸設定一個自定義最小值。如果設定，則根據提供的資料將不會自動計算該值。

resetAxisMinimum()：呼叫此命令可撤消先前設定的最小值。這樣，您將再次允許軸自動計算其最小值。

setStartAtZero(boolean enabled)：已棄用 –使用setAxisMinValue(...)或setAxisMaxValue(...)代替。

setInverted(boolean enabled)：如果設定為true，則該軸將反轉，這意味著最大值將位於底部，最小值位於頂部。

setSpaceTop(float percent)：設定圖表中最大值與軸上最高值的頂部間距（以總軸範圍的百分比為單位）。

setSpaceBottom(float percent)：設定圖表中最小值與軸上最小值的底部間距（以總軸範圍的百分比為單位）。

setShowOnlyMinMax(boolean enabled)：如果啟用，則此軸將僅顯示其最小值和最大值。這將忽略/覆蓋已定義的標籤計數（如果未強制執行）。

setLabelCount(int count, boolean force)：設定y軸的標籤數。請注意，此數字不是固定的（如果force == false），只能近似。如果啟用了力（true），則會繪製確切的指定標籤數-這會導致軸上的數字不均勻。

setPosition(YAxisLabelPosition pos)：設定應繪製軸標籤的位置。INSIDE_CHART或OUTSIDE_CHART。

setGranularity(float gran)：設定y軸值之間的最小間隔。在放大到為軸設定的小數位數不再允許在兩個軸值之間進行區分的點時，可以使用此方法來避免值重複。

setCenterAxisLabels(true)；設定刻度值居中於y軸值之間的最小間隔

setGranularityEnabled(boolean enabled)：啟用放大功能，該功能限制放大時y軸的間隔。預設值：false

造型/修改軸樣式

setTextColor(int color)：設定軸標籤（刻度）的顏色。

setTextSize(float size)：設定軸標籤的文字大小。

setTypeface(Typeface tf)：設定Typeface軸標籤的自定義。

setGridColor(int color)：設定該軸的網格線的顏色。

setGridLineWidth(float width)：設定該軸的網格線的寬度。

setAxisLineColor(int color)：設定該軸的軸線的顏色。

setAxisLineWidth(float width)：設定該軸的軸線的寬度。

enableGridDashedLine(float lineLength, float spaceLength, float phase)：使用此繪製網格虛線，允許以虛線模式繪製網格線，例如“-– – – –-”。“ lineLength”控制線段的長度，“ spaceLength”控制線之間的間距，“ phase”控制起點。

設定資料API

如果要向圖表新增值（資料），則必須通過

public void setData(ChartData data) { ... }

方法。所述基類ChartData（ChartData）類封裝被渲染期間所需圖表的所有資料和資訊。ChartData是所有資料類（子類），列如的基類LineData，BarData...等等

折線圖

LineDataSet物件存放一條線的相關內容

public LineDataSet(List<Entry> entries, String label) { ... }

LineDataSet需要一個List型別為Entry和的String來描述LineDataSet和，並將其作為用於的標籤Legend

其中Entry是x軸和y值在圖表中的條目

public Entry(float x, float y) { ... }

 條形圖

可以為設定資料的方式BarChart與相似LineChart。主要區別在於需要用於設定資料的資料物件（例如BarEntry代替Entry）。除此之外，BarChart還有不同的樣式選項。

分組條形圖

從v3.0.0版本開始，MPAndroidChart支援顯式分組的繪製條（在這種情況下，庫將處理x位置）或使用者定義的圖形，這意味著使用者可以通過更改繪製條的x位置來將其放置在所需的任何位置。

積木條形圖

堆疊的BarChart設定與普通設定非常相似，只是建立BarChart單個BarEntry物件的方式不同。如果是堆疊式鋼筋，BarEntry則必須使用的其他建構函式：

public BarEntry （float x，float [] values ）{ ... }

此建構函式允許values為y軸提供多個（陣列），它們表示每個條形的“堆疊”的值，陣列中的一個值是堆疊的一部分。考慮以下示例：

BarEntry stackedEntry = new BarEntry(0f, new float[] { 10, 20, 30 });

它BarEntry的x軸位置為0f，由三個值的堆疊組成，在y軸上的“高度”分別為“ 10”，“ 20”和“ 30”，累積的條形值/高度為60（ 10 + 20 + 30）。

餅圖

與其他圖表型別不同，PieChart彙整採用PieEntry物件形式的資料。這些物件的建構函式如下所示：

public PieEntry(float value, String label) { ... }

建構函式的第一個引數用於實際的“值”，該值應在中繪製為扇形PieChart。第二個String引數稱為“標籤”

資料單位

LargeValueFormatter：可用於格式化大於“ 1.000”的大值。它將諸如“ 1.000”的值轉換為“ 1k”，“ 1.000.000”將為“ 1m”（百萬），“ 1.000.000.000”將為“ 1b”（十億），諸如一萬億的值將為“ 1t” ”。

PercentFormatter：用於在每個帶有1個小數位的值之後顯示一個“％”符號。對於尤其有用PieChart。50-> 50.0％

資料物件樣式

圖內文字

setValueTextColor(int color)：設定所有DataSets此資料物件包含的值文字的顏色（繪製值標籤的顏色）。

setValueTextColors(List<Integer> colors)：設定用作值顏色的顏色列表

setValueTextSize(float size)：設定所有DataSets此資料物件包含的值文字的大小（以dp為單位）

setDrawValues(boolean enabled)：啟用/禁用所有DataSets此資料物件包含的圖形值（值文字）

資料查詢

getDataSetByIndex(int index)：返回DataSet資料物件DataSet列表中給定索引處的物件。

contains(Entry entry)：檢查此資料物件是否包含指定的Entry。如果是，則返回true，否則返回false。注意：此功能的效能相當差，在效能關鍵的情況下不要過度使用。

contains(T dataSet)：如果此資料物件包含提供的值DataSet，則返回true，否則返回false。

資料刪除

clearValues()：清除所有DataSet物件的資料物件，從而清除所有物件Entries。不刪除提供的x值

突出線上

setHighlightEnabled(boolean enabled)：將其設定為true以允許通過觸控突出顯示該ChartData物件和所有底層物件DataSets。

setDrawVerticalHighlightIndicator(boolean enabled)：啟用/禁用垂直高亮指示線。如果禁用，則不會繪製指示器。

setDrawHorizontalHighlightIndicator(boolean enabled)：啟用/禁用水平高光指示線。如果禁用，則不會繪製指示器。

setHighLightColor(int color)；設定指示線的顏色

setHighlightLineWidth(float width) 設定指示線的線寬，以dp設定高亮線（十字線）的寬度

圖線條（線圖）

setLineWidth(float width)：為此資料集設定線寬（最小值= 0.2f，最大值= 10f）；預設值1f注意：較細的線==更好的效能，較粗的線==效能差

setColor(int color); 線上圖中可以設定線的顏色

填充區域

線圖的填充必須要setDrawFilled設定為true

setDrawFilled(boolean filled)：將DataSet繪製為實心（曲面，面積），而不僅僅是將其繪製為直線時，將其設定為true，禁用此設定將提高效能。請注意，此方法使用canvas.clipPath(...)繪製填充區域的方法。對於API級別<18（Android 4.3）的裝置，應關閉圖表的硬體加速-參見此處。預設值：false

setFillColor(int color)：設定用於填充線條表面的顏色。

setFillAlpha(int alpha)：設定用於填充線表面（0-255）的Alpha值（透明度），預設值：85、255 =完全不透明，0 =完全透明

setFillDrawable(Drawable d)：設定一個Drawable應覆蓋填充區域的。這也允許使用漸變。

LineDataSet（類LineDataSet）

setCircleRadius(float size)：設定圓形值指示器的大小（半徑），預設大小= 4f

setDrawCircles(boolean enabled)：將其設定為true可以為此繪製圓形指示器LineDataSet，預設為true

setDrawCubic(boolean enabled)：如果設定為true，則折線圖將以立方樣式而不是線性樣式繪製。這會對效能產生負面影響！預設值：false

setCubicIntensity(float intensity)：設定立方線的強度（如果啟用）。最大值= 1f =非常立方，最小值= 0.05f =低立方效應，預設值：0.2f

setCircleColor(int color)：設定此資料集所有圓圈指示器應具有的顏色。

setCircleColors(List<Integer> colors)：設定其外圓LineDataSet應具有的顏色。還有其他各種設定圓形顏色的方法。

setCircleColorHole(int color)：設定直線圓（孔）的內圓的顏色。

setDrawCircleHole(boolean enabled)：將其設定為true以允許在此資料集的每個圓中繪製孔。如果設定為false，則將繪製填充的圓圈（無孔）。

enableDashedLine(float lineLength, float spaceLength, float phase)：允許以虛線模式繪製線條，例如“-– – – –-”。“ lineLength”是線段的長度，“ spaceLength”是線段之間的間隔的長度，“ phase”是偏移量，以度為單位（通常使用0）

BarDataSet（類BarDataSet）

setBarSpacePercent(float percent)：設定條之間的間隔，以條總寬度的百分比表示。

setBarShadowColor(int color)：設定用於繪製條形陰影的顏色。條形陰影是條形後面的表面，指示最大值。不要用它getResources().getColor(...)來設定它。或者Color.rgb(...)。

setHighLightAlpha(int alpha)：設定用於繪製突出顯示指示條的Alpha值（透明度）。最小值= 0（完全透明），最大值= 255（完全不透明）。

setStackLabels(String[] labels)：為標籤設定不同的條形紙疊（如果有的話）。

PieDataSet（類PieDataSet）

setSliceSpace(float degrees)：設定dp中的餅圖切片之間留出的空間，預設值：0 –>無空間，最大20，最小0（無空間）

setSelectionShift(float shift)：設定此資料集的突出顯示的餅圖切片與圖表中心的距離，預設為12f

其它樣式

invalidate()：在圖表上呼叫此方法將重新整理（重畫）它。為了使圖表上執行的更改生效，這是必需的。

notifyDataSetChanged()：讓圖表知道其基礎資料已更改，並執行所有必要的重新計算（偏移量，圖例，最大值，最小值等）。特別是在動態新增資料時，這是必需的。

setBackgroundColor(int color)：設定將覆蓋整個圖表檢視的背景顏色。另外，可以.xml在佈局檔案中通過設定背景色。

setDescription(String desc)：設定描述文字，該文字顯示在圖表的右下角。

setDescriptionColor(int color)：設定說明文字的顏色。

setDescriptionPosition(float x, float y)：在螢幕上以畫素為單位設定描述文字的自定義位置。

setDescriptionTypeface(Typeface t)：設定Typeface用於繪製描述文字。

setDescriptionTextSize(float size)：設定說明文字的大小（以畫素為單位），最小6f，最大16f。

setNoDataText(String text)：設定圖表為空時應顯示的文字。

setDrawGridBackground(boolean enabled)：如果啟用，將在圖表繪圖區域後面繪製背景矩形。

setGridBackgroundColor(int color)：設定繪製網格背景的顏色。

setDrawBorders(boolean enabled)：啟用/禁用繪製圖表邊框（圖表周圍的線）。

setBorderColor(int color)：設定圖表邊框線的顏色。

setBorderWidth(float width)：以dp設定圖表邊界線的寬度。

setMaxVisibleValueCount(int count)：設定圖表上最大可見繪製值標籤的數量。這僅在setDrawValues()啟用時生效。

線圖，條形圖，散點圖，蠟燭圖和氣泡圖

setAutoScaleMinMaxEnabled(boolean enabled)：用於指示是否啟用y軸自動縮放的標誌。如果啟用，則每當視口更改時，y軸就會自動調整為當前x軸範圍的最小和最大y值。對於顯示財務資料的圖表而言，這尤其有趣。預設值：false

setKeepPositionOnRotation(boolean enabled)：設定方向更改後圖表是否應保持其位置（縮放/滾動）。預設值：false

條形圖

setDrawValueAboveBar(boolean enabled)：如果設定為true，則所有值均繪製在其條形上方，而不是其頂部下方。

setDrawBarShadow(boolean enabled)：如果設定為true，則在每個條後面繪製一個灰色區域，指示最大值。啟用他的功能會使效能降低約40％。

setDrawValuesForWholeStack(boolean enabled)：如果設定為true，則將分別繪製堆疊條形圖的所有值，而不僅僅是總和。

setDrawHighlightArrow(boolean enabled)：將其設定為true可以在突出顯示時在每個欄上方繪製突出顯示箭頭

餅形圖

setDrawSliceText(boolean enabled)：將其設定為true可將x值文字繪製到餅圖中。

setUsePercentValues(boolean enabled)：如果啟用此功能，則圖表內的值將以百分比而不是原始值繪製。ValueFormatter然後，以百分比形式提供為to格式提供的值。

setCenterText(SpannableString text)：設定在PieChart中心繪製的文字。較長的文字將被自動“包裝”，以避免被剪下成餅狀。

setCenterTextRadiusPercent(float percent)：設定中心文字的邊框的矩形半徑，以餅孔預設1.f（100％）的百分比表示。

setHoleRadius(float percent)：以最大半徑的百分比（最大值=整個圖表的半徑）設定餅圖中心的孔的半徑，預設為50％

setTransparentCircleRadius(float percent)：以最大半徑的百分比（最大值=整個圖表的半徑）設定在圓形圖中繪製的孔旁邊的透明圓的半徑，預設為55％->表示比中心孔大5％預設

setTransparentCircleColor(int color)：設定透明圓圈的顏色。

setTransparentCircleAlpha(int alpha)：設定透明圓圈應具有的透明度（0-255）。

setMaxAngle(float maxangle)：設定用於計算扇形圓的最大角度。360f表示已滿PieChart，180f表示半餅圖。預設值：360f

圖例

圖例是每個資料物件的指示，如餅狀圖中每個顏色的扇區指示是有圖例完成的

預設情況下，所有圖表型別都支援圖例，並且在為圖表設定資料後將自動生成並繪製圖例。的Legend通常由通過一個標籤的形式/形狀表示多個條目的每一個。

獲取圖表的圖例物件

為了自定義Legend，您可以Legend使用getLegend()方法從圖表中檢索物件：

Legend legend = chart.getLegend();

控制是否應繪製圖例

setEnabled(boolean enabled)：設定Legend啟用或禁用。如果禁用，Legend將不會繪製。

樣式/修改圖例

setTextColor(int color)：設定圖例標籤的顏色。

setTextSize(float size)：在dp中設定圖例標籤的文字大小。

setTypeface(Typeface tf)：設定Typeface圖例標籤的自定義

修剪

setWordWrapEnabled(boolean enabled)：如果啟用，圖例的內容將不會裁剪到圖表範圍之外，而是建立新的一行。請注意，這會降低效能，並且僅適用於圖表下方的圖例。

setMaxSizePercent(float maxSize)：以百分比為單位設定整個圖表檢視中的最大相對大小。預設值：0.95f（95％）

自定義圖例

setPosition(LegendPosition pos)：設定，LegendPosition以定義Legend應該出現的位置。在RIGHT_OF_CHART，RIGHT_OF_CHART_CENTER，RIGHT_OF_CHART_INSIDE，BELOW_CHART_LEFT，BELOW_CHART_RIGHT，BELOW_CHART_CENTER或PIECHART_CENTER中選擇（PieChart…），等等。

setForm(LegendForm shape)：設定LegendForm應使用的。這是圖例標籤旁邊用DataSet圖例條目代表的顏色繪製的形狀。在SQUARE，CIRCLE或LINE之間選擇。

setFormSize(float size)：以dp設定圖例形式的大小。

setXEntrySpace(float space)：設定水平軸上圖例項之間的間隔。

setYEntrySpace(float space)：設定垂直軸上圖例條目之間的間隔。

setFormToTextSpace(float space)：設定圖例標籤和相應的圖例形式之間的空間。

setWordWrapEnabled(boolean enabled)：傳奇文字應該換行嗎？/當前僅以下，左下，右下，中圖中心支援此功能。/您可能希望在自動換行時設定maxSizePercent，以設定文字自動換行的點。

設定自定義標籤和顏色

setCustom(int[] colors, String[] labels)：設定自定義圖例的標籤和顏色陣列。顏色計數應與標籤計數匹配。每種顏色都是針對在相同索引處繪製的表單。空標籤將啟動一個組。（-2）顏色將避免繪製表單。這將禁用自動從數​​據集中計算圖例標籤和顏色的功能。呼叫resetCustom()以重新啟用自動計算（然後notifyDataSetChanged()需要再次自動計算圖例）

resetCustom()：呼叫此選項將禁用自定義圖例標籤（由設定setCustom(...)）。而是，標籤將再次自動計算（notifyDataSetChanged()呼叫後）。

setExtra(int[] colors, String[] labels)：設定在計算圖例後將設定在自動計算的顏色和標籤陣列末尾的顏色和標籤。（如果已經計算了圖例，則需要致電notifyDataSetChanged()以使更改生效）

描述

獲取描述物件

Description description = chart.getDescription();

setEnabled(boolean enabled)啟用或禁用描述

setText(string str)設定描述文字

setPosition（float x，float y）設定說明在螢幕上的位置

示例

折線圖

 

檢視

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Java

 1 //尋找到控制元件
 2 LineChart dongxiaodongchart = findViewById(R.id.chart);
 3 dongxiaodongchart.getAxisRight().setEnabled(false);//y軸右邊不顯示
 4 dongxiaodongchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//只在圖表下面顯示x軸
 5 //建立兩個資料集
 6 List<Entry> valsComp1 = new ArrayList<Entry>();//資料集1
 7 valsComp1.add(new Entry(1,2));
 8 valsComp1.add(new Entry(1.2f,3.9f));
 9 valsComp1.add(new Entry(2f,6));
10 List<Entry> valsComp2 = new ArrayList<Entry>();//資料集2
11 valsComp2.add(new Entry(1,2));
12 valsComp2.add(new Entry(2.2f,3.9f));
13 valsComp2.add(new Entry(3f,6));
14 //建立兩個線物件
15 LineDataSet setComp1 = new LineDataSet(valsComp1, "東小東1");
16 LineDataSet setComp2 = new LineDataSet(valsComp2, "東小東2");
17 //線物件的樣式（更多見：資料物件樣式 ）
18 setComp1.setColor(Color.RED);//設定線的顏色
19 setComp2.setCircleRadius(10);//設定資料點的大小
20 //資料顯示
21 LineData data = new LineData(setComp1,setComp2);
22 dongxiaodongchart.setData(data);
23 dongxiaodongchart.invalidate();

帶顏色填充的折線圖

 檢視

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 Java

 1 //尋找到控制元件
 2 LineChart dongxiaodongchart = findViewById(R.id.chart);
 3 dongxiaodongchart.getAxisRight().setEnabled(false);//y軸右邊不顯示
 4 dongxiaodongchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//只在圖表下面顯示x軸
 5 //建立兩個資料集
 6 List<Entry> valsComp1 = new ArrayList<Entry>();//資料集1
 7 valsComp1.add(new Entry(1,2));
 8 valsComp1.add(new Entry(1.2f,3.9f));
 9 valsComp1.add(new Entry(2f,6));
10 List<Entry> valsComp2 = new ArrayList<Entry>();//資料集2
11 valsComp2.add(new Entry(1,2));
12 valsComp2.add(new Entry(2.2f,3.9f));
13 valsComp2.add(new Entry(3f,6));
14 //建立兩個線物件
15 LineDataSet setComp1 = new LineDataSet(valsComp1, "東小東1");
16 LineDataSet setComp2 = new LineDataSet(valsComp2, "東小東2");
17 //線物件的樣式（更多見：資料物件樣式 ）
18 setComp1.setColor(Color.RED);//設定線的顏色
19 setComp1.setDrawFilled(true);
20 setComp2.setDrawFilled(true);
21 setComp2.setFillColor(Color.YELLOW);
22 //資料顯示
23 LineData data = new LineData(setComp1,setComp2);
24 dongxiaodongchart.setData(data);
25 dongxiaodongchart.invalidate();

 條形圖

檢視 

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 Java

 1 //尋找到控制元件
 2 BarChart dongxiaodongchart = findViewById(R.id.chart);
 3 //不顯示描述
 4 dongxiaodongchart.getDescription().setEnabled(false);
 5 //y軸右邊關閉
 6 dongxiaodongchart.getAxisRight().setEnabled(false);
 7 //x軸設定無網格
 8 XAxis xAxis = dongxiaodongchart.getXAxis();
 9 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
10 xAxis.setDrawGridLines(false);
11 xAxis.setGranularity(1f); //在放大到為軸設定的小數位數不再允許在兩個軸值之間進行區分的點時，可以使用此方法來避免值重複。
12 //建立兩個資料集
13 List<BarEntry> valsComp1 = new ArrayList<BarEntry>();//資料集1
14 valsComp1.add(new BarEntry(1,2));
15 valsComp1.add(new BarEntry(3f,3.9f));
16 valsComp1.add(new BarEntry(5f,6));
17 //建立條形圖物件
18 BarDataSet setComp1 = new BarDataSet(valsComp1, "東小東1");
19 setComp1.setColor(Color.RED);
20 //資料顯示
21 BarData data = new BarData(setComp1);
22 dongxiaodongchart.setData(data);//設定資料
23 dongxiaodongchart.invalidate();//重新整理
24 //設定動畫樣式
25 dongxiaodongchart.animateY(2000,Easing. EaseInOutQuad);

 分組條形圖

檢視 

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 java

 1 //尋找到控制元件
 2 BarChart dongxiaodongchart = findViewById(R.id.chart);
 3 
 4 //設定顏色圖示在右上角顯示，預設是在圖表底部並排顯示
 5 Legend l = dongxiaodongchart.getLegend();
 6 l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
 7 l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
 8 l.setOrientation(Legend.LegendOrientation.VERTICAL);
 9 l.setDrawInside(true);
10 l.setYOffset(0f);
11 l.setXOffset(10f);
12 l.setYEntrySpace(0f);
13 l.setTextSize(8f);
14 
15 //Y軸設定
16 dongxiaodongchart.getAxisRight().setEnabled(false);
17 
18 //X軸設定
19 XAxis xAxis = dongxiaodongchart.getXAxis();//獲取到x軸物件
20 xAxis.setGranularity(1f);//設定網格寬度
21 xAxis.setCenterAxisLabels(true);//設定為刻度顯示在網格中間
22 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//只在圖表下面顯示
23 
24 dongxiaodongchart.getDescription().setEnabled(false);//不顯示描述
25 
26 float groupSpace = 0.08f;//組間隔
27 float barSpace = 0.03f; //每個柱狀圖的間隔
28 float barWidth = 0.2f; //每個柱狀圖的寬度
29 // (0.2 + 0.03) * 4 + 0.08 = 1.00 -> interval per "group"
30 
31 //-----資料-----
32 int groupCount = 3;
33 int startYear = 1998;
34 int endYear = startYear + groupCount;
35 
36 ArrayList<BarEntry> values1 = new ArrayList<>();
37 ArrayList<BarEntry> values2 = new ArrayList<>();
38 ArrayList<BarEntry> values3 = new ArrayList<>();
39 ArrayList<BarEntry> values4 = new ArrayList<>();
40 
41 float randomMultiplier = 6 * 10;
42 
43 for (int i = startYear; i < endYear; i++) {
44     values1.add(new BarEntry(i, (float) (Math.random() * randomMultiplier)));
45     values2.add(new BarEntry(i, (float) (Math.random() * randomMultiplier)));
46     values3.add(new BarEntry(i, (float) (Math.random() * randomMultiplier)));
47     values4.add(new BarEntry(i, (float) (Math.random() * randomMultiplier)));
48 }
49 //設定樣式和生成柱狀圖物件
50 BarDataSet set1, set2, set3, set4;
51 set1 = new BarDataSet(values1, "東小東A");
52 set1.setColor(Color.rgb(104, 241, 175));
53 set2 = new BarDataSet(values2, "東小東B");
54 set2.setColor(Color.rgb(164, 228, 251));
55 set3 = new BarDataSet(values3, "東小東C");
56 set3.setColor(Color.rgb(242, 247, 158));
57 set4 = new BarDataSet(values4, "東小東D");
58 set4.setColor(Color.rgb(255, 102, 0));
59 //資料顯示
60 BarData data = new BarData(set1, set2, set3, set4);
61 dongxiaodongchart.setData(data);
62 //設定柱狀寬度
63 dongxiaodongchart.getBarData().setBarWidth(barWidth);
64 //設定刻度最小值
65 dongxiaodongchart.getXAxis().setAxisMinimum(startYear);
66 //設定刻度最大值
67 dongxiaodongchart.getXAxis().setAxisMaximum(startYear + dongxiaodongchart.getBarData().getGroupWidth(groupSpace, barSpace) * groupCount);
68 //組適配
69 dongxiaodongchart.groupBars(startYear, groupSpace, barSpace);
70 dongxiaodongchart.invalidate();//重新整理資料
71 
72 //設定動畫樣式
73 dongxiaodongchart.animateY(2000,Easing. EaseInOutQuad);

 積木條形圖

 

 檢視

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 Java

 1 //尋找到控制元件
 2 BarChart dongxiaodongchart = findViewById(R.id.chart);
 3 //不顯示描述
 4 dongxiaodongchart.getDescription().setEnabled(false);
 5 //y軸右邊關閉
 6 YAxis leftAxis = dongxiaodongchart.getAxisLeft();
 7 leftAxis.setAxisMinimum(0f); // 從零開始
 8 dongxiaodongchart.getAxisRight().setEnabled(false);
 9 //x軸設定無網格
10 XAxis xAxis = dongxiaodongchart.getXAxis();
11 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
12 xAxis.setDrawGridLines(false);
13 xAxis.setGranularity(1f); //在放大到為軸設定的小數位數不再允許在兩個軸值之間進行區分的點時，可以使用此方法來避免值重複。
14 //建立兩個資料集
15 List<BarEntry> valsComp1 = new ArrayList<BarEntry>();//資料集1
16 valsComp1.add(new BarEntry(-2f,new float[] { 5, 20, 4 }));
17 valsComp1.add(new BarEntry(0f,new float[] { 10,6, 3 }));
18 valsComp1.add(new BarEntry(2f,new float[] { 10, 20, 7 }));
19 //建立條形圖物件
20 BarDataSet setComp1 = new BarDataSet(valsComp1, "東小東1");
21 setComp1.setDrawIcons(false);
22 setComp1.setColors(new int[]{Color.RED,Color.GREEN,Color.BLUE });
23 setComp1.setStackLabels(new String[]{"東1", "東2", "東3"});
24 ArrayList<IBarDataSet> dataSets = new ArrayList<>();
25 dataSets.add(setComp1);
26 //顯示
27 BarData data = new BarData(dataSets);
28 dongxiaodongchart.setData(data);
29 dongxiaodongchart.setFitBars(true);
30 dongxiaodongchart.invalidate();
31 //設定動畫樣式
32 dongxiaodongchart.animateY(2000,Easing. EaseInOutQuad);

 餅形圖

 

 檢視

<com.github.mikephil.charting.charts.PieChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 Java

 1 //尋找到控制元件
 2 PieChart dongxiaodongchart = findViewById(R.id.chart);
 3 //圓環中間顯示
 4 dongxiaodongchart.setCenterText("東小東\n主要標題");
 5 dongxiaodongchart.setCenterTextSize(15);
 6 //邊距設定
 7 dongxiaodongchart.setExtraOffsets(20.f, 10.f, 20.f, 10f);
 8 //資料線條
 9 dongxiaodongchart.setHoleRadius(58f);
10 dongxiaodongchart.setTransparentCircleRadius(61f);
11 //顏色標識顯示
12 Legend l = dongxiaodongchart.getLegend();
13 l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
14 l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
15 l.setOrientation(Legend.LegendOrientation.VERTICAL);
16 //l.setDrawInside(false);//新增不顯示
17 //l.setEnabled(false);
18 //資料
19 List<PieEntry> list=new ArrayList<>();
20 list.add(new PieEntry(30,"東1"));
21 list.add(new PieEntry(30,"東2"));
22 list.add(new PieEntry(40,"東3"));
23 PieDataSet pieDataSet=new PieDataSet(list,"資料標題");
24 //設定樣式
25 pieDataSet.setColors(Color.RED,Color.GRAY,Color.CYAN);//設定各個資料的顏色
26 //設定為值外部顯示,註釋則內部顯示
27 pieDataSet.setYValuePosition(PieDataSet.ValuePosition.OUTSIDE_SLICE);
28 pieDataSet.setValueLineColor(Color.RED);//值引線為紅色
29 pieDataSet.setValueTextSize(30);
30 //輸出值
31 PieData data = new PieData(pieDataSet);
32 data.setValueTextSize(11f);//顯示值的大小
33 data.setValueTextColor(Color.BLUE);//顯示值的顏色
34 dongxiaodongchart.setData(data);//設定資料
35 dongxiaodongchart.invalidate();//重新整理

 全餅圖

 

  檢視

<com.github.mikephil.charting.charts.PieChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

 java

 1 //尋找到控制元件
 2 PieChart dongxiaodongchart = findViewById(R.id.chart);
 3 dongxiaodongchart.getDescription().setText("東小東圖表描述欄位");
 4 //外邊距設定
 5 dongxiaodongchart.setExtraOffsets(20.f, 10.f, 20.f, 10f);
 6 //圖例
 7 Legend l = dongxiaodongchart.getLegend();
 8 l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
 9 l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
10 l.setOrientation(Legend.LegendOrientation.VERTICAL);
11 //資料
12 List<PieEntry> list=new ArrayList<>();
13 list.add(new PieEntry(300,"東1"));
14 list.add(new PieEntry(300,"東2"));
15 list.add(new PieEntry(700,"東3"));
16 PieDataSet pieDataSet=new PieDataSet(list,"資料標題");
17 //設定樣式
18 pieDataSet.setColors(Color.RED,Color.GRAY,Color.CYAN);//設定各個資料的顏色
19 //輸出值
20 PieData data = new PieData(pieDataSet);
21 //資料顯示大小
22 data.setValueTextSize(11f);//顯示值的大小
23 data.setValueTextColor(Color.WHITE);//顯示值
24 //設定顯示單位為%
25 data.setValueFormatter(new PercentFormatter(dongxiaodongchart));
26 //設定開啟百分比顯示
27 dongxiaodongchart.setUsePercentValues(true);
28 //中心圓設定
29 
30 
31 dongxiaodongchart.setHoleRadius(1);//中心圓半徑為1%
32 dongxiaodongchart.setTransparentCircleRadius(0);//中心半透明圓半徑為0%
33 //資料重新整理顯示
34 dongxiaodongchart.setData(data);//設定資料
35 dongxiaodongchart.invalidate();//重新整理

動態資料線圖

 檢視

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp">

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>
<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="新增一條新資料"
    android:onClick="ButADD"
    android:layout_marginTop="30dp" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="重新整理所有資料"
android:onClick="ButREF"
android:layout_marginTop="30dp" />

 java

 1 //尋找到控制元件
 2 dongxiaodongchart = findViewById(R.id.chart);
 3 //設定圖示座標樣式
 4 dongxiaodongchart.getAxisRight().setEnabled(false);//y軸右邊不顯示
 5 dongxiaodongchart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//只在圖表下面顯示x軸
 6 //頂部的線，最高限值虛線
 7 LimitLine ll1 = new LimitLine(3f, "最高限值");//引數是顯示的y軸值
 8 ll1.setLineWidth(2f);//設定線條寬度
 9 ll1.enableDashedLine(10f, 10f, 0f);//配置虛線樣式
10 ll1.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);//設定字型顯示線上的上面
11 ll1.setTextSize(10f);//設定字型大小
12 //底部的線，最低限值虛線
13 LimitLine ll2 = new LimitLine(-2f, "最低限值");
14 ll2.setLineWidth(2f);
15 ll2.enableDashedLine(10f, 10f, 0f);
16 ll2.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);
17 ll2.setTextSize(10f);
18 //獲取y軸物件
19 YAxis yAxis = dongxiaodongchart.getAxisLeft();
20 //設定圖表的y軸顯示最大最小值範圍
21 yAxis.setAxisMaximum(15f);
22 yAxis.setAxisMinimum(-5f);
23 //開始顯示兩條限值線
24 yAxis.addLimitLine(ll1);
25 yAxis.addLimitLine(ll2);
26 //建立兩個資料集
27 List<Entry> valsComp1 = new ArrayList<Entry>();//資料集1
28 valsComp1.add(new Entry(1,2));
29 valsComp1.add(new Entry(1.2f,3.9f));
30 valsComp1.add(new Entry(2f,6));
31 //建立線物件
32 LineDataSet setComp1 = new LineDataSet(valsComp1, "東小東1");
33 //線物件的樣式（更多見：資料物件樣式 ）
34 setComp1.setColor(Color.BLUE);//設定線的顏色
35 setComp1.setDrawFilled(true);
36 //資料顯示
37 LineData data = new LineData(setComp1);
38 dongxiaodongchart.setData(data);
39 dongxiaodongchart.invalidate();
40 }
41 //資料重新整理函式
42 public void refreshvalue(){
43     //建立新的資料
44     ArrayList<Entry> values = new ArrayList<>();
45     for (int i = 0; i < 10; i++) {
46         float val = (float) (Math.random() * 10)-4;//Math.random()：產生一個[0，1)
47         values.add(new Entry(i,val));
48     }
49     //獲取現在的線物件
50     LineDataSet set1=(LineDataSet)  dongxiaodongchart.getData().getDataSetByIndex(0);
51     //設定新的資料
52     set1.setValues(values);
53     //通知資料改變
54     set1.notifyDataSetChanged();
55     dongxiaodongchart.getData().notifyDataChanged();
56     dongxiaodongchart.notifyDataSetChanged();
57     //重新整理顯示
58     dongxiaodongchart.invalidate();
59 }
60 //資料加入一條函式
61 public void addvalue(){
62     //獲取現在的線物件
63     LineDataSet set1=(LineDataSet)  dongxiaodongchart.getData().getDataSetByIndex(0);
64     //設定隨意的座標值
65     int x= set1.getEntryCount();
66     float y = (float) (Math.random() * 10)-4;//Math.random()：產生一個[0，1)
67     //新增一個點
68     set1.addEntry(new Entry(x,y));
69     //通知資料改變
70     set1.notifyDataSetChanged();
71     dongxiaodongchart.getData().notifyDataChanged();
72     dongxiaodongchart.notifyDataSetChanged();
73     //重新整理顯示
74     dongxiaodongchart.invalidate();
75 }
76 //按鍵事件監聽
77 public void ButADD(View v){
78     Toast.makeText(MainActivity.this,"新增一條資料", Toast.LENGTH_SHORT).show();
79     addvalue();
80 }
81 public void ButREF(View v){
82     Toast.makeText(MainActivity.this,"重新整理所有資料顯示", Toast.LENGTH_SHORT).show();
83     refreshvalue();
84 }

開源地址：https://github.com/PhilJay/MPAndroidChart

官方文件：https://weeklycoding.com/mpandroidchart-documentation/

參考：https://blog.csdn.net/qq_44720366/article/details/104583622 

相關文章