非常实用的图表工具MPAndroidChart

最近做了两个数据展示的APP，都使用到了MPAndroidChart这个图表框架。

框架地址：https://github.com/PhilJay/MPAndroidChart

下面就来讲解一下MPChart的使用

MPAndoridChart

Chart types（目前支持的图表类别）

• LineChart (with legend, simple design) (线性图1)
  

• LineChart (with legend, simple design) (线性图2)
  

• LineChart (cubic lines) (线性图3)
  

• LineChart (gradient fill) (线性图4)
  

• Combined-Chart (bar- and linechart in this case) (组合图 柱状图加线形图组合)
  

• BarChart (with legend, simple design)(柱状图1)
  

• BarChart (grouped DataSets) (柱状图2)

• Horizontal-BarChart(横向柱状图)
  

• PieChart (with selection, …) (饼状图)
  

• ScatterChart (with squares, triangles, circles, … and more)(散点图)
  

• CandleStickChart (for financial data) （烛形图）
  

• BubbleChart (area covered by bubbles indicates the yValue)（气泡图）
  

• RadarChart (spider web chart)(雷达图)
  

功能

• 支持x，y轴缩放
• 支持拖拽
• 支持手指滑动
• 支持高亮显示
• 支持保存图表到文件中
• 支持从文件（txt）中读取数据
• 预先定义颜色模板
• 自动生成标注
• 支持自定义x，y轴的显示标签
• 支持x，y轴动画
• 支持x，y轴设置最大值和附加信息
• 支持自定义字体，颜色，背景，手势，虚线等

实现

写sample的时候才发现，从1.0版本到3.0版本这个框架改动还是蛮多的。
主要是把雷达图和饼状图抽取共用了。为了实现复合图将X轴值的设置放到了Axais中。之前是直接放到ChartData中的。

图表常用的实现：
每个图表都必须实现填充ChartData，也就是XY轴的数据。
系统有默认的图表样式，可根据喜好设置图表的样式，各种颜色、形状、数据之间的间距等。
可以根据图表的绘制流程和图表的点击事件(点击某个数据的监听)设置监听。
可以添加图表的一些辅助显示工具：MarkView(以MarkView的形式显示数据，这种在数据量大的情况能避免数据显示重叠)，Legend(图表轴描述)

这边以LineChart为例

package cn.xiaolongonly.mpchartsample.ui;

import android.graphics.Color;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

import java.util.ArrayList;
import java.util.List;

import cn.xiaolongonly.mpchartsample.R;
import cn.xiaolongonly.mpchartsample.base.BaseActivity;
import cn.xiaolongonly.mpchartsample.chart.markview.DataMarkView;
import cn.xiaolongonly.mpchartsample.chart.util.ColorTemplate;

/**
 * @author xiaolong
 * @version v1.0
 * @function <描述功能>
 * @date 2016/12/6-9:10
 */
public class LineChartActivity1 extends BaseActivity {
    private LineChart chart;

    @Override
    protected int getLayoutId() {
        return R.layout.list_item_linechart;
    }

    @Override
    protected void initView() {
        chart = findView(R.id.chart);

        ChartConfig();
        //XY轴配置
        XAxis xAxis = chart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //定制X轴是在图表上方还是下方。
        xAxis.setDrawGridLines(false);
        xAxis.setGranularity(1);
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return (int) value + "年";
            }
        });
        YAxis yAxisRight = chart.getAxisRight();
        yAxisRight.setEnabled(false);
        YAxis yAxisLeft = chart.getAxisLeft();
        yAxisLeft.setAxisMinValue(0);
        //动画效果
        chart.animateX(750);
        chart.animateY(750);
    }

    /**
     * 图表的配置 一些提示和Legend
     */
    private void ChartConfig() {

        //设置覆盖物
        DataMarkView dataMarkView = new DataMarkView(this, 0, "");//自定义覆盖物
        chart.setMarkerView(dataMarkView);

        //背景设置
        chart.setDrawGridBackground(false);//表格背景绘制
        chart.setBackgroundColor(getResources().getColor(R.color.chart_bg));

        //Legend定制
        chart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
        chart.getLegend().setForm(Legend.LegendForm.CIRCLE);//Legend样式

        //图表描述
        chart.setDescription(null);
        // 设置无数据文本提示
        chart.setNoDataText(getResources().getString(R.string.chart_no_data));
        //XY轴描述
        chart.setXYDesc("年份", "总金额（元)");
        //设置单方向和双方向缩放 true x,y方向可以同时控制，false只能控制x方向的缩小放大或者Y方向的缩小放大
        chart.setPinchZoom(true);
        //填充数据
        chart.setData(new LineData(generateLineDataSet()));
    }

    @Override
    protected void setListener() {

    }


    private ILineDataSet generateLineDataSet() {
        int color = ColorTemplate.PIE_COLORS[0];
        LineDataSet dataSet = new LineDataSet(generateData(), "年度营业额曲线");
        dataSet.setLineWidth(2.0f);
        dataSet.setCircleRadius(3.5f);
        dataSet.setDrawCircleHole(true);//填充圆
        dataSet.setValueTextSize(9f);
        dataSet.setHighlightLineWidth(2.0f);
        dataSet.setDrawFilled(true);//区域颜色
        dataSet.setFillAlpha(51);
        dataSet.setFillColor(color); //填充色
        dataSet.setHighLightColor(color); //选中十字线色
        dataSet.setColor(color); //线条颜色
        dataSet.setCircleColor(color); //圆点颜色
        dataSet.setCircleColorHole(Color.WHITE);
        dataSet.setCircleHoleRadius(2.0f);
        dataSet.setDrawValues(false);
        return dataSet;
    }

    private List<Entry> generateData() {
        List<Entry> entryList = new ArrayList<>();
        entryList.add(new Entry(2013, 1000));
        entryList.add(new Entry(2014, 2000));
        entryList.add(new Entry(2015, 3000));
        entryList.add(new Entry(2016, 4000));
        return entryList;
    }
}

效果如下

    简单的介绍了一下MPChart的实现，一般就两个流程：
    一是设置图表配置（Legend,X，Y轴样式，图表样式，markView添加，动画效果等，注：不设置的话会使用默认的配置）
    二是填充数据（将需要展示的数据绑定到图表框架中）。
    图表框架有写地方并不能满足我们的需求，比如说没有XY轴描述。
    国内的人大部分看图表的习惯就只需要显示单条X，Y轴，并在轴末端设置单位等。
    下一篇文章介绍 自定义需求，XY轴描述添加。

参考自：http://blog.csdn.net/u013338165/article/details/44810025