MPAndroidChart 简介

一、前言

项目中为了能让用户对数据有更直观的认识，也为了让数据的展示更加高 Bigger，往往都选择了以图表的方式展示给用户，如折线图、饼图、雷达图等.....而且数据的展示最好还能伴有动画的形式就更佳了。

今天要学习的MPAndroidChart
应该说是目前使用最广，当然也是最佳的开源解决方案了。在一定程度上，它满足了大部分业务的需求。

二、核心功能

学习的最好资料是官网和源码。下面是官网的核心功能列表，这里只是做一个简单的翻译，可能不准确，有需要可以移步官方文档说明。

MPAndroidChart最重要的核心功能

许多不同的图表类型：LineChart(线型图)，BarChart（条状图，垂直，水平，堆叠，分组），PieChart（饼图），ScatterChart(散点图)，CandleStickChart（K线图、蜡烛图），RadarChart（雷达图、蜘蛛网络图表），BubbleChart(气泡图)

组合图表（例如，一条线和一条条）

在两个轴上缩放（带有触摸手势，单独的轴或捏缩放）

拖动/平移（带有触摸手势）

分开的（双）y轴

突出显示值（带有可自定义的弹出视图）

将图表保存到SD卡（作为图像）

预定义的颜色模板

图例（自动生成，可自定义）

可自定义的轴（x轴和y轴）

动画（在x轴和y轴上建立动画）

极限线（提供其他信息，最大值等）

触摸，手势和选择回调的侦听器

完全可定制（绘画，字体，图例，颜色，背景，虚线等）

通过MPAndroidChart-Realm库支持Realm.io移动数据库

在Line-Chart和BarChart中平滑渲染多达10.000个数据点（在运行Android 6.0的2014 OnePlus One上测试）

轻量级（方法计数〜1.4K）

可作为.jar文件使用（大小仅为500kb）

可作为gradle依赖项并通过Maven获得

Google-PlayStore演示应用程序

广泛使用，对GitHub和stackoverflow 都提供了强大的支持– mpandroidchart

也可用于iOS：图表（API的工作方式相同）

也可用于Xamarin：MPAndroidChart.Xamarin

对动态和实时数据的有限的支持

三、官网文档列表说明

下面是官网文档的文章列表，这里作了一个简单的翻译以及理解补充。

入门，简单演示了如何使用，如 LineChart。

与图表的互动，手势的支持，如拖拽、双指缩放等

高亮数据

轴（AxisBase），如何设置坐标轴等

X轴

Y轴

设定数据，通过 setData() 设置数据，主要以数据集的方式呈现，不同的图表有自己的数据集类型。

设置颜色，设置数值、坐标轴、线条、填充色等

格式化值（ValueFormatter），格式化显示数值，默认情况下是原数据展示。但比如时间戳我们可能要展示成年月日。

常规设置和样式

具体设置和样式

Legend ，我把它翻译成图示。

描述

动态和实时数据

修改视口

动画，可沿 X 轴或者 Y 轴以动画的方式展示

MarkerView（弹出视图）

ChartData类下面几个类比较重要，可以认为是给 Chart 设置 ChartData，而 ChartData 包含 ChartDataSet，这就是图-数据-数据集之间的关系。

ChartData子类

DataSet类（通用DataSet样式）

DataSet子类（特定的DataSet样式）

ViewPortHandler，提供手动修改视口大小的方法，如缩放倍数、平移等

自定义填充线位置（FillFormatter）

Xamarin

创建自己的（自定义）数据集

杂项（更有用的东西）

四、入门使用

先通过一张图来看一看，图例中所包含的东西有哪些内容吧。

image.png

实现步骤，代码来自官方示例：

布局或者 new 一个 LineChart 实例

<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/seekBar1" />

获取实例

chart = findViewById(R.id.chart1);

基础属性设置

            // 背景色
            chart.setBackgroundColor(Color.WHITE);

            // 图表的文本描述
            chart.getDescription().setEnabled(false);

            // 手势设置
            chart.setTouchEnabled(true);

            // 添加监听器
            chart.setOnChartValueSelectedListener(this);
            chart.setDrawGridBackground(false);

            // 自定义 MarkView，当数据被选择时会展示
            MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
            mv.setChartView(chart);
            chart.setMarker(mv);

            // 设置拖拽、缩放等
            chart.setDragEnabled(true);
            chart.setScaleEnabled(true);
            chart.setScaleXEnabled(true);
            chart.setScaleYEnabled(true);

            // 设置双指缩放
            chart.setPinchZoom(true);

X 轴设置

// 获取 X 轴
xAxis = chart.getXAxis();

// 允许显示 X 轴的垂直网格线
xAxis.enableGridDashedLine(10f, 10f, 0f);

Y 轴设置

// 获取 Y 轴
yAxis = chart.getAxisLeft();

// 禁止右轴
chart.getAxisRight().setEnabled(false);

// Y 轴的水平网格线
yAxis.enableGridDashedLine(10f, 10f, 0f);

// 设置 Y 轴的数值范围
yAxis.setAxisMaximum(200f);
yAxis.setAxisMinimum(-50f);

设置数据

// 1. 每个数据是一个 Entry
ArrayList<Entry> values = new ArrayList<>();

for (int i = 0; i < count; i++) {

    float val = (float) (Math.random() * range) - 30;
    values.add(new Entry(i, val, getResources().getDrawable(R.drawable.star)));
}

// 2. 创建一个数据集 DataSet ，用来添加 Entry。一个图中可以包含多个数据集
set1 = new LineDataSet(values, "DataSet 1");

// 3. 通过数据集设置数据的样式，如字体颜色、线型、线型颜色、填充色、线宽等属性
// draw dashed line
set1.enableDashedLine(10f, 5f, 0f);

// black lines and points
set1.setColor(Color.BLACK);
set1.setCircleColor(Color.BLACK);

// line thickness and point size
set1.setLineWidth(1f);
et1.setCircleRadius(3f);

// draw points as solid circles
set1.setDrawCircleHole(false);

// 4.将数据集添加到数据 ChartData 中
LineData data = new LineData(dataSets);

// 5. 将数据添加到图表中
chart.setData(data);

五、总结

最后来总结一下：

对于图表关键需要知道并理解的是图、数据、数据集以及 Entry，这是定义并显示图表的关键概念，它们的关系是Entry 添加到数据集中，数据集被添加到数据中，数据被添加到图表中。
如果要对 X 轴和 Y 轴进行设置可分别通过 XAxis 和 YAxis 进行设置
如果要对数据进行设置，则通过 DataSet 进行设置
如果要设置手势等，可通过图表 Chart 进行设置