MPAndroidChart3图表库的使用

现在网上很多大神写的都是2.x版本的，3版本改动比较大，刚换3时我也摸不着头脑。

一、概述

MPAndroidChart 是一款专门用于Android绘制图表的库，有android和IOS版本，我是看到他两个平台都有才使用的，当然，这个图表库自身也足够强大，足以满足日常的图表展示。

图表库原始地址在这里点击打开链接，英文好的同学，以及不想看本渣渣的同学可以直接去原始地址查看，贼强大。

核心功能

支持以下图表：
- Line Chart（线图）
- Bar Chart（条形图，又称柱状图）
- Combined Chart（组合图：线性+条形）
- Pie Chart（饼状图）
- Scatter Chart（散点图）
- Bubble Chart（气泡图）
- Stacked Bar Chart（堆积条形图）
- Candle Stick Chart（蜡烛图）
- Cubic Line Chart（立方拟合的折线图）
- Radar Chart（雷达图）
- Realtime Chart（实时折线图）
- Sinus Bar Chart（正弦柱状图）
支持以下操作和设置：
- 支持x，y轴缩放
- 支持拖拽
- 支持手指滑动
- 支持高亮显示
- 支持保存图表到文件中
- 支持从文件（txt）中读取数据
- 预先定义颜色模板
- 自动生成标注
- 支持自定义x，y轴的显示标签
- 支持x，y轴动画
- 支持x，y轴设置最大值和附加信息
- 支持自定义字体，颜色，背景，手势，虚线等

二、集成

集成很简单，原文也有介绍3种方法，喜欢jar包集成的同学直接网上搜索jar包。原文介绍的三种方法如下：

1. Gradle dependency (recommended)

Add the following to your project level build.gradle:

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

Add this to your app build.gradle:

dependencies {implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'}

2. Maven

Add the following to the section of your pom.xml:

<repository>       <id>jitpack.ioid>       <url>https://jitpack.iourl>repository>

Add the following to the section of your pom.xml:

<dependency>       <groupId>com.github.PhilJaygroupId>       <artifactId>MPAndroidChartartifactId>       <version>v3.0.3version>dependency>

3. clone whole repository (not recommended)

好了，我们用第一种。

在包的build.gradle添加如下：

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

在模板的build.gradle添加

dependencies {    compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'}

最新的已经有3.0.3，但是我引入3.0.3的时候有错误，引入3.0.2没问题。

这样就集成好了。

三、使用

这里我先介绍折线图的使用。

创建折线图有两种方法，一种在xml里面添加，一种直接代码创建，本渣渣用的第一种。so：

<com.github.mikephil.charting.charts.LineChart    android:id="@+id/Chart_Heart"    android:layout_width="0dp"    android:layout_height="220dp"    android:layout_marginBottom="16dp"    app:layout_constraintBottom_toBottomOf="parent"    app:layout_constraintLeft_toLeftOf="parent"    app:layout_constraintRight_toRightOf="parent" />

然后代码里面初始化：

 private void LinChart(){        mChart = getView().findViewById(R.id.Chart_Heart);        mChart.setNoDataText("");        //设置右下角描述        Description a = new Description();        a.setText("");        mChart.setDescription(a);        mChart.setTouchEnabled(true);        // 可拖曳        mChart.setDragEnabled(true);        // 可缩放        mChart.setScaleEnabled(true);        //不显示表格颜色        mChart.setDrawGridBackground(false);        mChart.setPinchZoom(true);        // 设置图表的背景颜色        //mChart.setBackgroundColor(Color.LTGRAY);        LineData data = new LineData();        // 数据显示的颜色        // data.setValueTextColor(Color.BLUE);        // 先增加一个空的数据，随后往里面动态添加        mChart.setData(data);        // 图表的注解(只有当数据集存在时候才生效)        Legend l = mChart.getLegend();        // 可以修改图表注解部分的位置        // l.setPosition(LegendPosition.LEFT_OF_CHART);        // 线性，也可是圆        l.setForm(Legend.LegendForm.CIRCLE);// 颜色        l.setTextColor(Color.WHITE);        // x坐标轴        XAxis xl = mChart.getXAxis();        xl.setTextColor(Color.BLACK);        xl.setDrawGridLines(false);        xl.setAvoidFirstLastClipping(true);        xl.setYOffset(-12);        xl.setLabelCount(5, false);        // 如果false，那么x坐标轴将不可见        xl.setEnabled(true);        // 将X坐标轴放置在底部，默认是在顶部。        xl.setPosition(XAxis.XAxisPosition.BOTTOM);//        xl.setValueFormatter(new IAxisValueFormatter() {//            @Override//            public String getFormattedValue(float value, AxisBase axis) {//                return timeList.get((int)value);//            }//        });        // 图表左边的y坐标轴线        YAxis leftAxis = mChart.getAxisLeft();        leftAxis.setTextColor(Color.BLACK);//    // 最大值        leftAxis.setAxisMaxValue(220f);////    // 最小值        leftAxis.setAxisMinValue(40f);        // 不一定要从0开始        leftAxis.setStartAtZero(false);        leftAxis.setDrawGridLines(true);        YAxis rightAxis = mChart.getAxisRight();        // 不显示图表的右边y坐标轴线        rightAxis.setEnabled(false);    }

就ok了，我这里需要动态添加数据所以添加数据这么写：

private void addEntry(int f) {    LineData data = mChart.getData();    // 每一个LineDataSet代表一条线，每张统计图表可以同时存在若干个统计折线，这些折线像数组一样从0开始下标。    // 本例只有一个，那么就是第0条折线    LineDataSet set = (LineDataSet) data.getDataSetByIndex(0);    // 如果该统计折线图还没有数据集，则创建一条出来，如果有则跳过此处代码。    if (set == null) {        set = createLineDataSet();        data.addDataSet(set);    }    // 先添加一个x坐标轴的值    // 因为是从0开始，data.getXValCount()每次返回的总是全部x坐标轴上总数量，所以不必多此一举的加1   timeList.add(df.format(new Date(new Date().getTime()))+ "");    Entry entry = new Entry(set.getEntryCount(),f);    data.addEntry(entry, 0);    // 像ListView那样的通知数据更新    data.notifyDataChanged();    mChart.notifyDataSetChanged();    mChart.getXAxis().setValueFormatter(mIA);    // 当前统计图表中最多在x轴坐标线上显示的总量    mChart.setVisibleXRangeMaximum(50);    // y坐标轴线最大值    // mChart.setVisibleYRange(30, AxisDependency.LEFT);    // 将坐标移动到最新    // 此代码将刷新图表的绘图    mChart.moveViewToX(data.getDataSetCount() - 50);    // mChart.moveViewTo(data.getXValCount()-7, 55f,    // AxisDependency.LEFT);}

x轴数据写法跟以前不一样了，我这里x轴用的添加数据的时间：

SimpleDateFormat df = new SimpleDateFormat("HH:mm:ss");//设置日期格式private List timeList = new ArrayList<>(); //存储x轴的时间

IAxisValueFormatter mIA = new IAxisValueFormatter() {    @Override    public String getFormattedValue(float value, AxisBase axis) {        return timeList.get((int) value);    }};

好了，完成。主要是给自己做个备忘，记性太差。以后再要用到的时候翻博客就OK啦。

核心功能

更多相关文章

随机推荐