基于Android MPAndroidChart实现腾讯QQ群数据统计报表核心功能

川长思鸟来 2023-10-16 22:06 10阅读 0赞

**基于Android MPAndroidChart实现腾讯QQ群数据统计报表核心功能**

腾讯QQ移动客户端（新版）的QQ群有一项功能比较有趣，是关于QQ群的。QQ群新增一项功能开放给具有管理权限的群成员：管理群 -> 群数据 中，会看到QQ群的一些基础数据统计报表，如人数、发言条数的统计报表，如图：

![Center][]

我之前写了一篇文章是关于Android平台上的一个统计报表的开源框架MPAndroidChart，文章介绍了如何在自己的项目中使用MPAndroidChart制作统计报表，同时给出了基本折线图的一般用法（《Android统计图表MPAndroidChart》，链接地址：[http://blog.csdn.net/zhangphil/article/details/47656521][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布局文件：

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>

代码运行后，核心功能实现（细节的美工部分有待完善），结果如图：

![Center 1][]

[Center]: https://img-blog.csdn.net/20150815204509928?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_zhangphil_article_details_47656521]: http://blog.csdn.net/zhangphil/article/details/47656521
[Center 1]: https://img-blog.csdn.net/20150815205433566?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center