MPAndroidChart入门

因为最近的项目中有多个地方使用到图表，而之前没有使用过，所以在网上找相关的图表开源库，有两个是最流行的；一个是MPAndroidChart，另一个是hello-chart，最后经过考虑决定使用前者，所以下载了官方的Demo，并写了此篇文章来加深对该库的使用流程。
第一步：根据官方说明添加依赖
app依赖

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'
}

库文件依赖

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

第二步：在布局文件中添加一个LineChart

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

第三步：初始化该Chart，以及相关数据的设置

//初始化以及相关监听器的设置
mLineChart = (LineChart) findViewById(R.id.lineChart);
mLineChart.setLogEnabled(true);  //设置日志打印功能
mLineChart.setOnChartGestureListener(this);
mLineChart.setOnChartValueSelectedListener(this);

mLineChart.setTouchEnabled(true);   //设置可触摸
mLineChart.setDragEnabled(true);    //设置可缩放
mLineChart.setPinchZoom(true);      //设置中心缩放

mLineChart.setScaleEnabled(true);   //设置可拖拉
//mLineChart.setScaleXEnabled(true);
//mLineChart.setScaleYEnabled(true);

//设置图表背景，以及没数据展示时相关设置
mLineChart.setBackgroundColor(Color.GRAY); 
mLineChart.setBackgroundColor(Color.GRAY);
mLineChart.setNoDataText("没有数据展示");
mLineChart.setNoDataTextColor(Color.RED);
mLineChart.setNoDataTextTypeface(Typeface.createFromAsset(getAssets(),"OpenSans-Light.ttf"));

//设置图标的表述及相关属性
Description description = mLineChart.getDescription();
description.setText("我的第一个图标标题");
description.setTextColor(Color.RED);
description.setPosition(1050,80);
description.setTypeface(Typeface.createFromAsset(getAssets(),"OpenSans-Light.ttf"));
description.setTextSize(12f);

//背景矩形区域绘制设置
mLineChart.setDrawGridBackground(true);
mLineChart.setGridBackgroundColor(Color.BLUE);

//边界设置
mLineChart.setDrawBorders(true);
mLineChart.setBorderColor(Color.YELLOW);
mLineChart.setBorderWidth(3f);

//设置LimitLine
LimitLine llXAxis = new LimitLine(0f, "Index 10");  //设置线的位置和标识
llXAxis.setLineWidth(4f); //设置线的宽度
llXAxis.enableDashedLine(10f, 10f, 0f);  //设置虚线
llXAxis.setLineColor(Color.YELLOW);  //设置线的颜色
llXAxis.setLabelPosition(LimitLabelPosition.RIGHT_BOTTOM); //设置标识的位置
llXAxis.setTextSize(20f); //设置字体的大小

//给X轴添加LimitLine
XAxis xAxis = mLineChart.getXAxis();
xAxis.addLimitLine(llXAxis); // add x-axis limit line
xAxis.enableGridDashedLine(10f, 10f, 0f); //设置为虚线
xAxis.setAxisMaximum(100f);    //设置X轴的最大值
xAxis.setAxisMinimum(-50);     //设置X轴的最小值

//给Y轴添加LimitLine
Typeface tf = Typeface.createFromAsset(getAssets(), "OpenSans-Regular.ttf");

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

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

YAxis leftAxis = mLineChart.getAxisLeft();
leftAxis.removeAllLimitLines(); // reset all limit lines to avoid overlapping lines
leftAxis.addLimitLine(ll1);
leftAxis.addLimitLine(ll2);
leftAxis.setAxisMaximum(200f);
leftAxis.setAxisMinimum(-50f);
//leftAxis.setYOffset(20f);
leftAxis.enableGridDashedLine(10f, 10f, 0f);
leftAxis.setDrawZeroLine(false);

// limit lines are drawn behind data (and not on top)
leftAxis.setDrawLimitLinesBehindData(true);

mLineChart.getAxisRight().setEnabled(false);

//设置数据
setData(int count,float range);

//设置动画和标签的样式
mLineChart.animateX(2500);
Legend l = mChart.getLegend();
l.setForm(LegendForm.CIRCLE);

   / **
     * 设置图表的数据
     * @param count 数据的个数
     * @param range 数据的范围
     */
    private void setData(int count, float range) {

        ArrayList<Entry> values = new ArrayList<>();
        for (int i = 0; i < count; i++) {
            float val = (float) ((Math.random() *range) +3);
            values.add(new Entry(i,val));
        }

        LineDataSet set1;
        if (mLineChart.getData() != null &&
                mLineChart.getData().getDataSetCount() >0){
            set1 = (LineDataSet) mLineChart.getData().getDataSetByIndex(0);
            set1.setValues(values);
            mLineChart.getData().notifyDataChanged();
            mLineChart.notifyDataSetChanged();
        }else {
            set1 = new LineDataSet(values,"网络数据报表");

            set1.enableDashedLine(10f,5f,0f);
            set1.enableDashedHighlightLine(10f,5f,0f);
            set1.setCircleColor(Color.BLUE);
            set1.setCircleColor(Color.GREEN);
            set1.setLineWidth(1f);
            set1.setCircleRadius(3f);
            set1.setDrawCircleHole(true);
            set1.setValueTextSize(9f);
            set1.setDrawFilled(true);
            set1.setFormLineWidth(1f);
            set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f,5f},0f));
            set1.setFormSize(15.f);

            /*if (VERSION.SDK_INT >= 18){
                Drawable drawable = ContextCompat.getDrawable(this,R.drawable.fade_red);
                set1.setFillDrawable(drawable);
            }else {
                set1.setFillColor(Color.BLACK);
            }*/

            ArrayList<ILineDataSet> dataSets = new ArrayList<>();
            dataSets.add(set1);

            LineData data = new LineData(dataSets);

            mLineChart.setData(data);
        }
    }

数据改变后刷新数据：

mLineChart.invalidate();  //重新绘制

设置曲线值得显示：

List<ILineDataSet> sets = mLineChart.getData().getDataSets();
for (ILineDataSet iSet : sets) {
    LineDataSet set = (LineDataSet) iSet;
    set.setDrawValues(!set.isDrawValuesEnabled());
}
mLineChart.invalidate();

设置阴影区域的显示：

List<ILineDataSet> sets = mLineChart.getData().getDataSets();
for (ILineDataSet iSet : sets) {
    LineDataSet set = (LineDataSet) iSet;
    if (set.isDrawFilledEnabled())
        set.setDrawFilled(false);
     else
        set.setDrawFilled(true);
}
mLineChart.invalidate();

设置每个点的值以原点标注：

List<ILineDataSet> sets = mLineChart.getData().getDataSets();
for (ILineDataSet iSet : sets) {
    LineDataSet set = (LineDataSet) iSet;
    if (set.isDrawCirclesEnabled())
        set.setDrawCircles(false);
    else
        set.setDrawCircles(true);
}
mLineChart.invalidate();

设置曲线和折线方式的转换：

List<ILineDataSet> sets = mLineChart.getData().getDataSets();
for (ILineDataSet iSet : sets) {
    LineDataSet set = (LineDataSet) iSet;
    set.setMode(set.getMode() == LineDataSet.Mode.CUBIC_BEZIER ?LineDataSet.Mode.LINEAR:LineDataSet.Mode.CUBIC_BEZIER);
}
mLineChart.invalidate();

保存图表到本地：

mLineChart.saveToPath("title" + System.currentTimeMillis(), "");

绘制多条曲线：

LineData data = new LineData(set1, set2, set3);