原文鏈接：http://blog.csdn.net/guijiaoba/article/details/41444697?utm_source=tuicool

最近一個項目需要用到表格進行統計顯示，本來用的是的achartengine，後來發現一個更加強大的開源框架MPAndroidChart。

下面簡單介紹下MPAndroidChart，MPAndroidChart的效果還是蠻好的，提供各種動畫，這個也是我使用MPAndroidChart，而且放棄achartengine的原因。

Github地址連接，後面是youtube上面演示MPAndroidChart的視頻，MPAndroidChart由於提供了動畫效果，爲了兼容低版本的Android系統，MPAndroidChart需要添加nineoldandroids-2.4.0-2.jar作爲依賴庫，所以如果項目中使用這個表格庫，需要同時導入這個兩個jar，當然如果使用libproject的方式，就不用了。

https://github.com/PhilJay/MPAndroidChart

https://www.youtube.com/watch?v=ufaK_Hd6BpI

http://nineoldandroids.com/

支持功能

核心功能:

支持x，y軸縮放
支持拖拽
支持手指滑動
支持高亮顯示
支持保存圖表到文件中
支持從文件（txt）中讀取數據
預先定義顏色模板
自動生成標註
支持自定義x，y軸的顯示標籤
支持x，y軸動畫
支持x，y軸設置最大值和附加信息
支持自定義字體，顏色，背景，手勢，虛線等

顯示的圖表類型:

LineChart (with legend, simple design) (線性圖)
LineChart (with legend, simple design)(線性圖)
LineChart (cubic lines)(線性圖)
LineChart (single DataSet) (線性圖)
BarChart2D (with legend, simple design)(柱狀圖)

BarChart2D (grouped DataSets)(柱狀圖)

BarChart2D

PieChart (with selection, ...)(餅狀圖)

ScatterChart (with squares, triangles, circles, ... and more)（散列圖）

CandleStickChart (for financial data)

RadarChart (spider web chart)（螂蛛網圖）

使用方法

1、直接使用jar方式，需要導入mpchartlib.jar，nineoldandroidsjar。

2、使用libproject的方式，作爲項目依賴。

步驟:

如果使用 LineChart, BarChart, ScatterChart, CandleStickChart or PieChart , 可以直接在xml中定義。

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

    LineChart chart = (LineChart) findViewById(R.id.chart);

或則直接在代碼中聲明和實例化。

    LineChart chart = new LineChart(Context);

主要的Api方法:

setDescription(String desc): 設置表格的描述
setDescriptionTypeface(Typeface t):自定義表格中顯示的字體
setDrawYValues(boolean enabled): 設置是否顯示y軸的值的數據
setValuePaintColor(int color):設置表格中y軸的值的顏色，但是必須設置setDrawYValues（true）
setValueTypeface(Typeface t):設置字體
setValueFormatter(DecimalFormat format): 設置顯示的格式
setPaint(Paint p, int which): 自定義筆刷

public ChartData getDataCurrent():返回ChartData對象當前顯示的圖表。它包含了所有信息的顯示值最小和最大值等
public float getYChartMin(): 返回當前最小值
public float getYChartMax(): 返回當前最大值
public float getAverage(): 返回所有值的平均值。
public float getAverage(int type): 返回平均值
public PointF getCenter(): 返回中間點
public Paint getPaint(int which): 得到筆刷

setTouchEnabled(boolean enabled): 設置是否可以觸摸，如爲false，則不能拖動，縮放等
setDragScaleEnabled(boolean enabled): 設置是否可以拖拽，縮放
setOnChartValueSelectedListener(OnChartValueSelectedListener l): 設置表格上的點，被點擊的時候，的回調函數
setHighlightEnabled(boolean enabled): 設置點擊value的時候，是否高亮顯示
public void highlightValues(Highlight[] highs): 設置高亮顯示

saveToGallery(String title): 保存圖表到圖庫中
saveToPath(String title, String pathOnSD): 保存.
setScaleMinima(float x, float y): 設置最小的縮放
centerViewPort(int xIndex, float val): 設置視口
fitScreen(): 適應屏幕

動畫:

所有的圖表類型都支持下面三種動畫，分別是x方向，y方向，xy方向。

animateX(int durationMillis): x軸方向
animateY(int durationMillis): y軸方向
animateXY(int xDuration, int yDuration): xy軸方向

mChart.animateX(3000f); // animate horizontal 3000 milliseconds
// or:
mChart.animateY(3000f); // animate vertical 3000 milliseconds
// or:
mChart.animateXY(3000f, 3000f); // animate horizontal and vertical 3000 milliseconds

注意：如果調用動畫方法後，就沒有必要調用invalidate（）方法，來刷新界面了。

添加數據到圖表：

下面是MPAndroidChart中的一個demo實例，簡單介紹怎麼添加數據到圖表中，以及動畫顯示。

[java]view
plain copy
 
package com.xxmassdeveloper.mpchartexample;  

import android.graphics.Color;  

import android.graphics.Typeface;  

import android.os.Bundle;  

import android.view.WindowManager;  

import com.github.mikephil.charting.charts.LineChart;  

import com.github.mikephil.charting.data.Entry;  

import com.github.mikephil.charting.data.LineData;  

import com.github.mikephil.charting.data.LineDataSet;  

import com.github.mikephil.charting.utils.Legend;  

import com.github.mikephil.charting.utils.Legend.LegendForm;  

import com.github.mikephil.charting.utils.XLabels;  

import com.github.mikephil.charting.utils.YLabels;  

import com.xxmassdeveloper.mpchartexample.notimportant.DemoBase;  

import java.util.ArrayList;  

public class LineChartActivityColored extends DemoBase {  

    LineChart[] mCharts = new LineChart[4]; // 4條數據  

    Typeface mTf; // 自定義顯示字體  

    int[] mColors = new int[] { Color.rgb(137, 230, 81), Color.rgb(240, 240, 30),//  

            Color.rgb(89, 199, 250), Color.rgb(250, 104, 104) }; // 自定義顏色  

    @Override  

    protected void onCreate(Bundle savedInstanceState) {  

        super.onCreate(savedInstanceState);  

        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);  

        setContentView(R.layout.activity_colored_lines);  

        mCharts[0] = (LineChart) findViewById(R.id.chart1);  

        mCharts[1] = (LineChart) findViewById(R.id.chart2);  

        mCharts[2] = (LineChart) findViewById(R.id.chart3);  

        mCharts[3] = (LineChart) findViewById(R.id.chart4);  

        // 自定義字體  

        mTf = Typeface.createFromAsset(getAssets(), "OpenSans-Bold.ttf");  

        // 生產數據  

        LineData data = getData(36, 100);  

        for (int i = 0; i < mCharts.length; i++) {  

            // add some transparency to the color with "& 0x90FFFFFF"  

            setupChart(mCharts[i], data, mColors[i % mColors.length]);  

        }  

    }  

    // 設置顯示的樣式  

    void setupChart(LineChart chart, LineData data, int color) {  

        // if enabled, the chart will always start at zero on the y-axis  

        chart.setStartAtZero(true);  

        // disable the drawing of values into the chart  

        chart.setDrawYValues(false);  

        chart.setDrawBorder(false);  

        // no description text  

        chart.setDescription("");// 數據描述  

        // 如果沒有數據的時候，會顯示這個，類似listview的emtpyview  

        chart.setNoDataTextDescription("You need to provide data for the chart.");  

        // enable / disable grid lines  

        chart.setDrawVerticalGrid(false); // 是否顯示水平的表格  

        // mChart.setDrawHorizontalGrid(false);  

        //  

        // enable / disable grid background  

        chart.setDrawGridBackground(false); // 是否顯示錶格顏色  

        chart.setGridColor(Color.WHITE & 0x70FFFFFF); // 表格的的顏色，在這裏是是給顏色設置一個透明度  

        chart.setGridWidth(1.25f);// 表格線的線寬  

        // enable touch gestures  

        chart.setTouchEnabled(true); // 設置是否可以觸摸  

        // enable scaling and dragging  

        chart.setDragEnabled(true);// 是否可以拖拽  

        chart.setScaleEnabled(true);// 是否可以縮放  

        // if disabled, scaling can be done on x- and y-axis separately  

        chart.setPinchZoom(false);//   

        chart.setBackgroundColor(color);// 設置背景  

        chart.setValueTypeface(mTf);// 設置字體  

        // add data  

        chart.setData(data); // 設置數據  

        // get the legend (only possible after setting data)  

        Legend l = chart.getLegend(); // 設置標示，就是那個一組y的value的  

        // modify the legend ...  

        // l.setPosition(LegendPosition.LEFT_OF_CHART);  

        l.setForm(LegendForm.CIRCLE);// 樣式  

        l.setFormSize(6f);// 字體  

        l.setTextColor(Color.WHITE);// 顏色  

        l.setTypeface(mTf);// 字體  

        YLabels y = chart.getYLabels(); // y軸的標示  

        y.setTextColor(Color.WHITE);  

        y.setTypeface(mTf);  

        y.setLabelCount(4); // y軸上的標籤的顯示的個數  

        XLabels x = chart.getXLabels(); // x軸顯示的標籤  

        x.setTextColor(Color.WHITE);  

        x.setTypeface(mTf);  

        // animate calls invalidate()...  

        chart.animateX(2500); // 立即執行的動畫,x軸  

    }  

    // 生成一個數據，  

    LineData getData(int count, float range) {  

        ArrayList<String> xVals = new ArrayList<String>();  

        for (int i = 0; i < count; i++) {  

            // x軸顯示的數據，這裏默認使用數字下標顯示  

            xVals.add(mMonths[i % 12]);  

        }  

        // y軸的數據  

        ArrayList<Entry> yVals = new ArrayList<Entry>();  

        for (int i = 0; i < count; i++) {  

            float val = (float) (Math.random() * range) + 3;  

            yVals.add(new Entry(val, i));  

        }  

        // create a dataset and give it a type  

        // y軸的數據集合  

        LineDataSet set1 = new LineDataSet(yVals, "DataSet 1");  

        // set1.setFillAlpha(110);  

        // set1.setFillColor(Color.RED);  

        set1.setLineWidth(1.75f); // 線寬  

        set1.setCircleSize(3f);// 顯示的圓形大小  

        set1.setColor(Color.WHITE);// 顯示顏色  

        set1.setCircleColor(Color.WHITE);// 圓形的顏色  

        set1.setHighLightColor(Color.WHITE); // 高亮的線的顏色  

        ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();  

        dataSets.add(set1); // add the datasets  

        // create a data object with the datasets  

        LineData data = new LineData(xVals, dataSets);  

        return data;  

    }  

}