Android折线图之MPAndroidChart

需求

需要两条折线显示对应的数据。

实现

1、 引入库

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

2、布局文件

3、编写帮助类

/**
 * 折线图帮助类
 * author: WXS
 * create time: 2021/07/01 21:16
 */
public final class ChartHelper {
    private static ChartHelper sInstance = null;
    private LineChart mChart;
    public ChartHelper() {
    }
    public static ChartHelper getsInstance() {
        if (sInstance == null) {
            synchronized (ChartHelper.class) {
                if (sInstance == null) {
                    sInstance = new ChartHelper();
                }
            }
        }
        return sInstance;
    }

    /**
     * 初始化对象
     * @param mChart
     */
    public LineChart init(LineChart mChart) {

        this.mChart = mChart;

        //创建描述信息
        Description description = new Description();
        description.setText(" ");
        //description.setTextColor(Color.RED);
        //description.setTextSize(20);
        mChart.setDescription(description);//设置图表描述信息
        mChart.setNoDataText("没有数据熬");//没有数据时显示的文字
        mChart.setNoDataTextColor(Color.BLUE);//没有数据时显示文字的颜色
        mChart.setDrawGridBackground(false);//chart 绘图区后面的背景矩形将绘制
        mChart.setDrawBorders(false);//禁止绘制图表边框的线
        //mChart.setBorderColor(); //设置 chart 边框线的颜色。
        //mChart.setBorderWidth(); //设置 chart 边界线的宽度，单位 dp。
        //mChart.setLogEnabled(true);//打印日志
        //mChart.notifyDataSetChanged();//刷新数据
        //mChart.invalidate();//重绘

        return mChart;
    }

    /**
     * 创建数据
     * @param context 上下文
     * @param fValues f数组
     * @param dValues d数组
     */
    public void setData(Context context,ArrayList fValues, ArrayList dValues) {

        String fname = "name1";
        String dname = "name2";


        if (U.isNull(mChart)){
            ToastHelper.show(context.getResources().getString(R.string.msg_fail));
            return;
        }

        //LineDataSet每一个对象就是一条连接线
        LineDataSet setF;
        LineDataSet setD;

        //判断图表中原来是否有数据
        if (mChart.getData() != null && mChart.getData().getDataSetCount() > 0) {
            //获取数据1
            setF = (LineDataSet) mChart.getData().getDataSetByIndex(0);
            setF.setValues(fValues);
            setD = (LineDataSet) mChart.getData().getDataSetByIndex(1);
            setD.setValues(dValues);
            //刷新数据
            mChart.getData().notifyDataChanged();
            mChart.notifyDataSetChanged();
        } else {
            setF = createdLineDataSet(fValues, fname, Color.BLACK);
            setD = createdLineDataSet(dValues, dname, Color.GRAY);

            //保存LineDataSet集合
            ArrayList dataSets = new ArrayList<>();
            dataSets.add(setF); // add the datasets
            dataSets.add(setD);
            //创建LineData对象 属于LineChart折线图的数据集合
            LineData data = new LineData(dataSets);
            // 添加到图表中
            mChart.setData(data);
            //绘制图表
            mChart.invalidate();

            //获取此图表的x轴
            XAxis xAxis = mChart.getXAxis();
            xAxis.setEnabled(true);//设置轴启用或禁用 如果禁用以下的设置全部不生效
            xAxis.setDrawAxisLine(true);//是否绘制轴线
            xAxis.setDrawGridLines(true);//设置x轴上每个点对应的线
            xAxis.setDrawLabels(true);//绘制标签 指x轴上的对应数值
            xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//设置x轴的显示位置
            //xAxis.setTextSize(20f);//设置字体
            //xAxis.setTextColor(Color.BLACK);//设置字体颜色
            //设置竖线的显示样式为虚线
            //lineLength控制虚线段的长度
            //spaceLength控制线之间的空间
            xAxis.enableGridDashedLine(10f, 10f, 0f);
            // xAxis.setAxisMinimum(0f);//设置x轴的最小值
            // xAxis.setAxisMaximum(10f);//设置最大值
            xAxis.setAvoidFirstLastClipping(true);//图表将避免第一个和最后一个标签条目被减掉在图表或屏幕
            xAxis.setLabelRotationAngle(10f);//设置x轴标签的旋转角度
            // 设置x轴显示标签数量 还有一个重载方法第二个参数为布尔值强制设置数量 如果启用会导致绘制点出现偏差
            // xAxis.setLabelCount(10);
            // xAxis.setTextColor(Color.BLUE);//设置轴标签的颜色
            // xAxis.setTextSize(24f);//设置轴标签的大小
            // xAxis.setGridLineWidth(10f);//设置竖线大小
            // xAxis.setGridColor(Color.RED);//设置竖线颜色
            // xAxis.setAxisLineColor(Color.GREEN);//设置x轴线颜色
            // xAxis.setAxisLineWidth(5f);//设置x轴线宽度
            // xAxis.setValueFormatter();//格式化x轴标签显示字符

            // Y轴默认显示左右两个轴线
            // 获取右边的轴线
            YAxis rightAxis = mChart.getAxisRight();
            // 设置图表右边的y轴禁用
            rightAxis.setEnabled(false);
            // 获取左边的轴线
            YAxis leftAxis = mChart.getAxisLeft();
            // 设置网格线为虚线效果
            leftAxis.enableGridDashedLine(10f, 10f, 0f);
            // 是否绘制0所在的网格线
            leftAxis.setDrawZeroLine(false);

            mChart.setTouchEnabled(true); // 设置是否可以触摸
            mChart.setDragEnabled(true);// 是否可以拖拽
            mChart.setScaleEnabled(false);// 是否可以缩放 x和y轴, 默认是true
            mChart.setScaleXEnabled(true); //是否可以缩放 仅x轴
            mChart.setScaleYEnabled(true); //是否可以缩放 仅y轴
            mChart.setPinchZoom(true); //设置x轴和y轴能否同时缩放。默认是否
            mChart.setDoubleTapToZoomEnabled(true);//设置是否可以通过双击屏幕放大图表。默认是true
            mChart.setHighlightPerDragEnabled(true);//能否拖拽高亮线(数据点与坐标的提示线)，默认是t
            mChart.setDragDecelerationEnabled(true);//拖拽滚动时，手放开是否会持续滚动，默认是true
            mChart.setDragDecelerationFrictionCoef(0.99f);//与上面那个属性配合，持续滚动时的速度快


            Legend l = mChart.getLegend();//图例
            //l.setPosition(Legend.LegendPosition.RIGHT_OF_CHART_INSIDE);//设置图例的位置
            l.setTextSize(10f);//设置文字大小
            l.setForm(Legend.LegendForm.CIRCLE);//正方形，圆形或线
            l.setFormSize(10f); // 设置Form的大小
            l.setWordWrapEnabled(true);//是否支持自动换行 目前只支持BelowChartLeft, BelowChartRight
            l.setFormLineWidth(10f);//设置Form的宽度

            //自定义的MarkerView对象
            MyMarkerView mv = new MyMarkerView(context, R.layout.custom_marker_view);
            mv.setChartView(mChart);
            mChart.setMarker(mv);
        }
    }

    /**
     * 创建折线
     * @param values 数据
     * @param name 折线名称
     * @param color 折线颜色
     * @return
     */
    private LineDataSet createdLineDataSet(ArrayList values,
            String name, int color){

        LineDataSet set  = new LineDataSet(values, name);

        //设置数据1 参数1：数据源 参数2：图例名称
        set.setColor(color);
        set.setCircleColor(color);
        set.setLineWidth(1f);//设置线宽
        set.setCircleRadius(3f);//设置焦点圆心的大小
        set.enableDashedHighlightLine(5f, 5f, 0f);//点击后的高亮线的显示样式
        set.setHighlightLineWidth(2f);//设置点击交点后显示高亮线宽
        set.setHighlightEnabled(true);//是否禁用点击高亮线
        set.setHighLightColor(Color.RED);//设置点击交点后显示交高亮线的颜色
        set.setValueTextSize(9f);//设置显示值的文字大小
        set.setDrawFilled(false);//设置禁用范围背景填充

        //格式化显示数据
        final DecimalFormat mFormat = new DecimalFormat("###,###,##0");

        set.setValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return mFormat.format(value);
            }
        });

        //          if (Utils.getSDKInt() >= 18) {
        //              // fill drawable only supported on api level 18 and above
        //              Drawable drawable = ContextCompat.getDrawable(this, R.drawable.);
        //              set1.setFillDrawable(drawable);//设置范围背景填充
        //          } else {
        set.setFillColor(Color.BLACK);
        //          }


        return set;
    }
}

4、代码调用

protected void onCreate(Bundle savedInstanceState) {
    
    // 折线图
    mChart = findViewById(R.id.chart);
    mChartHelper = ChartHelper.getsInstance();
    mChartHelper.init(mChart); // 折线图初始化
    /**
     * Entry 坐标点对象 构造函数 第一个参数为x点坐标 第二个为y点
     */
    ArrayList fValues = new ArrayList<>();
    ArrayList dValues = new ArrayList<>();
    fValues.add(new Entry(4, 10));
    fValues.add(new Entry(6, 15));
    fValues.add(new Entry(9, 20));
    fValues.add(new Entry(12, 5));
    fValues.add(new Entry(15, 30));
    dValues.add(new Entry(3, 110));
    dValues.add(new Entry(6, 115));
    dValues.add(new Entry(9, 130));
    dValues.add(new Entry(12, 85));
    dValues.add(new Entry(15, 90));
    mChartHelper.setData(this, fValues, dValues);
}