基于MPAndroidChart的折线图绘制

    出于需要，APP里面需要一个根据给定数据绘制折线图的功能。上网查找了相关资料后惊奇的发现了功能强大的MPAndroidChart。在此与大家一起分享一下使用MPAndroidChart的方法。

MPAndroidChart官网源码：https://github.com/PhilJay/MPAndroidChart

---------------------------------------------------我是分割线----------------------------------------------------------------

引入相关依赖

    要使用MPAndroidChart是要需要在工程里面引入相关的依赖。官方文档里面给出了四种引入方式，这里以开发环境为Android Studio为例（即Gradle dependency）。

     首先在project level的build.gradle里面添加：

allprojects {
	repositories {
		maven { url "https://jitpack.io" }
	}
}

    其次在app level的build.gradle里面添加：

dependencies {
	implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}

--------------------------------------------------- 我是分割线 ----------------------------------------------------------------

开始画图

     MPAndroidChart的一大方便之处就是，画图就像添加一个控件那么方便。首先在.xml文件里面添加LineChart“控件”。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.xkw.draw_data.MainActivity">

    <!--折线图-->
    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart1"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        />
</android.support.constraint.ConstraintLayout>

    然后，主程序里面实例化一个折线图并与该“控件”绑定，传入相关数据即可完成绘图。

    

public class MainActivity extends AppCompatActivity implements OnChartGestureListener,OnChartValueSelectedListener{

    private LineChart mChart;
    private LineData data;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mChart = (LineChart) findViewById(R.id.chart1);
        mChart.setOnChartGestureListener(this);
        mChart.setOnChartValueSelectedListener(this);
        mChart.setDrawGridBackground(false);
        // 无描述文本
        mChart.getDescription().setEnabled(false);

        // 使能点击
        mChart.setTouchEnabled(true);

        // 使能拖动和缩放
        mChart.setDragEnabled(true);
        mChart.setScaleEnabled(true);

        // 如果为false，则x，y两个方向可分别缩放
        mChart.setPinchZoom(true);

        /**
         1.添加assets文件   project->src->main位置，右键new->Directory->assets
         2.在assets文件中   new->Directory->Fonts文件
         3.在Fonts文件中复制下载好的ttf文件，例如OpenSans-Regular.ttf
         */
        //设置上下限
        Typeface tf = Typeface.createFromAsset(getBaseContext().getAssets(), "Fonts/OpenSans-Regular.ttf");

        LimitLine ll1 = new LimitLine(90f, "Upper Limit");
        ll1.setLineWidth(4f);
        ll1.enableDashedLine(10f, 10f, 0f);
        ll1.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);
        ll1.setTextSize(10f);
        ll1.setTypeface(tf);

        LimitLine ll2 = new LimitLine(80f, "Lower Limit");
        ll2.setLineWidth(4f);
        ll2.enableDashedLine(10f, 10f, 0f);
        ll2.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);
        ll2.setTextSize(10f);
        ll2.setTypeface(tf);

        //设置x轴位置
        XAxis xAxis = mChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

        //去除右边的y轴
        YAxis yAxisRight = mChart.getAxisRight();
        yAxisRight.setEnabled(false);
        YAxis yAxisLeft = mChart.getAxisLeft();
        yAxisLeft.addLimitLine(ll1);
        yAxisLeft.addLimitLine(ll2);
        init();
    }

    private void init(){
        //初始化数据
        String xl[] ={"1","2","3","4","5","6","7","8","9","10"}; //横轴数据
        String yl[] ={"80","85","80","90","95","88","90","91","92","93"}; //竖轴数据
        data = getData(xl,yl);
        mChart.setData(data);
        mChart.animateX(2000);//动画时间
    }

    private LineData getData(String[] xx, String[] yy){
        ArrayList<Entry> yVals = new ArrayList<Entry>();
        for (int i = 0; i < yy.length; i++) {
            // 要显示的数据
            yVals.add(new Entry(Float.parseFloat(xx[i]),Float.parseFloat(yy[i])));
        }
        //一条曲线对应一个LineDataSet
        LineDataSet set1 = new LineDataSet(yVals, "前五次的评分");
        set1.setMode(LineDataSet.Mode.CUBIC_BEZIER);//设置曲线为圆滑的线
        set1.setCubicIntensity(0.2f);
        set1.setDrawCircles(true);  //设置有圆点
        set1.setLineWidth(2f);    //设置线的宽度
        set1.setCircleSize(5f);   //设置小圆的大小
        set1.setDrawFilled(true);//设置包括的范围区域填充颜色
        set1.setCircleColor(Color.rgb(244, 117, 117));
        set1.setColor(Color.rgb(244, 117, 117));
        ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
        dataSets.add(set1); // add the datasets

        // create a data object with the datasets
        LineData data = new LineData(dataSets);
        return data;
    }

    @Override
    public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {

    }

    @Override
    public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
        if(lastPerformedGesture != ChartTouchListener.ChartGesture.SINGLE_TAP)
            mChart.highlightValues(null); // or highlightTouch(null) for callback to onNothingSelected(...)
    }

    @Override
    public void onChartLongPressed(MotionEvent me) {

    }

    @Override
    public void onChartDoubleTapped(MotionEvent me) {

    }

    @Override
    public void onChartSingleTapped(MotionEvent me) {

    }

    @Override
    public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {

    }

    @Override
    public void onChartScale(MotionEvent me, float scaleX, float scaleY) {

    }

    @Override
    public void onChartTranslate(MotionEvent me, float dX, float dY) {

    }

    @Override
    public void onValueSelected(Entry e, Highlight h) {

    }

    @Override
    public void onNothingSelected() {

    }
}

    结果示意

本文源码： http://download.csdn.net/download/kewei168/10206920