MPAndroidChart详细文档 mpandroidchart 缩放问题

* 注意：*测试版本：com.github.PhilJay:MPAndroidChart:v3.0.2

1.linechart使用

设置：

chart.setDescription(null);//去除Description
        chart.setDragEnabled(true);//设置可以拖动
        chart.setDragDecelerationEnabled(true);//拖动减速
        chart.setDoubleTapToZoomEnabled(false);//取消双击缩放
        chart.setBackgroundColor(ContextCompat.getColor(getContext(), R.color.appbgcolor));//背景颜色
        chart.setScaleYEnabled(false);//1取消y轴缩放
        chart.setDragDecelerationFrictionCoef(0.9f);//拖动降速速率

        chart.getAxisRight().setEnabled(false);//取消右边y轴
        chart.getAxisLeft().setTextSize(10);//y轴字体大小
        chart.getAxisLeft().setMinWidth(0f);//左边y轴最小值
        chart.getAxisLeft().setAxisLineColor(Color.parseColor("#00ffffff"));//y轴线颜色
        chart.getAxisLeft().setGridColor(Color.parseColor("#06253a"));//网格颜色
        chart.getAxisLeft().setTextColor(Color.parseColor("#65859a"));//y轴字体颜色
        chart.getAxisLeft().setDrawLimitLinesBehindData(true);//设置限制线

        chart.getXAxis().setTextColor(Color.parseColor("#65859a"));//x轴字体颜色
        chart.getXAxis().setAxisLineWidth(0);//x轴线宽度
        chart.getXAxis().setDrawGridLines(false);//取消x轴网格
        chart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//设置x轴在底部显示
        chart.getXAxis().setTextSize(10);//x轴字体大小
        chart.getXAxis().setCenterAxisLabels(false);//使x轴显示文字居中
        chart.getXAxis().setGranularityEnabled(false);//x轴文字单个显示
        chart.getXAxis().setAxisLineColor(Color.parseColor("#00ffffff"));//x轴线颜色
        chart.getXAxis().setYOffset(0);//x轴偏移量

        chart.getLegend().setEnabled(false);

添加数据：

private void initChartData(LineChart chart) {
        //每个点的坐标,自己随便搞点（x,y）坐标就可以了
        List<Entry> pointValues = new ArrayList<>();
        for (int i = 1; i < 19; i++) {
            int y = (int) (Math.random() * 20);
            pointValues.add(new Entry(i, y));

        }

        //点构成的某条线
        LineDataSet lineDataSet = new LineDataSet(pointValues, "");
        //设置该线的颜色
        lineDataSet.setColor(Color.parseColor("#5dbcfe"));

        //设置该线的宽度
        lineDataSet.setLineWidth(1f);
        //设置每个坐标点的圆大小
        lineDataSet.setCircleRadius(4f);
        //设置不能选中 flase
        lineDataSet.setHighlightEnabled(true);
        //设置是否画圆
        lineDataSet.setDrawCircles(true);
        //高亮颜色
        lineDataSet.setHighLightColor(Color.parseColor("#005dbcfe"));
        //中心圆半径
        lineDataSet.setCircleHoleRadius(2);
        //中心圆颜色
        lineDataSet.setCircleColorHole(ContextCompat.getColor(activity, R.color.appbgcolor));
        //圆圈颜色
        lineDataSet.setCircleColor(Color.parseColor("#5bbcff"));
        // 设置平滑曲线模式
        //  lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        //设置线一面部分是否填充颜色
        lineDataSet.setDrawFilled(true);
        if (Build.VERSION.SDK_INT >= 18) {
            lineDataSet.setFillDrawable(ContextCompat.getDrawable(activity, R.drawable.shape_mianchart_filldrawable));
        } else {
            //设置填充的颜色
            lineDataSet.setFillColor(Color.parseColor("#445dbcfe"));
        }
        //设置是否显示点的坐标值
        lineDataSet.setDrawValues(false);
        lineDataSet.setValueTextColor(Color.parseColor("#5abdfe"));

        //线的集合（可单条或多条线）
        List<ILineDataSet> dataSets = new ArrayList<>();
        dataSets.add(lineDataSet);
        //把要画的所有线(线的集合)添加到LineData里
        LineData lineData = new LineData(dataSets);
        //把最终的数据setData
        chart.setData(lineData);

    }

2.barchart使用:

设置：

animateY(1000);
        animateX(1000);



        setDescription(null);//去除Description
        setDragEnabled(true);//设置可以拖动
        setDragDecelerationEnabled(true);//拖动减速
        setDoubleTapToZoomEnabled(false);//取消双击缩放
        setBackgroundColor(ContextCompat.getColor(getContext(), R.color.appbgcolor));//背景颜色
        setScaleYEnabled(false);//1取消y轴缩放
        setDragDecelerationFrictionCoef(0.9f);//拖动降速速率
        getAxisRight().setEnabled(false);//取消右边y轴

        getAxisLeft().setTextSize(10);//y轴字体大小
        getAxisLeft().setMinWidth(0f);//左边y轴最小值
        getAxisLeft().setAxisLineColor(Color.parseColor("#00ffffff"));//y轴线颜色
        getAxisLeft().setGridColor(Color.parseColor("#0b3652"));//网格颜色
        getAxisLeft().setTextColor(Color.parseColor("#65859a"));//y轴字体颜色
        getAxisLeft().setDrawLimitLinesBehindData(false);//设置限制线


        getXAxis().setTextColor(Color.parseColor("#65859a"));//x轴字体颜色
        getXAxis().setAxisLineWidth(0);//x轴线宽度
        getXAxis().setDrawGridLines(false);//取消x轴网格
        getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//设置x轴在底部显示
        getXAxis().setTextSize(10);//x轴字体大小
        getXAxis().setAxisLineColor(Color.parseColor("#00ffffff"));//x轴线颜色
       // getXAxis().setYOffset(0);//x轴偏移量
        getXAxis().setGranularity(1f);//显示一个值
      // getXAxis().setAxisMinimum(0);//x轴最小值为0,如果设置为0，就会出现第一条柱形图显示不全
        getXAxis().setAxisMaximum(31);x轴最大值为31
        getXAxis().setCenterAxisLabels(true);//选中标志居中显示
        getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);
        getXAxis().setCenterAxisLabels(false);//标签文字显示在直方图中间，会导致文字看起来不居中
      //  getXAxis().setXOffset(0); //设置偏移量
        getXAxis().setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {
                return (int) v + "";
            }
        });
       // getXAxis().setSpaceMin(100);

        //setBorderWidth(100);


        getLegend().setEnabled(false);//不显示legend

添加数据：

List<BarEntry> pointValues = new ArrayList<>();
       final ArrayList<String> xVals = new ArrayList<>();//X轴数据

        for (int i = 0; i < 30; i++) {
            xVals.add(i+1+"");
            int y = (int) (Math.random() * 30);
            pointValues.add(new BarEntry(i,y));

        }



        chart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(xVals));//x轴显示



        //点构成的某条线
        BarDataSet barDataSet = new BarDataSet(pointValues, "");

        barDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);

        //允许选中
        barDataSet.setHighlightEnabled(true);
        //选中颜色
        barDataSet.setHighLightColor(Color.parseColor("#00fffe"));
        //背景颜色
        barDataSet.setBarBorderColor(ContextCompat.getColor(activity, R.color.appbgcolor));
        //设置不显示值
        barDataSet.setDrawValues(false);
        //设置bar颜色
        barDataSet.setColor(Color.parseColor("#00fffe"));
        //线的集合（可单条或多条线）

        List<IBarDataSet> dataSets = new ArrayList<>();
        dataSets.add(barDataSet);

        //把要画的所有线(线的集合)添加到LineData里
        BarData barData = new BarData(dataSets);

        //直方图占空比 0~1
        barData.setBarWidth(0.2f);
        //把最终的数据setData
        chart.setData(barData);

3.一些坑

1.添加均线：

//设置可用课时
        LimitLine ll1 = new LimitLine(16, "可用");
        ll1.setTextColor(Color.YELLOW);
        ll1.setLabel("可用");
        ll1.setLineWidth(1f);
        ll1.setEnabled(true);
        ll1.setLineColor(Color.YELLOW);
        ll1.enableDashedLine(5f, 10f, 0f);//三个参数，第一个线宽长度，第二个线段之间宽度，第三个一般为0，是个补偿
        ll1.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);//标签位置
        ll1.setTextSize(10f);
        chart.getAxisLeft().addLimitLine(ll1);

        //设置均值
        LimitLine ll2 = new LimitLine(7, "均值");
        ll2.setLabel("均值");
        ll2.setTextColor(Color.parseColor("#5dbcfe"));
        ll2.setLineWidth(1f);
        ll2.setEnabled(true);
        ll2.setLineColor(Color.parseColor("#5dbcfe"));
        ll2.enableDashedLine(5f, 10f, 0f);//三个参数，第一个线宽长度，第二个线段之间宽度，第三个一般为0，是个补偿
        ll2.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_BOTTOM);//标签位置
        ll2.setTextSize(10f);
        chart.getAxisLeft().addLimitLine(ll2);

---

2.添加点击显示的标签markview

chart.setMarker(new DeviceDataChartMarkView(getContext()));//自定义markview


public class DeviceDataChartMarkView extends MarkerView{
    private TextView tvContent;


    public DeviceDataChartMarkView(Context context) {
        super(context, R.layout.view_devicedata_markview);
        tvContent = (TextView) findViewById(R.id.devicedata_markview_text);
    }


    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        tvContent.setText(""+ FormatUtil.getInt(e.getY()));
        super.refreshContent(e, highlight);
    }

    @Override
    public MPPointF getOffset() {
        return new MPPointF(-(getWidth() / 2), -getHeight());
    }

}

---

3.添加点击自动居中

setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry entry, Highlight highlight) {
                centerViewToAnimated(entry.getX(), entry.getY(), YAxis.AxisDependency.RIGHT, 500);//自动居中
            }

            @Override
            public void onNothingSelected() {

            }
        });

---

4.默认放大指定倍数：

Matrix m = new Matrix();//放大x轴
        m.postScale(30f / 7f, 1f);//两个参数分别是x,y轴的缩放比例。例如：将x轴的数据放大为之前的1.5倍
        getViewPortHandler().refresh(m, this, false);//将图表动画显示之前进行缩放

---

5.barchart第一条柱形图显示不全

getXAxis().setAxisMinimum(0);//x轴最小值为0,如果设置为0，就会从0开始，出现第一条柱形图显示不全

---

6.与viewpager结合使用滑动图表手势冲突

自定义图表重写onTouchEvent捕捉手势

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                getParent().requestDisallowInterceptTouchEvent(false);//这里我们是让getParent()去请求
                startX = (int) event.getX();
                startY = (int) event.getY();

               int per =  getWidth()/4;

                if(startX<per||startX>(getWidth()-per)){//两边范围内运行切换上下页
                    getParent().requestDisallowInterceptTouchEvent(false);
                }else{
                    getParent().requestDisallowInterceptTouchEvent(true);
                }

                break;
            case MotionEvent.ACTION_MOVE:

                break;
            case MotionEvent.ACTION_UP:
                getParent().requestDisallowInterceptTouchEvent(false);
                break;
        }
        return super.onTouchEvent(event);
    }

---

7.x轴每条数据区会显示多个数值

getXAxis().setGranularityEnabled(false);
  getXAxis().setGranularity(1f);//显示一个值

---

8.x轴文字偏移底部距离：

setExtraBottomOffset(10);//底部偏移量

9.x轴文字不居中，会有偏移

getXAxis().setCenterAxisLabels(false);//如果设置了true，会居中在直方图中间，看起来文字是不居中的

10.代码选中高亮

mBardChart.highlightValue(position,0);//选中高亮,position:x的下标位置

11.设置轴上显示文字

chart.getAxisLeft().setValueFormatter(new IAxisValueFormatter() {//设置y轴显示文字
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {

                return null;
            }
        });
        chart.getXAxis().setValueFormatter(new IAxisValueFormatter() {//设置x轴显示文字
            @Override
            public String getFormattedValue(float v, AxisBase axisBase) {
                return null;
            }
        });

12.添加图表内容区域与四周边界偏移量

chart.setExtraRightOffset(20);//添加右边偏移量，不然会看不见今天两个字

13.个数少，显示间隔太大

通过添加最大值限制

chart.getXAxis().setAxisMaximum(7);

14.x轴最右边数值或者文字被遮挡或者不现实

设置最大值为显示个数小一点，比如小0.2:

chart.getXAxis().setAxisMaximum(count-0.2f);
 chart.getAxisLeft().setAxisMinimum(0f);