Android MPAndroidChart之折线图LineChart

**APP为了能让用户对数据有更直观，更便捷的认识，我们通常都选择了以图表的方式展示给用户，如折线图、饼图、条形图等…今天和大家分享下MPAndroidChart，一个强大便捷的图标控件。

Android MPAndroidChart之饼图PieChart

Android MPAndroidChart之柱状图BarChart

Android MPAndroidChart之组合图(折线图+柱状图)CombinedChart

本篇我们分享下饼状图LineChart的使用**

>>>>先贴张效果图<<<<

第一步，添加依赖

 //曲线图  饼状图 折线图
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

第二步，添加布局

     <com.github.mikephil.charting.charts.LineChart
                            android:id="@+id/lineChart"
                            android:layout_width="match_parent"
                            android:layout_height="200dp"
                            android:layout_marginBottom="25dp"
                            android:padding="20dp" />

第三步设置属性

 var mPointValues = ArrayList<PointValue>();
    var mPointValues = ArrayList<PointValue>();
    var mAxisXValues = ArrayList<AxisValue>();

    internal var date = arrayOf("日", "一", "二", "三", "四", "五", "六")
    internal var score = intArrayOf(5, 7, 6, 7, 3, 5, 1)//图表的数据点

 /**
     * 设置X 轴的显示
     */
    fun getAxisXLables() {
        for (i in 0..date.size - 1) {

            mAxisXValues.add(AxisValue(i.toFloat()).setLabel(date[i]))
        }

    }


    /**
     * 图表的每个点的显示
     */
    fun getAxisPoints() {
        for (i in 0..score.size - 1) {
            mPointValues.add(PointValue(i.toFloat(), score[i].toFloat()))
        }
    }

 fun initLineChart() {
        var line = Line(mPointValues).setColor(Color.YELLOW);  //折线的颜色（橙色）
        var lines = ArrayList<Line>();
        var line_t = Line(mPointValues_t).setColor(Color.GREEN);
        line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状  这里是圆形 （有三种 ：ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.DIAMOND）
        line.setCubic(true);//曲线是否平滑，即是曲线还是折线
        line.setFilled(false);//是否填充曲线的面积
        line.setHasLabels(true);//曲线的数据坐标是否加上备注
        line.setStrokeWidth(1)
        line.setPointRadius(2)
        line.setPointColor(getResources().getColor(R.color.tm))
        //      line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据（设置了这个line.setHasLabels(true);就无效）
        line.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
        line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示（每个数据点都是个大的圆点）

        line_t.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状  这里是圆形 （有三种 ：ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.DIAMOND）
        line_t.setCubic(true);//曲线是否平滑，即是曲线还是折线
        line_t.setFilled(false);//是否填充曲线的面积
        line_t.setHasLabels(true);//曲线的数据坐标是否加上备注
        line_t.setStrokeWidth(1)
        line_t.setPointRadius(2)
        line_t.setPointColor(getResources().getColor(R.color.tm))
        //      line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据（设置了这个line.setHasLabels(true);就无效）
        line_t.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
        line_t.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示
        lines.add(line)
        lines.add(line_t)
        var data: LineChartData = LineChartData();
        data.setLines(lines);

        //坐标轴
        var axisX: Axis = Axis(); //X轴
        axisX.setHasTiltedLabels(false);  //X坐标轴字体是斜的显示还是直的，true是斜的显示
        axisX.setTextColor(Color.BLACK);  //设置字体颜色
        //axisX.setName("date");  //表格名称
        axisX.setTextSize(10);//设置字体大小
        axisX.setMaxLabelChars(7); //最多几个X轴坐标，意思就是你的缩放让X轴上数据的个数7<=x<=mAxisXValues.length
        axisX.setValues(mAxisXValues);  //填充X轴的坐标名称
        //data.setAxisXBottom(axisX); //x 轴在底部
        data.setAxisXTop(axisX);  //x 轴在顶部
        axisX.setHasLines(false); //x 轴分割线
        axisX.setMaxLabelChars(2)


        // Y轴是根据数据的大小自动设置Y轴上限(在下面我会给出固定Y轴数据个数的解决方案)
        // var axisY: Axis = Axis();  //Y轴
        // axisY.setName("");//y轴标注
        // axisY.setTextSize(1);//设置字体大小
        //data.setAxisYLeft(axisY);  //Y轴设置在左边
        //data.setAxisYRight(axisY);  //y轴设置在右边


        //设置行为属性，支持缩放、滑动以及平移
        lineChart.setInteractive(true);
        lineChart.setZoomType(ZoomType.HORIZONTAL);
        lineChart.setMaxZoom(1.toFloat());//最大方法比例
        lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
        lineChart.setLineChartData(data);
        lineChart.setVisibility(View.VISIBLE);
        /**注：下面的7，10只是代表一个数字去类比而已
         * 当时是为了解决X轴固定数据个数。见（http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2）;
         */
        var v: Viewport = Viewport(lineChart.getMaximumViewport());
        v.left = 0.toFloat();
        v.right = 7.toFloat();
        lineChart.setCurrentViewport(v);

    }