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
• 对动态和实时数据的有限的支持

三、官网文档列表说明

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

1. 入门，简单演示了如何使用，如 LineChart。
2. 与图表的互动，手势的支持，如拖拽、双指缩放等
3. 高亮数据
4. 轴（AxisBase），如何设置坐标轴等
5. X轴
6. Y轴
7. 设定数据，通过 setData() 设置数据，主要以数据集的方式呈现，不同的图表有自己的数据集类型。
8. 设置颜色，设置数值、坐标轴、线条、填充色等
9. 格式化值（ValueFormatter），格式化显示数值，默认情况下是原数据展示。但比如时间戳我们可能要展示成年月日。
10. 常规设置和样式
11. 具体设置和样式
12. Legend ，我把它翻译成图示。
13. 描述
14. 动态和实时数据
15. 修改视口
16. 动画 ，可沿 X 轴或者 Y 轴以动画的方式展示
17. MarkerView（弹出视图）
18. ChartData类 下面几个类比较重要，可以认为是给 Chart 设置 ChartData，而 ChartData 包含 ChartDataSet，这就是图-数据-数据集之间的关系。
19. ChartData子类
20. DataSet类（通用DataSet样式）
21. DataSet子类（特定的DataSet样式）
22. ViewPortHandler，提供手动修改视口大小的方法，如缩放倍数、平移等
23. 自定义填充线位置（FillFormatter）
24. Xamarin
25. 创建自己的（自定义）数据集
26. 杂项（更有用的东西）

四、入门使用

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

image.png

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

1. 布局或者 new 一个 LineChart 实例

2. 获取实例

chart = findViewById(R.id.chart1);

3. 基础属性设置

            // 背景色
            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);

4. X 轴设置

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

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

5. Y 轴设置

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

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

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

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

6. 设置数据

// 1. 每个数据是一个 Entry
ArrayList 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);

五、总结

最后来总结一下：

1. 对于图表关键需要知道并理解的是图、数据、数据集以及 Entry，这是定义并显示图表的关键概念，它们的关系是Entry 添加到数据集中，数据集被添加到数据中，数据被添加到图表中。

2. 如果要对 X 轴和 Y 轴进行设置可分别通过 XAxis 和 YAxis 进行设置

3. 如果要对数据进行设置，则通过 DataSet 进行设置

4. 如果要设置手势等，可通过图表 Chart 进行设置