MPChartLib绘制曲线图

来源：互联网发布：清泉防联云流量软件编辑：程序博客网时间：2024/05/22 16:40

关于android实现绘制曲线图或者折线图功能，有很多第三方架包，也可以自己画  ，不过不建议自己画，第一时间浪费掉了  ，第二性能还不一定好，既然有第三方的，为什么不直接使用第三方的呢？刚开始我使用的是achartengine 这个第三方架包 ，真的是不咋地啊  ，做出来给boss看 各种不行，也不知道怎么改了，没办法  只有换其他的 ，后来到网上去找找  实在找不到了  ，只有去问问其他做技术的了，他们给我推荐了这个MpChartLib，GitHub的地址为：  哈哈   这次集成更简单  而且boss一看就通过了，想想之前的那个真苦逼啊  ， 好了  废话不多说了 ，老规矩，先看工程结构图：

这里写图片描述

代码真的很简单，就一个类这里写代码片

package com.example.linedemo;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.WindowManager;import android.widget.ImageView;import android.widget.TextView;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import com.github.mikephil.charting.charts.CombinedChart;import com.github.mikephil.charting.charts.CombinedChart.DrawOrder;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.BarData;import com.github.mikephil.charting.data.BarDataSet;import com.github.mikephil.charting.data.BarEntry;import com.github.mikephil.charting.data.BubbleData;import com.github.mikephil.charting.data.BubbleDataSet;import com.github.mikephil.charting.data.BubbleEntry;import com.github.mikephil.charting.data.CandleData;import com.github.mikephil.charting.data.CandleDataSet;import com.github.mikephil.charting.data.CandleEntry;import com.github.mikephil.charting.data.CombinedData;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.data.ScatterData;import com.github.mikephil.charting.data.ScatterDataSet;import com.github.mikephil.charting.utils.ColorTemplate;import android.graphics.Color;public class chartView extends Activity implements OnClickListener {    private Intent intent;    private CombinedChart mChart;    private final int itemcount = 12;    private List<String> months = new ArrayList<String>();    private List<Map<String, Object>> month = new ArrayList<Map<String, Object>>();    private List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();    private String[] mTimes = new String[] { "00:00", "1:00", "2:00", "3:00",            "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00",            "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00",            "19:00", "20:00", "21:00", "22:00", "23:00", };    private int[] arrs = {10,15,12,22,43,25,19,30,32,15,8,26,19,34,44,20,15,5,35,24,16,28,43};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,                WindowManager.LayoutParams.FLAG_FULLSCREEN);        setContentView(R.layout.chartview);        ImageView backbtn = (ImageView) findViewById(R.id.backbtn);        backbtn.setOnClickListener(this);        intent = getIntent();        TextView titleView = (TextView) findViewById(R.id.title_bar_name);        titleView.setText(intent.getStringExtra("days") + "天坐姿曲线图");        mChart = (CombinedChart) findViewById(R.id.chart1);        mChart.setDescription("");        mChart.setBackgroundColor(Color.WHITE);        mChart.setDrawGridBackground(true);        mChart.setDrawBarShadow(true);        mChart.setMaxVisibleValueCount(100);        mChart.getAxisRight().setEnabled(false);        // draw bars behind lines        mChart.setDrawOrder(new DrawOrder[] { DrawOrder.BAR, DrawOrder.BUBBLE,                DrawOrder.CANDLE, DrawOrder.LINE, DrawOrder.SCATTER });        YAxis rightAxis = mChart.getAxisRight();        rightAxis.setDrawGridLines(false);        YAxis leftAxis = mChart.getAxisLeft();        leftAxis.setDrawGridLines(false);        XAxis xAxis = mChart.getXAxis();        xAxis.setPosition(XAxisPosition.BOTTOM);        Map<String, Object> map = null;        for (int i = 0; i < mTimes.length; i++) {            map = new HashMap<String, Object>();            map.put("addDay",mTimes[i]);            month.add(map);        }        Map<String, Object> dataMap = null;        for (int i = 0; i < arrs.length; i ++) {            dataMap = new HashMap<String, Object>();            dataMap.put("learnCount", arrs[i]);            data.add(dataMap);        }        // 横向显示的时间 12/3 12/4        for (int index = 0; index < month.size(); index++) {            Map<String, Object> cdata = month.get(index);            months.add(cdata.get("addDay").toString());        }        CombinedData data = new CombinedData(months);        data.setData(generateLineData());        // data.setData(generateBarData());        // //data.setData(generateBubbleData());        // data.setData(generateScatterData());        // data.setData(generateCandleData());        mChart.setData(data);        mChart.invalidate();    }    private LineData generateLineData() {        LineData d = new LineData();        ArrayList<Entry> entries = new ArrayList<Entry>();        // 纵向显示的数据        for (int index = 0; index < data.size(); index++) {            Map<String, Object> cdata = data.get(index);            entries.add(new Entry(Integer.parseInt(cdata.get("learnCount")                    .toString()), index));        }        LineDataSet set = new LineDataSet(entries,                intent.getStringExtra("days") + "天坐姿曲线图");        set.setColor(Color.rgb(40, 40, 40));        set.setLineWidth(2.5f);        set.setCircleColor(Color.rgb(40, 40, 40));        set.setCircleSize(5f);        set.setFillColor(Color.rgb(40, 40, 40));        set.setDrawCubic(true);        set.setDrawValues(true);        set.setValueTextSize(10f);        set.setValueTextColor(Color.rgb(40, 40, 40));        set.setAxisDependency(YAxis.AxisDependency.LEFT);        d.addDataSet(set);        return d;    }    private BarData generateBarData() {        BarData d = new BarData();        ArrayList<BarEntry> entries = new ArrayList<BarEntry>();        for (int index = 0; index < itemcount; index++)            entries.add(new BarEntry(getRandom(15, 30), index));        BarDataSet set = new BarDataSet(entries, "Bar DataSet");        set.setColor(Color.rgb(60, 220, 78));        set.setValueTextColor(Color.rgb(60, 220, 78));        set.setValueTextSize(10f);        d.addDataSet(set);        set.setAxisDependency(YAxis.AxisDependency.LEFT);        return d;    }    protected ScatterData generateScatterData() {        ScatterData d = new ScatterData();        ArrayList<Entry> entries = new ArrayList<Entry>();        for (int index = 0; index < itemcount; index++)            entries.add(new Entry(getRandom(20, 15), index));        ScatterDataSet set = new ScatterDataSet(entries, "Scatter DataSet");        set.setColor(Color.GREEN);        set.setScatterShapeSize(7.5f);        set.setDrawValues(false);        set.setValueTextSize(10f);        d.addDataSet(set);        return d;    }    protected CandleData generateCandleData() {        CandleData d = new CandleData();        ArrayList<CandleEntry> entries = new ArrayList<CandleEntry>();        for (int index = 0; index < itemcount; index++)            entries.add(new CandleEntry(index, 20f, 10f, 13f, 17f));        CandleDataSet set = new CandleDataSet(entries, "Candle DataSet");        set.setColor(Color.rgb(80, 80, 80));        set.setBodySpace(0.3f);        set.setValueTextSize(10f);        set.setDrawValues(false);        d.addDataSet(set);        return d;    }    protected BubbleData generateBubbleData() {        BubbleData bd = new BubbleData();        ArrayList<BubbleEntry> entries = new ArrayList<BubbleEntry>();        for (int index = 0; index < itemcount; index++) {            float rnd = getRandom(20, 30);            entries.add(new BubbleEntry(index, rnd, rnd));        }        BubbleDataSet set = new BubbleDataSet(entries, "Bubble DataSet");        set.setColors(ColorTemplate.VORDIPLOM_COLORS);        set.setValueTextSize(10f);        set.setValueTextColor(Color.WHITE);        set.setHighlightCircleWidth(1.5f);        set.setDrawValues(true);        bd.addDataSet(set);        return bd;    }    private float getRandom(float range, float startsfrom) {        return (float) (Math.random() * range) + startsfrom;    }    @Override    public void onClick(View arg0) {        // TODO Auto-generated method stub    }}

最后再来看下布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#FFFFFF"    android:orientation="vertical" >    <RelativeLayout        android:layout_width="fill_parent"        android:layout_height="44dp"        android:background="#67ade9"        android:gravity="center_vertical" >        <TextView            android:id="@+id/title_bar_name"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:layout_centerInParent="true"            android:ellipsize="end"            android:gravity="center"            android:singleLine="true"            android:text="坐姿曲线图"            android:textColor="#ffffff"            android:textSize="17dp" />        <ImageView            android:id="@+id/backbtn"            android:layout_width="45dp"            android:layout_height="40dp"            android:layout_centerVertical="true"            android:layout_marginLeft="10dp"            android:src="@drawable/go_back" />    </RelativeLayout>    <com.github.mikephil.charting.charts.CombinedChart        android:id="@+id/chart1"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

最后看下运行后的效果图吧：
这里写图片描述

Demo下载地址：点击下载

0 0