Android图表控件MPAndroidChart实现左右滑动以及联动

前言

MPAndroidChart是一个功能强大的Android图表控件库，它实现了许多常见的图表效果。关于MPAndroidChart的使用文章已经很多了，这里不再详细介绍它的使用。当数据量过多时，一部手机小小的屏幕是无法显示完全的。因此需要让图表能够放大显示，并提供左右滑动功能。

实现

原理：获取图表的Matrix，通过Matrix来实现图表的放大，平移操作。
关键代码如下：

// 获取图标Matrix参数
mMatrix = mMainChart.getViewPortHandler().getMatrixTouch();
// 设置平移距离（这里是平移到图标的最右边）
float distance = mMainChart.getContentRect().width() * (scaleX - 1);
mMatrix.setTranslate(-distance, 0);
//两个参数分别是x,y轴的缩放比例。
mMatrix.preScale(scaleX, 1f);
// 刷新
mMatrix = mMainChart.getViewPortHandler().refresh(mMatrix, mMainChart, true);

效果如下

• 可以拖动滑块控制图表的滑动
• 当图标滑动或缩放时，滑块也会做出相应的改变

源码解读

源码地址：
https://gitee.com/yvxiang/ChartDemo
https://github.com/TangLiangs/ChartDemo

DataModel： 数据模型，在使用图表时，需要转换为Entry。

public class DataModel {
   

    public int x;

    public int y;

    public DataModel(int x, int y) {
   
        this.x = x;
        this.y = y;
    }
}

MainChartConfig： 图表的基础设置，以及对联动视图的管理。

public class MainChartConfig {
   

    // 图表
    private LineChart mMainChart;
    // 图表控制滑块
    private ScrollBlockView mSubScroll;
    // 表格默认缩放比例
    private float scaleX = 6;

    private Context mContext;
    private Matrix mMatrix;

    private List<Entry> entryList = new ArrayList<>();
    private List<Integer> colorList = new ArrayList<>();


    public MainChartConfig(LineChart mainChart, ScrollBlockView scrollView, Context context) {
   
        mMainChart = mainChart;
        mSubScroll = scrollView;
        mContext = context;
        mMatrix = mMainChart.getViewPortHandler().getMatrixTouch();
        initData();
    }

    /**
     * 初始化数据
     */
    private void initData() {
   
        setMainChart();
        setMainXConfig();
        setMainYConfig();
        setScrollConfig();
        setScrollViewRate();
    }

    /**
     * 图表绘制
     */
    public void setData(List<DataModel> dataModels) {
   
        parseEntry(dataModels);
        setMainLineData();
        refresh();
    }

    /**
     * 刷新表格
     */
    private void refresh() {
   
        // 设置自动缩放
        float distance = mMainChart.getContentRect().width() * (scaleX - 1);
        mMatrix.setTranslate(-distance, 0);
        //两个参数分别是x,y轴的缩放比例。
        mMatrix.preScale(scaleX, 1f);
        mMatrix = mMainChart.getViewPortHandler().refresh(mMatrix, mMainChart, true);
        mMainChart.notifyDataSetChanged();
        mMainChart.invalidate();
        mSubScroll.setScrollRate(1.0f, scaleX);
    }

    /**
     * 解析数据
     */
    private void parseEntry(List<DataModel> models) {
   
        // 清除旧的数据
        entryList.clear();
        colorList.clear();

        if (models != null && models.size() > 0) {
   
            // 取最值，适应高度
            float max = 0;
            float min = 0;
            for (int i = 0; i < models.size(); i++) {
   
                // 设置Y轴数据
                DataModel model = models.get(i);
                Entry entry