<Android開源庫> MPAndroidChart Wiki(譯文)～Part 1

1. 基礎入門

1.1 添加依賴

Gradle 工程添加依賴 (推薦使用)
項目級build.gradle中添加:

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

App下的 build.gradle中添加:

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
}

Maven
pom.xml中添加如下repositories:

<repository>
       <id>jitpack.io</id>
       <url>https://jitpack.io</url>
</repository>

pom.xml中添加如下dependencies

<dependency>
       <groupId>com.github.PhilJay</groupId>
       <artifactId>MPAndroidChart</artifactId>
       <version>v3.0.2</version>
</dependency>

直接使用Jar包文件
下載最新的.jar包，拷貝下載的文件到你的Android項目libs文件夾下然后開始使用這個開源庫。
拷貝整個工程
使用git clone https://github.com/PhilJay/MPAndroidChart.git 命令下載整個工程，這個工程包含sample和MPChartLib庫，然后你可以將這個庫引入到你的Android Studio工程或者是Eclipse工程。

1.2 創建View

要使用LineChart, BarChart, ScatterChart, CandleStickChart, PieChart, BubbleChart 或者 RadarChart，我們可以首先在布局XML文件中定義它：

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

然后我們可以在Fragment，Activity或者其他能拿到它的地方取到對象：

// in this example, a LineChart is initialized from xml
    LineChart chart = (LineChart) findViewById(R.id.chart);

或者我們直接在代碼中創建Chart然后把它添加到布局中去：

// programmatically create a LineChart
    LineChart chart = new LineChart(Context);

    // get a layout defined in xml
    RelativeLayout rl = (RelativeLayout) findViewById(R.id.relativeLayout);
    rl.add(chart); // add the programmatically created chart

1.3 添加數據

當你創建了一個chart實例后，你可以生成一些數據然后把它加入到圖表中去。下面的例子中我們以LineChart為例，對LineChart而言，Entry類代表有X和Y值的圖表中的一個條目。對于其他的Chart類型，如BarChart，你可以使用BarEntry作為數據條目。
為了給你的圖表添加數據，你需要想下面這樣將你的數據封裝成Entry：

YourData[] dataObjects = ...;

List<Entry> entries = new ArrayList<Entry>();

for (YourData data : dataObjects) {

    // turn your data into Entry objects
    entries.add(new Entry(data.getValueX(), data.getValueY())); 
}

下一步，你需要將List< Entry>添加到LineDataSet對象中。DataSet對象包含屬于一組的數據，并且每個數據有自己獨立的風格。如下“Label”只有描述目的如果設置enabled的話，它將會在Legend中顯示出來。

LineDataSet dataSet = new LineDataSet(entries, "Label"); // add entries to dataset
dataSet.setColor(...);
dataSet.setValueTextColor(...); // styling, ...

最后一步，添加LineDataSet到LineData中，LineData包含對應Chart中的所有數據，并且我們可以更深入的定制數據的顯示風格。在創建了數據之后我們將其加入到chart中然后刷新一下。

LineData lineData = new LineData(dataSet);
chart.setData(lineData);
chart.invalidate(); // refresh

上面這些都是很基本的設置和使用。更細節的介紹請查閱setting Data章節—- 結合示例的為你講解如何給各式各樣的圖表添加數據。

1.4 樣式

想要了解chart和數據的設置和樣式，請查閱settings & styling章節。對于各種類型的數據和樣式，請查閱specific settings & styling wiki頁面。

2. Chart交互

MPAndroidChart允許用戶完成自定義于Chart View的觸摸或者是手勢事件，并且通過回調方法響應交互。

2.1 啟用／禁用交互

方法	作用
setTouchEnabled(boolean enabled)	啟用或者禁用觸摸交互
setDragEnabled(boolean enabled)	啟用或者禁用拖拽交互
setScaleEnabled(boolean enabled)	啟用或者禁用縮放交互（X軸和Y軸）
setScaleXEnabled(boolean enabled)	啟用或者禁用X軸縮放交互
setScaleYEnabled(boolean enabled)	啟用或者禁用Y軸縮放交互
setPinchZoom(boolean enabled)	設置為true，則可以使用捏縮放，否則X軸Y軸將會分開縮放
setDoubleTapToZoomEnabled(boolean enabled)	設置為false，雙擊放大功能將會被禁用

2.2 圖表Fling和減速（針對滑動操作）

方法	作用
setDragDecelerationEnabled(boolean enabled)	如果設置為true，滑動操作完成后圖表還會繼續滾動。默認值為true
setDragDecelerationFrictionCoef(float coef)	減速摩擦系數在[0; 1]間隔，較高的值表示速度將緩慢降低，例如，如果設置為0，它將立即停止。 1是無效值，將自動轉換為0.9999。

2.3 高亮值

如何通過點擊手勢高亮數據條目，請查閱highlighting section

2.4 手勢回調

OnChartGestureListener接口可以讓我們定義手勢響應事件

public interface OnChartGestureListener {

    /**
     * Callbacks when a touch-gesture has started on the chart (ACTION_DOWN)
     *
     * @param me
     * @param lastPerformedGesture
     */
    void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture);

    /**
     * Callbacks when a touch-gesture has ended on the chart (ACTION_UP, ACTION_CANCEL)
     *
     * @param me
     * @param lastPerformedGesture
     */
    void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture);

    /**
     * Callbacks when the chart is longpressed.
     * 
     * @param me
     */
    public void onChartLongPressed(MotionEvent me);

    /**
     * Callbacks when the chart is double-tapped.
     * 
     * @param me
     */
    public void onChartDoubleTapped(MotionEvent me);

    /**
     * Callbacks when the chart is single-tapped.
     * 
     * @param me
     */
    public void onChartSingleTapped(MotionEvent me);

    /**
     * Callbacks then a fling gesture is made on the chart.
     * 
     * @param me1
     * @param me2
     * @param velocityX
     * @param velocityY
     */
    public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY);

   /**
     * Callbacks when the chart is scaled / zoomed via pinch zoom gesture.
     * 
     * @param me
     * @param scaleX scalefactor on the x-axis
     * @param scaleY scalefactor on the y-axis
     */
    public void onChartScale(MotionEvent me, float scaleX, float scaleY);

   /**
    * Callbacks when the chart is moved / translated via drag gesture.
    *
    * @param me
    * @param dX translation distance on the x-axis
    * @param dY translation distance on the y-axis
    */
    public void onChartTranslate(MotionEvent me, float dX, float dY);
}

簡單地在類中實現上面這個接口，然后設置到對應的chart對象

chart.setOnChartGestureListener(this);

3. 高亮

本節重點介紹通過點擊手勢和基于版本v3.0.0以編程方式突出顯示圖表中的條目的主題。

3.1 啟用／禁用高亮

方法	作用
setHighlightPerDragEnabled(boolean enabled)	在圖表上將其設置為true，以便在完全縮小時在圖表上拖動時突出顯示。默認值：true
setHighlightPerTapEnabled(boolean enabled)	在圖表上將其設置為false可防止點擊手勢突出顯示值。仍然可以通過拖動或以編程方式突出顯示值。默認值：true
setMaxHighlightDistance(float distanceDp)	設置最大高亮距離(dp)。圖表上條目大于這個距離不會觸發高亮。默認值：500dp

除此之外，單獨的DataSet也能配置高亮：

  dataSet.setHighlightEnabled(true); // allow highlighting for DataSet

  // set this to false to disable the drawing of highlight indicator (lines)
  dataSet.setDrawHighlightIndicators(true); 
  dataSet.setHighlightColor(Color.BLACK); // color for highlight indicator
  // and more...

3.2 代碼實現高亮

方法	作用
highlightValue(float x, int dataSetIndex, boolean callListener)	突出顯示給定DataSet中指定x位置的值。 dataSetIndex為-1時撤消所有高亮。 callListener決定了是否調用選擇監聽器。
highlightValue(Highlight high, boolean callListener)	突出顯示由提供的高光對象表示的值。提供null以撤銷所有突出顯示。 callListener決定了是否調用選擇監聽器。
highlightValues(Highlight[] highs)	突出顯示highs代表的高光對象表示的值。提供null或者是空數組取消所有高亮
getHighlighted()	以highlight[]的形式返回包含所有高光條目信息，X坐標，DateSet索引

3.3 選擇回調

開源庫提供了大量用來處理交互的監聽器。OnChartValueSelectedListener是其中一個，用來處理通過觸摸高亮數據條目時處理回調：

public interface OnChartValueSelectedListener {
    /**
    * Called when a value has been selected inside the chart.
    *
    * @param e The selected Entry.
    * @param h The corresponding highlight object that contains information
    * about the highlighted position
    */
    public void onValueSelected(Entry e, Highlight h);
    /**
    * Called when nothing has been selected or an "un-select" has been made.
    */
    public void onNothingSelected();
}

在需要接受回調的類中實現上面這個接口，然后將監聽器設置到Chart即可

chart.setOnChartValueSelectedListener(this);

3.4 Highlight類

Hightlight類代表一個高亮條目的所有數據，如高亮條目本身，它的DataSet，它在界面上的繪制位置等等。這個類可以用來得到當前高亮條目的信息，或者用來告訴Chart，需要高亮哪些條目。為了實現這些目的，Highlight類提供了兩個構造方法：

 /** constructor for standard highlight */
 public Highlight(float x, int dataSetIndex) { ... }

 /** constructor for stacked BarEntry highlight */
 public Highlight(float x, int dataSetIndex, int stackIndex) { ... }

通過構造函數你可以創建Hightlight對象，然后通過代碼的方式實現高亮：

// highlight the entry and x-position 50 in the first (0) DataSet
Highlight highlight = new Highlight(50f, 0); 

chart.highlightValue(highlight, false); // highlight this value, don't call listener

3.5 自定義高亮器

所有以高亮手勢形式顯示的用戶輸入都由默認的ChartHighlighter類進行內部處理。使用以下方法可以用自定義實現替換默認的highligher：

方法	作用
setHighlighter(ChartHighlighter highlighter)	設置一個自定義高亮器來處理所有圖表上的高亮事件。你的自定義高亮器必須繼承ChartHighlighter類

4. 軸

該wiki頁面重點介紹AxisBase類，XAxis（XAxis）和YAxis（YAxis）的基礎類。在v2.0.0中引入
下面提到的以下方法都可以應用于兩個軸。

軸類允許特定的樣式，包括以下組件/部件（可以包括）：
標簽（以垂直（y軸）或水平（x軸）對齊繪制），其中包含軸描述值
所謂的“軸線”被直接繪制在標簽附近并與標簽平行
“網格線”，各自源自水平方向的軸標簽
限制線，允許呈現特殊信息，如邊界或約束

4.1 控制軸線繪制（哪些部分需要繪制）

方法	作用
setEnabled(boolean enabled)	設置軸啟用或禁用。如果禁用，無論任何其他設置如何，都不會繪制軸的任何部分
setDrawLabels(boolean enabled)	將其設置為true可以繪制軸的標簽。
setDrawAxisLine(boolean enabled)	如果沿著軸（軸線）的線應該被繪制，則將其設置為true。
setDrawGridLines(boolean enabled)	將其設置為true可以繪制軸的網格線。

4.2 自定義軸的范圍（最小值／最大值）

方法	作用
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軸值之間的最小間隔。這可以用于在放大到為軸設置的小數位數不再允許區分兩個軸值的點時避免重復值。
setGranularityEnabled(boolean enabled)	啟用在放大時限制y軸間隔的粒度特征。默認值：false

4.3 樣式/修改軸

方法	作用
setTextColor(int color)	設置軸標簽的文字顏色.
setTextSize(float size)	設置軸標簽的文字大小(dp)
setTypeface(Typeface tf)	設置軸標簽的字體
setGridColor(int color)	設置軸網格線的顏色
setGridLineWidth(float width)	設置軸網格線的寬度
setAxisLineColor(int color)	設置軸線的顏色
setAxisLineWidth(float width)	設置軸線的寬度
enableGridDashedLine(float lineLength, float spaceLength, float phase)	使網格線以虛線模式繪制，例如”- - - - - -”。 “lineLength”控制線段的長度，“spaceLength”控制線間的空間，“phase”控制起點。

4.4 格式化軸值

對于格式化軸值，可以使用IAxisValueFormatter接口，你可以使用axis.setValueFormatter(IAxisValueFormatter formatter)方法將自定義格式設置到軸，具體請查閱here

4.5 限制值

兩個軸都支持所謂的LimitLine，允許提供特殊信息，如邊界或約束。添加到YAxis的LimitLines在水平方向繪制，并且在添加到XAxis時在垂直方向繪制。下面介紹如何從軸中添加和刪除LimitLines：

方法	作用
addLimitLine(LimitLine l)	給軸添加一條LimitLine
removeLimitLine(LimitLine l)	移除軸上一條指定的LimitLine
	還有很多添加／移除的方法
setDrawLimitLinesBehindData(boolean enabled)	允許控制LimitLines和實際數據之間的z順序。如果將此設置為true，則LimitLine將在實際數據之后繪制，否則在頂部。默認值：false

限制線（LimitLine類）（正如名稱可能指示的），可以使用簡單線條為用戶提供附加信息。

例如，你的圖表可能會顯示用戶使用應用程序記錄的各種血壓測量結果。為了通知用戶超過140 mmHg的收縮壓被認為是健康風險，您可以在140處添加LimitLine來提供該信息。

4.6 示例代碼

YAxis leftAxis = chart.getAxisLeft();

LimitLine ll = new LimitLine(140f, "Critical Blood Pressure");
ll.setLineColor(Color.RED);
ll.setLineWidth(4f);
ll.setTextColor(Color.BLACK);
ll.setTextSize(12f);
// .. and more styling options

leftAxis.addLimitLine(ll);

5. X軸

XAxis是AxisBase的子類，它繼承了許多樣式和方法。
XAxis類（在2.0.0之前的版本中稱為 XLabels），是與橫軸有關的所有數據和信息容器。每個Line-，Bar-，Scatter-，CandleStick-和RadarChart都有一個XAxis對象。
XAxis類允許特定的樣式，包括以下組件（可以包括）以下組件/部件：

所謂的“軸線”被直接繪制在標簽附近并與標簽平行
“網格線”，各自源于垂直方向的軸標簽

通過如下方式獲取XAxis實例：

XAxis xAxis = chart.getXAxis();

5.1 自定義XAxis

方法	作用
setLabelRotationAngle(float angle)	設置繪制x軸標簽的角度（以度為單位）
setPosition(XAxisPosition pos)	設置XAxis位置。在TOP，BOTTOM，BOTH_SIDED，TOP_INSIDE或BOTTOM_INSIDE之間進行選擇

5.2 示例代碼

XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setTextSize(10f);
xAxis.setTextColor(Color.RED);
xAxis.setDrawAxisLine(true);
xAxis.setDrawGridLines(false);
// set a custom value formatter
xAxis.setValueFormatter(new MyCustomFormatter()); 
// and more...

6. YAxis

YAxis是AxisBase的子類。這個wiki只描述了YAxis，而不是父類。

YAxis類（在2.0.0版本的中稱為YLabels），是與垂直軸相關的所有數據和信息容器。每個Line-，Bar-，Scatter或CandleStickChart都有一個左和右YAxis對象，分別負責左軸或右軸。 RadarChart只有一個YAxis。默認情況下，圖表的兩個軸都被啟用，并將被繪制。
通過如下方式獲取YAxis實例：

YAxis leftAxis = chart.getAxisLeft();
YAxis rightAxis = chart.getAxisRight();

YAxis leftAxis = chart.getAxis(AxisDependency.LEFT);

YAxis yAxis = radarChart.getYAxis(); // this method radarchart only

在運行時，使用public AxisDependency getAxisDependency（）來確定此軸表示的圖表的邊。

所有會影響到軸數值范圍的自定義設置都需要在設置圖表數據之前完成。

6.1 Axis Dependency

根據默認值，添加到圖表的所有數據都會與圖表的左側YAxis對應。如果沒有進一步指定和啟用，則右側的YAxis被調整為與左軸相同的刻度。

如果你的圖表需要支持不同的軸刻度，則可以通過設置數據應該對應的軸來實現。這可以通過更改DataSet對象的AxisDependency來實現：

LineDataSet dataSet = ...; // get a dataset
dataSet.setAxisDependency(AxisDependency.RIGHT);

設置此項將更改你的數據對應的軸。

6.2 零線

除了沿YAxis上的每個值水平位置的網格線之外，還有一個所謂的零線，它在軸上的零（0）值處繪制，并且與網格線相似，但可以單獨配置。

方法	作用
setDrawZeroLine(boolean enabled)	啟用 / 禁用零線。
setZeroLineWidth(float width)	設置零線的寬度。
setZeroLineColor(int color)	設置零線的顏色

零線示例代碼：

// data has AxisDependency.LEFT
YAxis left = mChart.getAxisLeft();
left.setDrawLabels(false); // no axis labels
left.setDrawAxisLine(false); // no axis line
left.setDrawGridLines(false); // no grid lines
left.setDrawZeroLine(true); // draw a zero line
mChart.getAxisRight().setEnabled(false); // no right axis

上述代碼結果如下所示。不繪制軸值，不繪制網格線或軸線，只繪制零線。

6.3 更多示例代碼

YAxis yAxis = mChart.getAxisLeft();
yAxis.setTypeface(...); // set a different font
yAxis.setTextSize(12f); // set the text size
yAxis.setAxisMinimum(0f); // start at zero
yAxis.setAxisMaximum(100f); // the axis maximum is 100
yAxis.setTextColor(Color.BLACK);
yAxis.setValueFormatter(new MyValueFormatter());
yAxis.setGranularity(1f); // interval 1
yAxis.setLabelCount(6, true); // force 6 labels
//... and more

本文鏈接：https://blog.csdn.net/poorkick/article/details/73008693

智能推薦

Android中MPAndroidChart使用Demo

由于Google提供的AChartEngine的功能強大但使用起來較為復雜，MPAndroidChart同樣能夠實現一些效果較好的直方圖，折線圖，餅圖等繪制，使用也較為簡單輕便；介紹MPAndroidChart 主要的Api方法: setDescription(String desc) : 設置表格的描述 setDescriptionTypeface(Typeface t) :自定義表格中顯示的...

Android MPAndroidChart柱形圖.

1.先導入依賴 2.布局文件 3.MainActivity ...

MPAndroidChart初次使用（1）——餅狀圖

應開發的需要，需要畫各種各種圖表，發現MPAndroidChart這個寶藏。 MPAndroidChart的Github鏈接這里說明一下餅狀圖的畫法，以及自己遇到的坑。效果圖 1.添加依賴在build.gradle中添加依賴。注意：依賴很重要，網上有很多MPAndroidChart的教程，你們會發現他們會有一定的差異。因為MPAndroidChart是在不斷更新，所以他的使用方法也會發生變...

【1】MPAndroidChart圖表庫的使用—來創建我們的第一張折線圖

【1】MPAndroidChart圖表庫的使用—來創建我們的第一張圖表由于項目需要最近就在學習MPAndroidChart這個優秀的圖表類庫的使用方法，既然是第三方的庫也就需要我們潛下心來慢慢學習其用法，但是當我去搜索MpAndroidChart的用法時完全被博客中的大段大段的代碼嚇到了，一個HelloWord例子竟然需要寫這么長的代碼和設置這么多屬性？？？后來當我看到MPAndro...

com.mysugr.MPAndroidChart:MPAndroidChart:3.1.0-mysugr-1畫圖

MPAndroidChart畫圖導入架包，是3.1.0版本的哦。 xml布局中設置圖形顯示的位置，加id。 Java類中的核心代碼！！！讓你傷腦子的餅圖就完成了！感覺少了點，那再加個折線圖吧！第一次發博客，有些不足的地方請告知下...