前言
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