MPchart的使用和SDK的封装

最新推荐文章于 2025-06-12 20:19:43 发布

WalterSECREAT

最新推荐文章于 2025-06-12 20:19:43 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/WalterZhoukick/article/details/52084536

android MPChart 折线图专栏收录该内容

1 篇文章

订阅专栏

本文分享了一个基于MPChart的图表封装案例，重点介绍了如何实现折线图的填充效果、滑动交互及数据点提示等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >



换了家公司，目前在长沙工作，拿着在北上广漂流过的经验来说，工作十分轻松。

废话不多说，业务需要，做了一个MPchart的图表封装，改了一部分东西，了解了部分属性，博客写的少，所以还有些东西不太会用，望指教。
先上效果图

这里看图表就行了，设计要求是折线图，填充效果渐变，可滑动，x轴虚线，点中的时候变粗，点为空心圆圈，一屏大概显示7个数据左右，无leftY和rightY，仅有X轴显示，点中每个点的时候显示一个tip为这个点的Y的值。



个人不喜欢写注释，所以直接上代码，再把我修改过的地方一一贴出来。


   public View initLineChart(int layoutId, int viewId, Context context, ArrayList dataList, LayoutInflater inflater, ViewGroup container,
                              LineChart LineChart, int zoom) {
        this.context = context;
        this.mLineChart = LineChart;
        //这里是设置字体的，例如楷体啥的，自己看着改就行
        mTfLight = Typeface.createFromAsset(context.getAssets(), "OpenSans-Light.ttf");
        ArrayList> Linelist = new ArrayList<>();
        for (int j = 0; j < dataList.size(); j++) {
            ArrayList listEntry1 = new ArrayList<>();
            int[] numList = dataList.get(j);
            for (int i = 0; i < numList.length; i++) {
                listEntry1.add(new Entry(i, numList[i]));
            }
            Linelist.add(listEntry1);
        }
        //这里是设置图表背景颜色的
        mLineChart.setBackgroundColor(Color.rgb(255, 255, 255));
        mLineChart.setDescription("");
        mLineChart.setNoDataTextDescription("You need to provide data for the chart.");
        mLineChart.setOnChartValueSelectedListener(this);
        //设置点击某个点之后弹出的tip，tip背景就是layout文件，至于怎么把图片设置进layout文件这种就别问我了，搞个背景就ok
        MyMarkerView mv = new MyMarkerView(context, R.layout.custom_marker_view);
        mLineChart.setMarkerView(mv);
        //是否可触摸
        mLineChart.setTouchEnabled(true);
        //滑动速度
        mLineChart.setDragDecelerationFrictionCoef(0.9f);
        mLineChart.setDragEnabled(true);
        mLineChart.setScaleEnabled(true);
        mLineChart.setDrawGridBackground(false);
        //是否高亮
        mLineChart.setHighlightPerDragEnabled(true);
        //是否允许放大缩小
        mLineChart.setScaleYEnabled(false);
        //下面两句代码我搞了半天反正没搞懂，第一句差不多是进去加载的时候就放大7倍的意思，参考了一些别人的意见
        mLineChart.setPinchZoom(true);
        //这里是通过zoom的值来控制加载的时候页面的大小，因为业务需要调整为一屏显示7个左右的数据，所以先这样做着
        mLineChart.zoom(zoom, 0, 0, 0);

        // 这写getMax getMin 都自己写的，获取数据里面最大最小值，我不贴了，大家应该也都会
        lineNum = dataList.size();
        count = getCount(Linelist);
        max = getMax(Linelist);
        min = getMin(Linelist);
        range = max - min;
        //设置数据进去
        setLineChartData(count, range, lineNum, Linelist);
        //进去会有一个加载动画效果，这里是动画的事件
        mLineChart.animateX(2500);
        //这里是表下面的文字，我的给挤掉了
        Legend l = mLineChart.getLegend();

        l.setForm(Legend.LegendForm.LINE);
        l.setTypeface(mTfLight);
        l.setTextSize(11f);
        l.setTextColor(Color.WHITE);
        l.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);

        //这里是设置X轴的东西
        XAxis xAxis = mLineChart.getXAxis();
        //X轴显示在底部
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setTypeface(mTfLight);
        //设置X轴的线为虚线，间隔10
        xAxis.enableGridDashedLine(10f, 10f, 0);
        //这句好像没用，下一句才有用
        xAxis.setAxisLineColor(Color.parseColor("#5B86A8"));
        xAxis.setGridColor(Color.parseColor("#5B86A8"));
        xAxis.setTextSize(11f);
        //是否画出X轴的线
        xAxis.setDrawAxisLine(true);
        xAxis.setTextColor(ColorTemplate.getHoloBlue());
        xAxis.setAxisMaxValue(max * 1.5f);
        xAxis.setAxisMinValue(min * 0.5f);
        xAxis.setDrawGridLines(true);
        xAxis.setGranularityEnabled(true);
        xAxis.setLabelCount(200);

        mLineChart.getAxisRight().setEnabled(false);
        mLineChart.getAxisLeft().setEnabled(false);

        mLineChart.invalidate();

        return mLineChart;
    }

这些是加载的方法，想了一下，还是写注释比较好

这里是设置数据的方法

  private void setLineChartData(int count, float range, float lineNum, ArrayList> list) {
        ArrayList dataSets = new ArrayList();

        for (int linei = 0; linei < lineNum; linei++) {

            ArrayList yVals1 = list.get(linei);


            LineDataSet set1;
            if (mLineChart.getData() != null &&
                    mLineChart.getData().getDataSetCount() > 0) {
          
                Log.e("if", "" + mLineChart.getData().getDataSetCount());

                if (lineNum > mLineChart.getData().getDataSetCount()) {
                    lineNum = mLineChart.getData().getDataSetCount();
                }
                set1 = (LineDataSet) mLineChart.getData().getDataSetByIndex(linei);
                //这里是设置点的Y的值
                set1.setValues(yVals1);
                mLineChart.getData().notifyDataChanged();
                mLineChart.notifyDataSetChanged();
            } else {
           
                set1 = new LineDataSet(yVals1, "DataSet " + (linei + 1));
                set1.setAxisDependency(YAxis.AxisDependency.LEFT);
                switch (linei) {
                    case 0:
                        set1.setColor(Color.GREEN);
                        break;
                    case 1:
                        set1.setColor(Color.RED);
                        break;
                    case 2:
                        set1.setColor(Color.YELLOW);
                        break;
                    case 3:
                        set1.setColor(Color.CYAN);
                        break;
                    default:
                        break;
                }
                //主要的设置方法在这里，是否填充图形
                set1.setDrawFilled(true);
                //填充颜色
                set1.setFillColor(Color.YELLOW);
                //填充背景
                set1.setFillDrawable(ActivityCompat.getDrawable(context, R.drawable.background));
                //数据曲线的宽度
                set1.setLineWidth(1.5f);
                //数据曲线的点的圆圈的大小
                set1.setCircleRadius(4f);
                //高亮的线的颜色
                set1.setHighLightColor(Color.parseColor("#1688F5"));
                //高亮的线的格式（虚线，10f的间隔）
                set1.enableDashedHighlightLine(10f, 10f, 0f);
                //高亮的线的线宽
                set1.setHighlightLineWidth(2.5f);
                dataSets.add(set1); // add the datasets
            }
        }


        // create a data object with the datasets
        LineData data = new LineData(dataSets);
        data.setValueTextColor(Color.WHITE);
        data.setValueTextSize(0f);

        // set data
        mLineChart.setData(data);
        List sets = mLineChart.getData()
                .getDataSets();

        for (ILineDataSet iSet : sets) {

            LineDataSet set = (LineDataSet) iSet;
            set.setMode(set.getMode() == LineDataSet.Mode.HORIZONTAL_BEZIER
                    ? LineDataSet.Mode.LINEAR
                    : LineDataSet.Mode.HORIZONTAL_BEZIER);
        }
        for (ILineDataSet iSet : sets) {

            LineDataSet set = (LineDataSet) iSet;
            set.setDrawFilled(true);
        }
        //刷新数据
        mLineChart.invalidate();

    }

嗯~好像差不多了，有改进的会再加，请各位指教