android開源圖表庫MPAndroidChart

huona6299 8年前發布 | 26K 次閱讀 Android開發移動開發

來自： http://blog.csdn.net//guijiaoba/article/details/41444697

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

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

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

https://github.com/PhilJay/MPAndroidChart

https://www.油Tube.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實例，簡單介紹怎么添加數據到圖表中，以及動畫顯示。

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;
}

}</pre> 
運行效果圖如下：

本文由用戶 huona6299 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1454167068589.html

Android開發移動開發

android開源圖表庫MPAndroidChart

支持功能

使用方法

相關經驗

相關資訊

相關文檔

目錄