AndroidMPChart学习之LineChart详细总结

AndroidMPChart之LineChart详细总结

由于项目需求,所以对GitHub上的AndroidMPChart中的LineChart进行了研究,总结下方便自己下次使用,同时也可以方便他人学习使用:

先看效果图如下:

一:添加依赖:

1.1在项目的module中的build.gradle添加如下代码:

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

1.2 在依赖中添加如下代码依赖:

 compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'

二:使用

2.1 首先定义好自己的布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

2.2 在代码中找控件:

 mChart = (LineChart) findViewById(R.id.chart1);

2.3 设置LineChart的基本属性:

 //此属性设置之后,点击图标中的某个点网格会自动将此点移动到屏幕中心 不设置则没反应
        mChart.setOnChartValueSelectedListener(this);

        // no description text
        // mChart.getDescription().setEnabled(false);
        //设置是否绘制chart边框的线
        mChart.setDrawBorders(false);
        //设置chart边框线颜色
        mChart.setBorderColor(Color.RED);
        //设置chart边框线宽度
        mChart.setBorderWidth(1f);
        //设置chart是否可以触摸
        mChart.setTouchEnabled(true);
        mChart.setDragDecelerationFrictionCoef(0.9f);

        //设置是否可以拖拽
        mChart.setDragEnabled(true);
        //设置是否可以缩放 x和y，默认true
        mChart.setScaleEnabled(true);
        //设置是否可以通过双击屏幕放大图表。默认是true
        mChart.setDoubleTapToZoomEnabled(false);
        //是否启用网格背景
        mChart.setDrawGridBackground(false);
        mChart.setHighlightPerDragEnabled(true);
        //设置chart动画 x轴y轴都有动画
        //mChart.animateXY(2000, 2000);
        // false代表缩放时X与Y轴分开缩放,true代表同时缩放
        mChart.setPinchZoom(true);
        // set an alternative background color
        //图表背景颜色的设置
        mChart.setBackgroundColor(Color.LTGRAY);
        //图表进入的动画时间
        mChart.animateX(2500);

        //描述信息
        Description description = new Description();
        description.setText("描述信息相关内容");
        //设置描述信息
        mChart.setDescription(description);
        //设置没有数据时显示的文本
        mChart.setNoDataText("没有数据撒...")

2.4 表头Legend:

  Legend l = mChart.getLegend();
        // modify the legend ...
        //表头代表线条说明前的图形 可以设置线形,圆形,方形
        l.setForm(LegendForm.SQUARE);
        l.setTypeface(mTfLight);
        //表头字体大小
        l.setTextSize(11f);
        //表头线条说明的颜色
        l.setTextColor(Color.RED);
        //表头线条放置的位置
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
        //表头多条线条的排列方式
        l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        //表头的说明是否绘制到图表内部
        l.setDrawInside(false);

2.5 X轴数据设置:

   xAxis = mChart.getXAxis();
        xAxis.setTypeface(mTfLight);
        xAxis.setTextSize(8f);
        //X轴显示的位置
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM_INSIDE);
        //X轴
        xAxis.setSpaceMin(0.5f);
        //X轴数据的颜色
        xAxis.setTextColor(Color.BLUE);
        //是否绘制X轴的网格线
        xAxis.setDrawGridLines(false);
        xAxis.setDrawAxisLine(false);
        //TODO 设置x轴坐标显示的数量  加true才能显示设置的数量 一旦加true后续的x轴数据显示有问题,
        // xAxis.setLabelCount(5,true);
        xAxis.setLabelCount(5);
        //设置竖线为虚线样子
        xAxis.enableGridDashedLine(10f, 10f, 0f);

        //图表第一个和最后一个label数据不超出左边和右边的Y轴
        // xAxis.setAvoidFirstLastClipping(true);

        /********************************************************************************/
        final Map<Integer, String> xMap = new HashMap<>();
        final String[] valueArry = {"2017-05-11", "2017-05-12", "2017-05-13", "2017-05-14", "2017-05-15","2017-05-16", "2017-05-17", "2017-35-18", "2017-05-19", "2017-05-20","2017-05-21", "2017-05-22", "2017-05-23", "2017-05-24", "2017-05-25","2017-05-26", "2017-05-27", "2017-05-28", "2017-05-29", "2017-05-30"};
        for (int i = 0; i < yVals1.size(); i++) {