基于Android MPAndroidChart實作騰訊QQ群資料統計報表核心功能

騰訊QQ移動用戶端（新版）的QQ群有一項功能比較有趣，是關于QQ群的。QQ群新增一項功能開放給具有管理權限的群成員：管理群 -> 群資料中，會看到QQ群的一些基礎資料統計報表，如人數、發言條數的統計報表，如圖：

我之前寫了一篇文章是關于Android平台上的一個統計報表的開源架構MPAndroidChart，文章介紹了如何在自己的項目中使用MPAndroidChart制作統計報表，同時給出了基本折線圖的一般用法（《Android統計圖表MPAndroidChart》，連結位址：

http://blog.csdn.net/zhangphil/article/details/47656521

）。我現在基于MPAndroidChart，在Android實作騰訊QQ群的統計報表的核心功能界面。現在給出實作的代碼。

測試的MainActivity.java代碼：

package zhangphil.chart;

import java.util.ArrayList;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.MarkerView;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.XAxis.XAxisPosition;
import com.github.mikephil.charting.components.YAxis;
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.highlight.Highlight;
import com.github.mikephil.charting.utils.ValueFormatter;

import android.support.v7.app.ActionBarActivity;
import android.widget.TextView;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;

/**
 * @author Phil
 *
 */
public class MainActivity extends ActionBarActivity {

	private final int Y_BASE = 500;
	private final String DATA_SET_LABEL = "發言條數。by ZhangPhil";

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

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

		// 彈出的資料點提示框。
		MarkerView mv = new MyMarkerView(this, R.layout.marker_view);
		chart.setMarkerView(mv);

		// 制作7個資料點（沿x坐标軸）
		LineData mLineData = makeLineData(7);

		// 把X坐标軸放置到底部。預設的是在頂部。
		XAxis xAxis = chart.getXAxis();
		xAxis.setPosition(XAxisPosition.BOTTOM);

		// X軸坐标線的顔色
		xAxis.setAxisLineColor(Color.LTGRAY);

		// false将不顯示圖表網格中的x軸标線
		// xAxis.setEnabled(false);

		// 不顯示右邊的Y坐标軸值
		YAxis rightYAxis = chart.getAxisRight();
		rightYAxis.setDrawLabels(false);

		rightYAxis.setGridColor(Color.LTGRAY);

		// 不顯示左邊的Y坐标軸值
		YAxis leftYAxis = chart.getAxisLeft();
		leftYAxis.setDrawLabels(false);

		leftYAxis.setGridColor(Color.LTGRAY);

		setChartStyle(chart, mLineData, Color.WHITE);
	}

	// 設定顯示的樣式
	private void setChartStyle(LineChart mLineChart, LineData lineData,
			int color) {
		mLineChart.setDrawBorders(false);

		mLineChart.setDescription(null);

		// 如果沒有資料的時候，會顯示這個，類似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.setEnabled(false);
		// 那麼下面四行代碼将失效。
		// mLegend.setPosition(LegendPosition.BELOW_CHART_CENTER);
		// mLegend.setForm(LegendForm.LINE);
		// mLegend.setFormSize(8.0f);
		// mLegend.setTextColor(Color.BLUE);
		mLegend.setEnabled(false);

		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("8." + (i + 6));
		}

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

		// y軸資料集
		LineDataSet mLineDataSet = new LineDataSet(y, DATA_SET_LABEL);

		// 用y軸的集合來設定參數
		mLineDataSet.setLineWidth(4.0f);
		mLineDataSet.setCircleSize(5.0f);
		mLineDataSet.setColor(Color.GREEN);
		mLineDataSet.setCircleColor(Color.GREEN);

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

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

		// mLineDataSet.setDrawCircleHole(true);

		// 改變折線樣式，用曲線。
		mLineDataSet.setDrawCubic(true);
		// 曲線的平滑度
		mLineDataSet.setCubicIntensity(0.2f);

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

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

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

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

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

		LineData mLineData = new LineData(x, mLineDataSets);

		// 不要在折線上标出資料。
		mLineData.setDrawValues(false);

		return mLineData;
	}

	/**
	 * @author Phil
	 *
	 *         構造一個類似Android Toast的彈出消息提示框。
	 */
	private class MyMarkerView extends MarkerView {

		private TextView tvContent;

		public MyMarkerView(Context context, int layoutResource) {
			super(context, layoutResource);
			tvContent = (TextView) findViewById(R.id.tvContent);
		}

		@Override
		public void refreshContent(Entry e, Highlight highlight) {
			int n = (int) e.getVal();
			tvContent.setText(n + "");
			// if (e instanceof CandleEntry) {
			// CandleEntry ce = (CandleEntry) e;
			// tvContent.setText(""
			// + Utils.formatNumber(ce.getHigh(), 0, true));
			// } else {
			// tvContent.setText("" + Utils.formatNumber(e.getVal(), 0, true));
			// }
		}

		@Override
		public int getXOffset() {
			return -(getWidth() / 2);
		}

		@Override
		public int getYOffset() {
			return -getHeight();
		}
	}
}

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="200dip" />
    
</RelativeLayout>

MainActivity.java中MyMarkerView類加載需要的布局檔案marker_view.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="50dip"
    android:layout_height="30dip"
    android:background="@drawable/marker" >

    <TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:textSize="10dp"
        android:textColor="@android:color/white"
        android:ellipsize="end"
        android:singleLine="true" />

</RelativeLayout>

代碼運作後，核心功能實作（細節的美工部分有待完善），結果如圖：

基于Android MPAndroidChart實作騰訊QQ群資料統計報表核心功能

繼續閱讀

三年開發經驗，從小廠離職後，我憑什麼拿到了阿裡、騰訊、今日頭條的offer我為什麼離職準備面試刷題履歷

史玉柱經典語錄

Android網絡程式設計之使用HttpClient批量上傳檔案（一）1.預備知識：2.通過HttpCient上傳檔案程式運作效果圖：3.完成項目代碼：

Android網絡程式設計之使用HttpClient批量上傳檔案（二）AsyncTask+HttpClient并實作上傳進度監聽 Android網絡程式設計之使用HttpClient批量上傳檔案（二）AsyncTask+HttpClient并實作上傳進度監聽

android 使用shape自定義圓角矩形

中國古代經典（漢英雙語對照）

為什麼不再使用 Android MVVM

方法數超了65535 無法安裝的解決方案

android調用系統相機拍攝擷取照片的兩種方法

Android調用系統拍照擷取圖檔問題

Android Studio中Make Project、Clean Project、Rebuild Project 的作用

新買的便攜式藍牙标簽列印機內建測試起因分析提供的SDK開始使用藍牙測試工具進行測試列印列印亂碼分析JAVA中Unicode轉ANCI工具連結

Android面試題——5.常見面試官提問Android面試題①

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android電視機（機頂盒）初次開發的一些經驗分享