Android 图表开源框架之MPAndroidChart LineChart折线图（五）

Android 图表开源框架之MPAndroidChart LineChart折线图（一）

Android 图表开源框架之MPAndroidChart LineChart折线图（二）

Android 图表开源框架之MPAndroidChart LineChart折线图（三）

Android 图表开源框架之MPAndroidChart LineChart折线图（四）动态添加数据

Android 图表开源框架之MPAndroidChart PieChart扇形图（一）

Android 图表开源框架之MPAndroidChart PieChart扇形图（二）

Android 图表开源框架之MPAndroidChart LineChart之常用自定义设置功能

一.快速实现：

1.添加依赖：

app build.gradle文件：

 implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

packagingOptions {
        exclude 'META-INF/proguard/androidx-annotations.pro'
    }

 

最外层build.gradle文件：

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.3'
        

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

2.主函数逻辑：

private LineChart lineChart;
    float datas[] = {14f,15f,16f,17f,16f,16f};
    float datas2[] = {17f,16f,15f,14f,17f,14f};
    final String weeks[] = {"昨天","今天","明天","周五","周六","周日"};
    //在MPAndroidChart一般都是通过List对象来装数据的
    final List entries = new ArrayList(); 

 lineChart = (LineChart) findViewById(R.id.lineChart);

 setThreeMpChart();

 /**
     * 3.1.0版本使用
     */
    public void setThreeMpChart(){
        //循环取出数据
        for(int i = 0; i < datas.length; i++){
            entries.add(new Entry(i,datas[i]));
        }
        Description description = new Description();//描述信息
        description.setEnabled(false);//是否可用
        lineChart.setDescription(description);//不然会显示默认的 Description。
        lineChart.setTouchEnabled(true); // 设置是否可以触摸
        lineChart.setDragEnabled(true);// 是否可以拖拽
        lineChart.setScaleEnabled(true);// 是否可以缩放
        lineChart.setPinchZoom(true);//y轴的值是否跟随图表变换缩放;如果禁止，y轴的值会跟随图表变换缩放
        lineChart.setDoubleTapToZoomEnabled(false);//是否允许双击进行缩放
        lineChart.setScaleXEnabled(true);//是否允许以X轴缩放
        lineChart.setDrawGridBackground(false);// 是否显示表格颜色
        lineChart.setGridBackgroundColor(Color.TRANSPARENT);// 表格的的颜色
        lineChart.animateY(1000, Easing.Linear);//设置动画
        lineChart.setExtraBottomOffset(5f);//防止底部数据显示不完整，设置底部偏移量
        lineChart.setExtraRightOffset(45f);//防止右侧数据显示不完整，设置底部偏移量

//x轴配置
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setEnabled(true);//是否可用
        xAxis.setDrawLabels(true);//是否显示数值
        xAxis.setDrawAxisLine(true);//是否显示坐标线
        xAxis.setAxisLineColor(Color.BLACK);//设置坐标轴线的颜色
        xAxis.setAxisLineWidth(0.8f);//设置坐标轴线的宽度
        xAxis.setDrawGridLines(false);//是否显示竖直风格线
        xAxis.setTextColor(Color.BLACK);//X轴文字颜色
//        xAxis.setTextSize(12f);//X轴文字大小
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//X轴文字显示位置
        xAxis.setSpaceMin(1f);//左空白区大小
        xAxis.setSpaceMax(1f);//右空白区大小
        xAxis.setGranularity(1);//间隔1
        //设置X轴坐标自定义数据格式
        xAxis.setValueFormatter(new IndexAxisValueFormatter(){
            @Override
            public String getFormattedValue(float value) {
                //设置当前时间

                int IValue = (int) value;
                int a =(entries.size() - IValue);
//                CharSequence format = DateFormat.format("MM/dd",
//                        System.currentTimeMillis() - (long) (entries.size() - IValue) * 24 * 60 * 60 * 1000);
//                return format.toString();
//                return super.getFormattedValue(value);
                //自定义样式 IAxisValueFormatter  星期
                //防止数组越界判断范围
                if (IValue < 0 || IValue >= weeks.length) {
                    return "";
                } else {
                    return weeks[IValue];
                }
            }
        });
        xAxis.setGranularity(1);//间隔1
//左y轴配置
        YAxis lyAxis = lineChart.getAxisLeft();
        lyAxis.setEnabled(true);//是否可用
        lyAxis.setDrawLabels(true);//是否显示数值
        lyAxis.setDrawAxisLine(true);//是否显示坐标线
        lyAxis.setDrawGridLines(false);//是否显示水平网格线
        lyAxis.setDrawZeroLine(true);是否绘制零线
        lyAxis.setZeroLineColor(Color.BLACK);
//        lyAxis.setZeroLineWidth(0.8f);
//        lyAxis.enableGridDashedLine(10f, 10f, 0f);//网格虚线
        lyAxis.setGridColor(Color.BLACK);//网格线颜色
        lyAxis.setGridLineWidth(0.8f);//网格线宽度
        lyAxis.setAxisLineColor(Color.BLACK);//坐标线颜色
        lyAxis.setTextColor(Color.BLACK);//左侧文字颜色
        lyAxis.setTextSize(12f);//左侧文字大小
//右y轴配置
        YAxis ryAxis = lineChart.getAxisRight();
        ryAxis.setEnabled(true);//是否可用
        // 不显示y轴右边的值
        ryAxis.setEnabled(false);
        ryAxis.setDrawAxisLine(true);
        ryAxis.setDrawZeroLine(true);
//        ryAxis.setZeroLineWidth(1f);
        ryAxis.setAxisLineWidth(0.8f);//设置右侧边界线宽度
        ryAxis.setAxisLineColor(Color.BLACK);

        //X轴左侧数据设置
//        YAxis axisLeft = lineChart.getAxisLeft();
//        axisLeft.setEnabled(true);//是否可用
//        // 不显示y轴左边的值
//        axisLeft.setEnabled(true);
//        axisLeft.setDrawAxisLine(true);
//        axisLeft.setDrawZeroLine(true);
        ryAxis.setZeroLineWidth(1f);
//        axisLeft.setAxisLineWidth(1);//设置左侧边界线宽度
//        axisLeft.setAxisLineColor(Color.BLACK);

//标签配置
        Legend legend = lineChart.getLegend();
        legend.setEnabled(true);//是否可用

        //x轴和y轴的数据


        //循环取出数据
//        for(int i = 0; i < datas2.length; i++){
//            entries.add(new Entry(i,datas2[i]));
//        }
//        YourData[] dataObjects = ...;
//        List entries = new ArrayList();
//        for (YourData data : dataObjects) {
//            entries.add(new Entry(data.getValueX(), data.getValueY()));
//        }
        LimitLine limitLineL = new LimitLine(15f, "临界点");//临界点
        limitLineL.setLineColor(Color.RED);
        limitLineL.setLineWidth(1.5f);
        limitLineL.setTextSize(10f);
        limitLineL.setTextColor(Color.RED);
        limitLineL.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);//标签位置
        limitLineL.enableDashedLine(5f,8f,0);  //设置虚线
        lineChart.getAxisLeft().addLimitLine(limitLineL);

        LimitLine limitLine2 = new LimitLine(14.5f, "SD");//临界点
        limitLine2.setLineColor(Color.RED);
        limitLine2.setLineWidth(1.5f);
        limitLine2.setTextSize(10f);
        limitLine2.setTextColor(Color.RED);
        limitLine2.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);//标签位置
        limitLine2.enableDashedLine(5f,8f,0);  //设置虚线
        lineChart.getAxisLeft().addLimitLine(limitLine2);


        //折线图点的标记
        MyMarkerView mv = new MyMarkerView(this);
        lineChart.setMarker(mv);
        LineDataSet dataSet = new LineDataSet(entries, "Label"); // 添加数据
        // 自定义各种数据样式（不设置则使用默认值）
//        dataSet.setColor(...);
//        dataSet.setValueTextColor(...);
        LineData lineData = new LineData(dataSet);
        //多个折线时使用
//        LineDataSet lineDataSet = new LineDataSet(entries,"ONE");
//        LineDataSet lineDataSet2 = new LineDataSet(entries,"TWO");
//        //保存LineDataSet集合
//        ArrayList dataSets = new ArrayList<>();
//        dataSets.add(lineDataSet); // add the datasets
//        dataSets.add(lineDataSet2); // add the datasets
//        LineData lineDataLists = new LineData(dataSets);//添加多个折线集合

//        dataSet.setColor(Color.RED);//设置折线的颜色
        dataSet.setCircleSize(5f);// 显示的圆形大小
        dataSet.setCircleColor(Color.RED);//设置圆点的颜色
        //设置曲线值的圆点是实心还是空心
        dataSet.setDrawCircleHole(true);
        dataSet.setDrawFilled(true);//设置不画数据覆盖的阴影层
//        dataSet.setDrawValues(false);//不绘制线的数据
//        dataSet.setLineWidth(2f);//设置折线宽度
//        dataSet.setCircleRadius(6f);
        // 填充曲线下方的区域，红色，半透明。
        dataSet.setDrawFilled(true);
        dataSet.setFillAlpha(65);
//        dataSet.setFillColor(Color.WHITE);
//        dataSet.setDrawCircleHole(false);
        dataSet.setDrawCircles(true);//是否显示圆心
        dataSet.setValueTextColor(Color.rgb(89, 194, 230)); //数值显示的颜色
        dataSet.setValueTextSize(8f);     //数值显示的大小
        // 设置平滑曲线
//        dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        lineChart.setData(lineData);
//        lineChart.animateX(2000);
        lineChart.invalidate(); // 刷新
//        Matrix m = new Matrix();
//        m.postScale(1, 1f);//两个参数分别是x,y轴的缩放比例。例如：将x轴的数据放大为之前的1.5倍，《这个地方是在设置能滑动的时候编辑的，假如X轴最多展示5条但是呢有10条数据，那么这里就是2,1》
        lineChart.getViewPortHandler().refresh(new Matrix(),lineChart,true);//将图表动画显示之前进行缩放
    }
    /**
//     * 更新图表
//     *
//     * @param chart   图表
//     * @param values  数据
//     * @param valueType 数据类型
//     */
//    public static void notifyDataSetChanged(LineChart chart, List values,
//                                            final int valueType) {
//        chart.getXAxis().setValueFormatter(new IAxisValueFormatter() {
//            @Override
//            public String getFormattedValue(float value, AxisBase axis) {
//                return weeks(valueType)[(int) value];
//            }
//        });
//
//        chart.invalidate();
        setChartData(chart, values);
//    }

 

 3.自定义MarkerView显示视图：

import android.content.Context;
import android.text.format.DateFormat;
import android.widget.TextView;

import com.github.mikephil.charting.components.MarkerView;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.utils.MPPointF;

import java.text.DecimalFormat;

public class MyMarkerView extends MarkerView
{

    private TextView tvContent;
    private DecimalFormat format = new DecimalFormat("##0");

    public MyMarkerView(Context context) {
        super(context, R.layout.layout_markerview);//这个布局自己定义
        tvContent = (TextView) findViewById(R.id.tvContent);
    }

    //显示的内容
    @Override
    public void refreshContent(Entry e, Highlight highlight) {
//        tvContent.setText(format(e.getX())+"\n"+format.format(e.getY())+"辆");
        tvContent.setText(format.format(e.getY())+"辆");
        super.refreshContent(e, highlight);
    }

    //标记相对于折线图的偏移量
    @Override
    public MPPointF getOffset() {
        return new MPPointF(-(getWidth() / 2), -getHeight());
    }

    //时间格式化（显示今日往前30天的每一天日期）
    public String  format(float x)
    {
        CharSequence format = DateFormat.format("MM月dd日",
                System.currentTimeMillis()-(long) (30-(int)x)*24*60*60*1000);
        return format.toString();
    }
}

 4.MarkerView布局：

5.背景色：

 #3F51B5
    #303F9F
    #FF4081
    #89000000
    #fff
    #333
    #ffd2d2d2

    #33691E
    #9C27B0
    #FF4081
    #FF9800
    #00BCD4
    #F57F17


    #454545
    #707070

    #00ff00
    #FF222222
    #FFEEEEEE

https://github.com/PhilJay/MPAndroidChart