MPAndroidChart的简单封装

最新推荐文章于 2023-03-23 11:39:52 发布
最新推荐文章于 2023-03-23 11:39:52 发布
阅读量9.9k 收藏 2
点赞数
分类专栏： MPChart 文章标签： 框架 MPChart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoxiaolongonly/article/details/53493047
版权

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

因为需求中大部分图表的样式都差不多，只有里面的数据做了变化，而使用图表的时候又需要对图表进行各种各样的配置，所以对图表框架进一步封装是有必要的。
我这里将图表的配置写在一个类中，将常用的方法（数据，图表颜色，描述，等等）令写方法出来设置。。因为使用的是建造者模式，可以根据需求定义。这里封装了线性图、饼状图、柱状图、雷达图。

写了一个数据类ChartValue用来存放所需数据的XY值，然后将数据设置也封装到了，配置类中，图表构建完成后获得图表的View对象，填充到想要的布局中去。

具体实现

ChartView数据类：用来存放X，Y轴值。

package cn.xiaolongonly.mpchartsample.bean;

/**
 * @author xiaolong
 * @version v1.0
 * @function <描述功能>
 * @date 2016/9/22-17:32
 */
public class ChartValue<T> {
    public String xVal;
    public T yVal;

    public ChartValue() {
    }

    public ChartValue(String xVal, T yVal) {
        this.xVal = xVal;
        this.yVal = yVal;
    }
}

Item项：每个需要的图表构建一个item对象,存放固定配置和数据设置


package cn.xiaolongonly.mpchartsample.chart.item;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;

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.ChartData;
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.bean.ChartValue;
import cn.xiaolongonly.mpchartsample.chart.markview.DataMarkView;
import cn.xiaolongonly.mpchartsample.chart.util.ColorTemplate;

public class LineChartItem extends BaseChartItem {
    private String xDesc;
    private String yDesc;
    private DataMarkView dataMarkView;

    public LineChartItem(ChartData cd, Context c, IAxisValueFormatter iAxisValueFormatter) {
        super(cd, c, iAxisValueFormatter);
    }

    public LineChartItem(ChartData cd, Context c, DataMarkView dataMarkView, IAxisValueFormatter iAxisValueFormatter) {
        super(cd, c, iAxisValueFormatter);
        this.dataMarkView = dataMarkView;
    }

    @Override
    public int getItemType() {
        return TYPE_LINECHART;
    }

    public View getView() {
        return getView(null);
    }

    public String getxDesc() {
        return xDesc;
    }

    public void setxDesc(String xDesc) {
        this.xDesc = xDesc;
    }

    public String getyDesc() {
        return yDesc;
    }

    public void setyDesc(String yDesc) {
        this.yDesc = yDesc;
    }

    @Override
    public View getView(View convertView) {

        ViewHolder holder = null;

        if (convertView == null) {

            holder = new ViewHolder();

            convertView = LayoutInflater.from(mContext).inflate(
                    R.layout.list_item_linechart, null);
            holder.chart = (LineChart) convertView.findViewById(R.id.chart);

            convertView.setTag(holder);

        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        // apply styling

        LineChart lineChart = (LineChart) holder.chart;
        lineChart.setBackgroundColor(mContext.getResources().getColor(R.color.chart_bg));
        lineChart.getLegend().setPosition(Legend.LegendPosition.ABOVE_CHART_LEFT);
        lineChart.getLegend().setForm(Legend.LegendForm.CIRCLE);
        // 设置无数据文本提示
        lineChart.setDescription(null);
//        lineChart.setNoDataText(mContext.getResources().getString(R.string.chart_no_data));
//        lineChart.setXYDesc(xDesc, yDesc);
        if (!xDesc.equals("") || !yDesc.equals("")) {
            lineChart.setXYDesc(xDesc, yDesc, 10f, mContext.getResources().getColor(R.color.normal_black_color));
        }
        //设置单方向和双方向缩放 true x,y方向可以同时控制，false只能控制x方向的缩小放大或者Y方向的缩小放大
        lineChart.setPinchZoom(true);
        DataMarkView dataMarkView = new DataMarkView(mContext, 0, "");
        lineChart.setMarkerView(dataMarkView);
        lineChart.setDrawGridBackground(false);
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //定制X轴是在图表上方还是下方。
        xAxis.setDrawGridLines(false);
        xAxis.setGranularity(1);//放大的时候X值不增多
        xAxis.setValueFormatter(mIAxisValueFormatter);
        if (dataMarkView != null) {
            lineChart.setMarkerView(dataMarkView);
        }
        YAxis yAxisRight = lineChart.getAxisRight();
        yAxisRight.setEnabled(false);
        YAxis yAxisLeft = lineChart.getAxisLeft();
        yAxisLeft.setAxisMinimum(0);
        // set data
        lineChart.setData((LineData) mChartData);

        // do not forget to refresh the chart
        // holder.chart.invalidate();
        lineChart.animateX(750);
        lineChart.animateY(750);

        return convertView;

    }

    public static class Builder {
        private int[] colors = ColorTemplate.PIE_COLORS;
        private String[] describles = new String[]{""};
        private String xDesc = "";
        private String yDesc = "";
        private List<List<ChartValue>> charValueLists = new ArrayList<>();
        private Context context;
        private boolean isFillColor;
        private ArrayList<String> labels = new ArrayList<>();

        public Builder(Context context) {
            this.context = context;
        }

        public Builder addChartValueList(List<ChartValue> charValueLists) {
            this.charValueLists.add(charValueLists);
            return this;
        }

        public Builder setChartValueList(List<List<ChartValue>> charValueLists) {
            this.charValueLists = charValueLists;
            return this;
        }

        public Builder setyDesc(String yDesc) {
            this.yDesc = yDesc;
            return this;
        }

        public Builder setxDesc(String xDesc) {
            this.xDesc = xDesc;
            return this;
        }

        public Builder setDescribles(String[] describles) {
            this.describles = describles;
            return this;
        }

        public Builder setColorReses(int[] colorReses) {
            this.colors = new int[colorReses.length];
            for (int i = 0; i < colors.length; i++) {
                colors[i] = context.getResources().getColor(colorReses[i]);
            }
            return this;
        }

        public Builder fillColorEnable(boolean isFillColor) {
            this.isFillColor = isFillColor;
            return this;
        }

        public LineChartItem build() {
            return build(null);
        }

        public LineChartItem build(DataMarkView dataMarkView) {
            List<ILineDataSet> lineDataSets = new ArrayList<>();
            for (int listIndexOutside = 0; listIndexOutside < charValueLists.size(); listIndexOutside++) {
                ArrayList<Entry> entries = new ArrayList<Entry>();
                for (int listIndexInside = 0; listIndexInside < charValueLists.get(listIndexOutside).size(); listIndexInside++) {
                    entries.add(new Entry((float) listIndexInside, (float) charValueLists.get(listIndexOutside).get(listIndexInside).yVal));
                    if (listIndexOutside == 0) {
                        labels.add(charValueLists.get(listIndexOutside).get(listIndexInside).xVal);
                    }
                }
                lineDataSets.add(generateLineDataSet(entries, describles[listIndexOutside], colors[listIndexOutside % colors.length]));
            }
            IAxisValueFormatter iAxisValueFormatter = new IAxisValueFormatter() {
                @Override
                public String getFormattedValue(float value, AxisBase axis) {
                    return labels.get((int) value % labels.size());
                }
            };
            LineData cd = new LineData(lineDataSets);
            LineChartItem lineChartItem = null;
            if (dataMarkView != null) {
                lineChartItem = new LineChartItem(cd, context, dataMarkView, iAxisValueFormatter);
            } else {
                lineChartItem = new LineChartItem(cd, context, iAxisValueFormatter);
            }
            lineChartItem.setxDesc(xDesc);
            lineChartItem.setyDesc(yDesc);
            return lineChartItem;
        }

        private ILineDataSet generateLineDataSet(ArrayList<Entry> entries, String describle, int color) {
            LineDataSet dataSet = new LineDataSet(entries, describle);
            dataSet.setLineWidth(2.0f);
            dataSet.setCircleRadius(3.5f);
            dataSet.setDrawCircleHole(true);//填充圆
            dataSet.setValueTextSize(9f);
            dataSet.setHighlightLineWidth(2.0f);
            dataSet.setDrawFilled(isFillColor);
            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;
        }
    }

}

当然如果需求图表有其他样式的的话，我觉得也可以把配置信息抽取出来，通过不同的配置来设置不同的样式。

在Activity中的使用


package cn.xiaolongonly.mpchartsample.ui;

import android.widget.RelativeLayout;

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

import cn.xiaolongonly.mpchartsample.R;
import cn.xiaolongonly.mpchartsample.base.BaseTitleActivity;
import cn.xiaolongonly.mpchartsample.bean.ChartValue;
import cn.xiaolongonly.mpchartsample.chart.item.LineChartItem;

/**
 * @author xiaolong
 * @version v1.0
 * @function <描述功能>
 * @date 2016/12/5-17:32
 */
public class LineChartActivity2 extends BaseTitleActivity {
    private RelativeLayout rlContent;

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

    @Override
    protected void initView() {
        rlContent = findView(R.id.rlContent);
        List<ChartValue> chartValues = new ArrayList<>();
        chartValues.add(new ChartValue("11月", 110f));
        chartValues.add(new ChartValue("10月", 120f));
        chartValues.add(new ChartValue("9月", 100f));
        List<ChartValue> chartValues2 = new ArrayList<>();
        chartValues2.add(new ChartValue("11月", 155f));
        chartValues2.add(new ChartValue("10月", 133f));
        chartValues2.add(new ChartValue("9月", 122f));
        LineChartItem lineChartItem = new LineChartItem.Builder(this).setxDesc("单位(月)")
                .setyDesc("单位(万)").setDescribles(new String[]{"项目支出金额"})
                .addChartValueList(chartValues).addChartValueList(chartValues2)
                .build();
        rlContent.addView(lineChartItem.getView());
    }

    @Override
    protected void setListener() {

    }

}

是不是就简单多了只要构建一个Item对象，然后将item对象的图表布局，add到View中去就可以了。

实现效果
实现效果

项目github下载

总结

一直都没想到有一天我也能这么写代码，感觉代码写多了很多东西就懂了。

在最开始的时候老大让我对图表框架进行二次封装，我听的一脸懵逼，经过一段时间的思考，反复对照之前的项目，因为之前的项目的配置都写在继承的图表中，在xml布局中要将图表改成继承的图表，数据导入也写在了Activity类中，感觉代码特别多且杂，后来想到了一句话，多用组合少用继承，现在看来确实，组合的方式会比继承好很多。虽然参考了好多代码，封装的也不怎么样，但是我确实是做到了。

那时候跟同时说我把图表框架封装完的时候，同事说，不会啊封装的不错。对于我这种渣渣来讲就是莫大的安慰了。离自己的目标又近了一步。加油~~

幕涩
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
Android图表控件MPAndroidChart之线形图表介绍（LineChart）
qq_33749262的博客
04-17 9530
一，添加依赖： 1 . 在project的build.gradle中添加依赖： repositories { //......// maven { url "https://jitpack.io"}//chart需求 } 2 . 在app的build.gradle中添加依赖： dependencies { //......// im...
MPAndroidChart之辅助工具类封装
黄诗城
03-01 2496
该辅助工具类是自己在项目中进行的一些封装，虽然又大多数的参数是写死了的，但是也适用于一般的情况，减少代码量。下面就给出代码，有用的可以参考一下：public class LineChartUtils { /** * 设置图表数据的方法 * @param lineChart 要设置数据的图表 * @param formData 表格的Y轴数据 * @pa
Android——图表库MPAndroidChart的使用
tracy的博客
10-31 1958
Android——图表库MPAndroidChart的使用前言：将MPAndroidChart相关的方法封装成一个类，方便的使用MPAndroidChart绘制线性图。GitHub地址：https://github.com/PhilJay/MPAndroidChart
MPChart折线图工具类封装
♛ 走心。的专栏
09-26 1973
package com.example.epnc.utils; import android.graphics.Color; import com.github.mikephil.charting.charts.LineChart; import com.github.mikephil.charting.components.LimitLine; import com.github.mikep
MPandroidChart的柱状图的部分属性
XinBaDeRongYao的博客
02-17 741
1. 设置轴的最小值：setAxisMinimum(float min)：为此轴的条目设置一个最小值。2. 设置轴的最大值：setAxisMaximum(float max)：为此轴的条目设置一个最大值。entries.add(BarEntry(0f, 30f)) // x=0 y=30 代表一个点。entries.add(BarEntry(1f, 80f)) // x=1 y=80 代表一个点。
MPAndroidChart 柱形图出现的问题
yuqingsen的博客
10-14 1284
1、当X轴的Position设置为Button时，X轴的数字会两个显示一个 此时只要设置 xAxis.setGranularity(1f)就可以了 2、第一个柱形只显示一半 那是因为设置了xAxis.setAxisMinimum(0);Y轴可以这么设置，X轴从零开始的话还是设置默认好了 3、X轴显示的自定义 X轴先传入正常的数字 List<BarEntry> barEntries = ...
简易封装Ajax.zip
04-11
简易封装Ajax，并用get和post案例检验
rapidjson 简单封装
01-31
基于开源json库 rapidjson 的一层简单封装，比直接调用原生库要方便很多。 基于开源json库 rapidjson 的一层简单封装，比直接调用原生库要方便很多。
简易电路板保护封装
01-20
而“软封装”的效果要好得多，目前通用的“软封装”材料有环氧树脂，及聚硫化物、聚氨基甲酸酯、有机硅等4种封装材料。 　所谓“软封装”就是它不需要利用封装外壳来进行集成电路芯片的安装和保护，而是借助于有机...
popwindow的简单封装
08-10
对popwindow的一个简单封装，能够快捷使用popwindow
MPAndroidChart
08-22
Android开发柱状图、饼图、扇形图等引用包 MPAndroidChat
MPandroidChart
11-01
MpAndroidChart的简单封装，适用于项目维护，开发。 主要封装柱状图，饼状图，折线图，横向柱状图，柱状图可以实现多柱图
MPAndroidChart中的LineChart
05-09
自己写的LineChart有一些基本功能供大家参考
MPAndroidChart之完整ChartUtils
11-23
MPAndroidChart之完整ChartUtils，MPAndroidChart之完整ChartUtils
MPAndroidChart的折线图的使用及封装
Accompany_you_to_go的博客
03-28 7548
DEMO效果图Demo和Jar包 地址这里写链接内容MPAndroidChart是一款基于Android的开源图表库，MPAndroidChart不仅可以在Android设备上绘制各种统计图表，而且可以对图表进行拖动和缩放操作，应用起来非常灵活。由于项目需要，对比了一些框架，感觉还是MPAndroidChart更为好用，项目中多处需要使用折线图所以特地对其做了封装XML布局<LinearLayout
Android图表库MPAndroidChart(六)——换一种思考方式，水平条形图的实现过程
weixin_34104341的博客
11-17 625
Android图表库MPAndroidChart(六)——换一种思考方式，水平条形图的实现过程 一.基本实现 我们之前实现了条形图，现在来看下水平条形图是怎么实现的，说白了就是横起来，看下效果： 说起来现在写着博客就轻松很多了，大家对MPAndroidChart的大部分流程已经很熟悉了，我们先layout里面定...
安卓图形之MPAndroidChart3.0详解三——柱状图（一）（属性篇）
qq_43332570的博客
11-28 7079
1 前言 MPAndroidCHart中柱状图的使用与与折线图的使用大致相同，也是通过设置Legend，Description，XAxis，YAxis，BarDataset，BarSet和BarChart来达到我们想要的属性。 2 基本使用 下面的这个demo仅仅只是演示了MPAndroidCahrt中柱状图最基本的使用，就只是简单的填充了数据，都是默认的样式 效果图 代码如下 publi...
Android使用MPAndroidChart 绘制折线图 可实时增加数据
qq_38174131的博客
08-06 3406
使用MPAndroidChart 来绘制曲线
Android最火的框架系列（十三）MpAndroidChart
zhaojun的博客
03-23 5124
本系列篇主要介绍下Android非常火爆的三方图表库MpAndroidChart的使用。可能在大多数情况下，我们很少会在Android端去开发图表，一般情况下图表都会在PC端用H5去展示。但如果说做一些金融财经类、工厂类、统计类、大数据类等的app，肯定会涉及到到数据可视化分析，那么你绝对会用到MpAndroidChart。
简单封装promise
最新发布
08-05
当你需要封装一个简单的Promise时，你可以使用以下代码示例： ```javascriptfunction myPromise() { return new Promise((resolve, reject) => { // 执行异步操作 // 如果异步操作成功，调用 resolve(value) // 如果异步操作失败，调用 reject(error) }); } // 使用示例myPromise() .then((value) => { // 处理异步操作成功的结果 }) .catch((error) => { // 处理异步操作失败的错误 }); ``` 在上面的示例中，myPromise函数返回一个新的Promise实例。你可以在Promise的构造函数中编写你的异步操作代码，并在成功时调用resolve方法，失败时调用reject方法。 然后，你可以使用.then()方法来处理异步操作成功的结果，并使用.catch()方法来处理异步操作失败的错误。 当你调用myPromise()时，它将返回一个Promise实例，你可以链式调用.then()和.catch()来处理异步操作的结果和错误。 请注意，这只是一个简单的示例，你可以根据具体需求进行更复杂的封装。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值