Android統計圖表MPAndroidChart



Android統計圖表MPAndroidChart

MPAndroidChart是在Android平台上開源的第三方統計圖表庫，可以繪制樣式複雜、豐富的各種統計圖表，如一般常見的折線圖、餅狀圖、柱狀圖、散點圖、金融股票中使用的的“蠟燭”圖、“泡泡”統計圖、雷達狀統計餅狀圖等等。簡言之，AndroidMPChart基本上可以滿足日常在Android平台上的統計圖表開發需要。

AndroidMPChart在github上的項目首頁：

https://github.com/PhilJay/MPAndroidChart 在自己的項目的libs中，導入其釋出的jar包即可使用MPAndroidChart。MPAndroidChart釋出的jar包頁面在： https://github.com/PhilJay/MPAndroidChart/releases

AndroidMPChart使用方法：在上面的releases頁面下載下傳最新的jar包，複制到自己的項目libs中即可使用。如圖：

注：寫作本文是基于MPAndroidChart的版本：mpandroidchartlibrary-2-1-3.jar

現在，先做一個基礎的AndroidMPChart折線圖，折線圖在平時的統計圖表中應用最多，AndroidMPChart提供了豐富的功能給予支援。

效果圖如下：

現給出實作上述統計圖表的全部代碼。

MainActivity.java的代碼：

package zhangphil.linechart;

import java.util.ArrayList;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.Legend.LegendForm;
import com.github.mikephil.charting.components.Legend.LegendPosition;
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.ValueFormatter;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

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

		// 制作7個資料點（沿x坐标軸）
		LineData mLineData = makeLineData(7);
		setChartStyle(chart, mLineData, Color.WHITE);
	}

	// 設定chart顯示的樣式
	private void setChartStyle(LineChart mLineChart, LineData lineData,
			int color) {
		// 是否在折線圖上添加邊框
		mLineChart.setDrawBorders(false);

		mLineChart.setDescription("描述@ZhangPhil");// 資料描述

		// 如果沒有資料的時候，會顯示這個，類似listview的emtpyview
		mLineChart
				.setNoDataTextDescription("如果傳給MPAndroidChart的資料為空，那麼你将看到這段文字。@Zhang Phil");

		// 是否繪制背景顔色。
		// 如果mLineChart.setDrawGridBackground(false)，
		// 那麼mLineChart.setGridBackgroundColor(Color.CYAN)将失效;
		mLineChart.setDrawGridBackground(false);
		mLineChart.setGridBackgroundColor(Color.CYAN);

		// 觸摸
		mLineChart.setTouchEnabled(true);

		// 拖拽
		mLineChart.setDragEnabled(true);

		// 縮放
		mLineChart.setScaleEnabled(true);

		mLineChart.setPinchZoom(false);

		// 設定背景
		mLineChart.setBackgroundColor(color);

		// 設定x,y軸的資料
		mLineChart.setData(lineData);

		// 設定比例圖示示，就是那個一組y的value的
		Legend mLegend = mLineChart.getLegend();

		mLegend.setPosition(LegendPosition.BELOW_CHART_CENTER);
		mLegend.setForm(LegendForm.CIRCLE);// 樣式
		mLegend.setFormSize(15.0f);// 字型
		mLegend.setTextColor(Color.BLUE);// 顔色

		// 沿x軸動畫，時間2000毫秒。
		mLineChart.animateX(2000);
	}

	/**
	 * @param count
	 *            資料點的數量。
	 * @return
	 */
	private LineData makeLineData(int count) {
		ArrayList<String> x = new ArrayList<String>();
		for (int i = 0; i < count; i++) {
			// x軸顯示的資料
			x.add("x:" + i);
		}

		// y軸的資料
		ArrayList<Entry> y = new ArrayList<Entry>();
		for (int i = 0; i < count; i++) {
			float val = (float) (Math.random() * 100);
			Entry entry = new Entry(val, i);
			y.add(entry);
		}

		// y軸資料集
		LineDataSet mLineDataSet = new LineDataSet(y, "測試資料集。by ZhangPhil");

		// 用y軸的集合來設定參數
		// 線寬
		mLineDataSet.setLineWidth(3.0f);

		// 顯示的圓形大小
		mLineDataSet.setCircleSize(5.0f);

		// 折線的顔色
		mLineDataSet.setColor(Color.DKGRAY);

		// 圓球的顔色
		mLineDataSet.setCircleColor(Color.GREEN);

		// 設定mLineDataSet.setDrawHighlightIndicators(false)後，
		// Highlight的十字交叉的縱橫線将不會顯示，
		// 同時，mLineDataSet.setHighLightColor(Color.CYAN)失效。
		mLineDataSet.setDrawHighlightIndicators(true);

		// 按擊後，十字交叉線的顔色
		mLineDataSet.setHighLightColor(Color.CYAN);

		// 設定這項上顯示的資料點的字型大小。
		mLineDataSet.setValueTextSize(10.0f);

		// mLineDataSet.setDrawCircleHole(true);

		// 改變折線樣式，用曲線。
		// mLineDataSet.setDrawCubic(true);
		// 預設是直線
		// 曲線的平滑度，值越大越平滑。
		// mLineDataSet.setCubicIntensity(0.2f);

		// 填充曲線下方的區域，紅色，半透明。
		// mLineDataSet.setDrawFilled(true);
		// mLineDataSet.setFillAlpha(128);
		// mLineDataSet.setFillColor(Color.RED);

		// 填充折線上資料點、圓球裡面包裹的中心空白處的顔色。
		mLineDataSet.setCircleColorHole(Color.YELLOW);

		// 設定折線上顯示資料的格式。如果不設定，将預設顯示float資料格式。
		mLineDataSet.setValueFormatter(new ValueFormatter() {

			@Override
			public String getFormattedValue(float value) {
				int n = (int) value;
				String s = "y:" + n;
				return s;
			}
		});

		ArrayList<LineDataSet> mLineDataSets = new ArrayList<LineDataSet>();
		mLineDataSets.add(mLineDataSet);

		LineData mLineData = new LineData(x, mLineDataSets);

		return mLineData;
	}
}           

MainActivity.java需要的activity_main.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

MPAndroidChart提供了豐富的參數設計條件，可以設計樣式豐富統計圖表，比如在本例中，如果把注釋掉的這段代碼重新啟用：

// 改變折線樣式，用曲線。
		// mLineDataSet.setDrawCubic(true);
		// 預設是直線
		// 曲線的平滑度，值越大越平滑。
		// mLineDataSet.setCubicIntensity(0.2f);

		// 填充曲線下方的區域，紅色，半透明。
		// mLineDataSet.setDrawFilled(true);
		// mLineDataSet.setFillAlpha(128);
		// mLineDataSet.setFillColor(Color.RED);           

那麼折線圖的樣式就變成這樣：