Android: MPAndroidChart 图表框架使用笔记

 

资源: https://github.com/PhilJay/MPAndroidChart

文档: https://javadoc.jitpack.io/com/github/PhilJay/MPAndroidChart/v3.1.0/javadoc/

A powerful  Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, dragging and animations.

---

Android Project 项目中添加 MPAndroidChart

* Project 项目中的 build.gradle 添加配置

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

* App 中的 build.gradle 添加配置

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

* Maven Setup (Project 项目下的 pom.xml)

<!-- <repositories> section of pom.xml -->
<repository>
    <id>jitpack.io</id>
   <url>https://jitpack.io</url>
</repository>

<!-- <dependencies> section of pom.xml -->
<dependency>
    <groupId>com.github.PhilJay</groupId>
    <artifactId>MPAndroidChart</artifactId>
    <version>v3.1.0</version>
</dependency>

* 将 MPChartLib 引入应用项目中

---

MPAndroidChart 基本概念

LineChart   // 折线表，存线集合，与xml中的控件绑定实例化
LineData    // 线集合，所有折线以数组的形式存到此集合中
LineDataSet // 点集合，即一条折线
Entry       // 某条折线上的一个点
 
XAxis       // X轴
YAxis       // Y轴，Y轴分左右，通过lineChart的getAxisLeft()、getAxisRight()得到
Legend      // 图例，即标识哪一条曲线，如用红色标识电流折线，蓝色标识电压折线
LimitLine   // 限制线
Description // 描述

List<Entry> lstEntries = new ArrayList<>();  // 存放折线需要的点的列表
LineDataSet mStepTimeDataSet = new LineDataSet(lstEntries, "步时间"); // LineDataSet:点集合,即一条线

---

LineChart XML 布局文件

 <com.github.mikephil.charting.charts.LineChart
    android:id="@+id/line_chart"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:background="#ffffff"
    android:layout_margin="16dp"/>

 

LineChart 图表常用属性

private LineChart lineChart;
private XAxis xAxis;                //X轴
private YAxis leftYAxis;            //左侧Y轴
private YAxis rightYaxis;           //右侧Y轴
private Legend legend;              //图例
private LimitLine limitLine;        //限制线
private MyMarkerView markerView;    //标记视图 即点击xy轴交点时弹出展示信息的View 需自定义

---

LineChart 图表常用属性的基本设置

void setChartBasicAttr(LineChart lineChart) {
    lineChart.setDrawGridBackground(false); //是否展示网格线
    lineChart.setDrawBorders(false);         //是否显示边界
    lineChart.setDragEnabled(true);         //是否可以拖动
    lineChart.setScaleEnabled(true);        // 是否可以缩放
    lineChart.setTouchEnabled(true);        //是否有触摸事件
    //设置XY轴动画效果
    //lineChart.animateY(2500);
    lineChart.animateX(1500);

    lineChart.setNoDataText(getString(R.string.no_data));   //没有数据时显示的文字
    lineChart.setNoDataTextColor(Color.BLUE);               //没有数据时显示文字的颜色
    lineChart.setDrawGridBackground(false);                 //chart 绘图区后面的背景矩形将绘制
    lineChart.setDrawBorders(false);                        //禁止绘制图表边框的线
}

void setXYAxis(LineChart lineChart, XAxis xAxis, YAxis leftYAxis, YAxis rightYAxis) {
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //X轴设置显示位置在底部
        xAxis.setAxisMinimum(0f); // 设置X轴的最小值
        xAxis.setAxisMaximum(20); // 设置X轴的最大值
        xAxis.setDrawLabels(true);  //绘制标签  指x轴上的对应数值
        xAxis.setLabelCount(10, false); // 设置X轴的刻度数量，第二个参数表示是否平均分配
        xAxis.setGranularity(1f); // 设置X轴坐标之间的最小间隔
        xAxis.setDrawGridLines(true);      // 不显示网络线
        xAxis.setLabelRotationAngle(45);    // 标签倾斜 45 度
        xAxis.setAvoidFirstLastClipping(true);
        //设置X轴值为字符串
        xAxis.setValueFormatter(new ValueFormatter() {
            private final SimpleDateFormat mFormat = new SimpleDateFormat("mm:ss", Locale.ENGLISH);
            @Override
            public String getFormattedValue(float value) {

                long millis = TimeUnit.HOURS.toMillis((long) value);
                return mFormat.format(new Date(millis));
            }
        });

        lineChart.setVisibleXRangeMaximum(20);// 当前统计图表中最多在x轴坐标线上显示的总量

        //保证Y轴从0开始，不然会上移一点
        leftYAxis.setEnabled(true);
        leftYAxis.setAxisMinimum(-10f);
        leftYAxis.setAxisMaximum(50f);
        leftYAxis.setDrawGridLines(true);
        leftYAxis.setGranularity(5f);
//        leftYAxis.setLabelCount(30);
        leftYAxis.setDrawLabels(true);

        lineChart.setVisibleYRangeMaximum(60, YAxis.AxisDependency.LEFT);// 当前统计图表中最多在Y轴坐标线上显示的总量

        rightYAxis.setEnabled(false);
    }

    private void setChartDescription(LineChart mChart,String mDescName) {
        Description description = new Description();
        description.setEnabled(true);
        description.setText(mDescName);
        description.setTextColor(Color.BLACK);
        mChart.setDescription(description);
    }

    private void createLegend(Legend legend) {

        //设置显示类型，LINE CIRCLE SQUARE EMPTY 等等 多种方式，查看LegendForm 即可
        legend.setForm(Legend.LegendForm.CIRCLE);
        legend.setTextSize(12f);
        //显示位置 左下方
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        //是否绘制在图表里面
        legend.setDrawInside(false);
        legend.setEnabled(true);
    }

    private LineDataSet createDataSet(List<Entry> entries,String labelName) {
        LineDataSet dataSet = new LineDataSet(entries,labelName);

        dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);   //设置轴的依赖
        dataSet.setColor(ColorTemplate.getHoloBlue());          //设置折线的颜色,整体的蓝色
        dataSet.setCircleColor(Color.GREEN);                    //包裹点的眼圈颜色
        dataSet.setLineWidth(5f);                               //设置线的宽度
        dataSet.setFillAlpha(128);                              //设置填补透明
        dataSet.setFillColor(ColorTemplate.getHoloBlue());      //设置填补的颜色
        dataSet.setHighLightColor(Color.BLACK);                 //设置高光的颜色
        dataSet.setValueTextColor(Color.BLUE);                  //设置文本值的颜色
        dataSet.setValueTextSize(15f);                          //设置值的文本大小
        dataSet.setDrawValues(true);                            //设置显示的值
        return dataSet;
    }

---

本文借用 Amarao <https://blog.csdn.net/jinmie0193/article/details/90239935> 诸多内容，非常感谢~~