MPAndroidChart的简单使用以及心得

2018-10-12 本文已影响4992人蜡笔小青新

1.MPAndroidChart简介

Github:https://github.com/PhilJay/MPAndroidChart
A powerful Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, dragging and animations.
Chart动画.gif

2.MPAndroidChart之折线图（LineChart）

1.效果图

折线图.png

2. 基本组成元素

x轴（最大/最小值颜色高宽等）
Y轴（最大/最小值颜色高宽等）
不及格线（位置颜色高宽等）
优秀线（位置颜色高宽等）
下标文字（年度总结报告）
区域颜色（黄色）
数据（x,y）

3.基本实现

xml文件

<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/mLineChar"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

折线图展示java代码
基本设置

mLineChar = (LineChart) findViewById(R.id.mLineChar);
        //设置手势滑动事件
        mLineChar.setOnChartGestureListener(this);
        //设置数值选择监听
        mLineChar.setOnChartValueSelectedListener(this);
        //后台绘制
        mLineChar.setDrawGridBackground(false);
        //设置描述文本
        mLineChar.getDescription().setEnabled(false);
        //设置支持触控手势
        mLineChar.setTouchEnabled(true);
        //设置缩放
        mLineChar.setDragEnabled(true);
        //设置推动
        mLineChar.setScaleEnabled(true);
        //如果禁用,扩展可以在x轴和y轴分别完成
        mLineChar.setPinchZoom(true);

填充数据

 //这里我模拟一些数据
        ArrayList<Entry> values = new ArrayList<Entry>();
        values.add(new Entry(5, 50));
        values.add(new Entry(10, 66));
        values.add(new Entry(15, 120));
        values.add(new Entry(20, 30));
        values.add(new Entry(35, 10));
        values.add(new Entry(40, 110));
        values.add(new Entry(45, 30));
        values.add(new Entry(50, 160));
        values.add(new Entry(100, 30));

        //设置数据
        setData(values);
        //默认动画
        mLineChar.animateX(2500);
        //刷新
        mChart.invalidate();
        // 得到这个文字
        Legend l = mLineChar.getLegend();
        // 修改文字 ...
        l.setForm(Legend.LegendForm.LINE);
        //传递数据集
    private void setData(ArrayList<Entry> values) {
        if (mLineChar.getData() != null && mLineChar.getData().getDataSetCount() > 0) {
            set1 = (LineDataSet) mLineChar.getData().getDataSetByIndex(0);
            set1.setValues(values);
            mLineChar.getData().notifyDataChanged();
            mLineChar.notifyDataSetChanged();
        } else {
            // 创建一个数据集,并给它一个类型
            set1 = new LineDataSet(values, "年度总结报告");

            // 在这里设置线
            set1.enableDashedLine(10f, 5f, 0f);
            set1.enableDashedHighlightLine(10f, 5f, 0f);
            set1.setColor(Color.BLACK);
            set1.setCircleColor(Color.BLACK);
            set1.setLineWidth(1f);
            set1.setCircleRadius(3f);
            set1.setDrawCircleHole(false);
            set1.setValueTextSize(9f);
            set1.setDrawFilled(true);
            set1.setFormLineWidth(1f);
            set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f));
            set1.setFormSize(15.f);

            if (Utils.getSDKInt() >= 18) {
                // 填充背景只支持18以上
                //Drawable drawable = ContextCompat.getDrawable(this, R.mipmap.ic_launcher);
                //set1.setFillDrawable(drawable);
                set1.setFillColor(Color.YELLOW);
            } else {
                set1.setFillColor(Color.BLACK);
            }
            ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
            //添加数据集
            dataSets.add(set1);

            //创建一个数据集的数据对象
            LineData data = new LineData(dataSets);

            //谁知数据
            mLineChar.setData(data);
        }
    }

折线图效果
1.是否填充

List<ILineDataSet> setsFilled = mLineChar.getData().getDataSets();
    for (ILineDataSet iSet : setsFilled) {
        LineDataSet set = (LineDataSet) iSet;
        if (set.isDrawFilledEnabled())
            set.setDrawFilled(false);
        else
            set.setDrawFilled(true);
    }
    mLineChar.invalidate();

是否填充.gif

2.立方切换

List<ILineDataSet> setsCubic = mLineChar.getData().getDataSets();
    for (ILineDataSet iSet : setsCubic) {
        LineDataSet set = (LineDataSet) iSet;
        set.setMode(set.getMode() == LineDataSet.Mode.CUBIC_BEZIER
                ? LineDataSet.Mode.LINEAR
                : LineDataSet.Mode.CUBIC_BEZIER);
    }
    mLineChar.invalidate();

立方切换.gif

3.MPAndroidChart之条形图线图（BarChart）

1.效果图

条形图.png

2.基本实现

xml文件

<com.github.mikephil.charting.charts.BarChart
        android:id="@+id/mBarChart"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

条形图展示代码

        //条形图
        mBarChart = (BarChart) findViewById(R.id.mBarChart);
        //设置表格上的点，被点击的时候，的回调函数
        mBarChart.setOnChartValueSelectedListener(this);
        mBarChart.setDrawBarShadow(false);
        mBarChart.setDrawValueAboveBar(true);
        mBarChart.getDescription().setEnabled(false);
        // 如果60多个条目显示在图表,drawn没有值
        mBarChart.setMaxVisibleValueCount(60);
        // 扩展现在只能分别在x轴和y轴
        mBarChart.setPinchZoom(false);
        //是否显示表格颜色
        mBarChart.setDrawGridBackground(false);
        XAxis xAxis = mBarChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawGridLines(false);
        // 只有1天的时间间隔
        xAxis.setGranularity(1f);
        xAxis.setLabelCount(7);
        xAxis.setAxisMaximum(50f);
        xAxis.setAxisMinimum(0f);
        xAxis.setValueFormatter(xAxisFormatter);

        YAxis leftAxis = mBarChart.getAxisLeft();
        leftAxis.setLabelCount(8, false);
        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
        leftAxis.setSpaceTop(15f);
        //这个替换setStartAtZero(true)
        leftAxis.setAxisMinimum(0f);
        leftAxis.setAxisMaximum(50f);
        YAxis rightAxis = mBarChart.getAxisRight();
        rightAxis.setDrawGridLines(false);
        rightAxis.setLabelCount(8, false);
        rightAxis.setSpaceTop(15f);
        rightAxis.setAxisMinimum(0f);
        rightAxis.setAxisMaximum(50f);

    //设置数据
      private void setData(ArrayList yVals1) {
        float start = 1f;
        BarDataSet set1;
        if (mBarChart.getData() != null &&
                mBarChart.getData().getDataSetCount() > 0) {
            set1 = (BarDataSet) mBarChart.getData().getDataSetByIndex(0);
            set1.setValues(yVals1);
            mBarChart.getData().notifyDataChanged();
            mBarChart.notifyDataSetChanged();
        } else {
            set1 = new BarDataSet(yVals1, "2017年工资涨幅");
            //设置有四种颜色
            set1.setColors(ColorTemplate.MATERIAL_COLORS);
            ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
            dataSets.add(set1);
            BarData data = new BarData(dataSets);
            data.setValueTextSize(10f);
            data.setBarWidth(0.9f);
            //设置数据
            mBarChart.setData(data);
        }
    }

条形图效果展示
1.显示顶点值

  for (IDataSet set : mBarChart.getData().getDataSets()){
       set.setDrawValues(!set.isDrawValuesEnabled());
      }
  mBarChart.invalidate();

显示顶点值.gif

2.XY轴动画

mBarChart.animateXY(3000, 3000);

XY轴动画.gif

3.显示边框

for (IBarDataSet set : mBarChart.getData().getDataSets())
                    ((BarDataSet) set)
                            .setBarBorderWidth(set.getBarBorderWidth() == 1.f ? 0.f
                                    : 1.f);
                mBarChart.invalidate();

显示边框.gif

4.MPAndroidChart之饼状图（PieChart）

1.效果图

饼状图.png

2.基本实现

xml文件

<com.github.mikephil.charting.charts.PieChart
        android:id="@+id/mPieChart"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

饼状图展示代码

      //饼状图
        mPieChart = (PieChart) findViewById(R.id.mPieChart);
        mPieChart.setUsePercentValues(true);
        mPieChart.getDescription().setEnabled(false);
        mPieChart.setExtraOffsets(5, 10, 5, 5);

        mPieChart.setDragDecelerationFrictionCoef(0.95f);
        //设置中间文件
        mPieChart.setCenterText(generateCenterSpannableText());

        mPieChart.setDrawHoleEnabled(true);
        mPieChart.setHoleColor(Color.WHITE);

        mPieChart.setTransparentCircleColor(Color.WHITE);
        mPieChart.setTransparentCircleAlpha(110);

        mPieChart.setHoleRadius(58f);
        mPieChart.setTransparentCircleRadius(61f);

        mPieChart.setDrawCenterText(true);

        mPieChart.setRotationAngle(0);
        // 触摸旋转
        mPieChart.setRotationEnabled(true);
        mPieChart.setHighlightPerTapEnabled(true);

        //变化监听
        mPieChart.setOnChartValueSelectedListener(this);
        //模拟数据
        ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
        entries.add(new PieEntry(40, "优秀"));
        entries.add(new PieEntry(20, "满分"));
        entries.add(new PieEntry(30, "及格"));
        entries.add(new PieEntry(10, "不及格"));

        //设置数据
        setData(entries);
        mPieChart.animateY(1400,                     Easing.EasingOption.EaseInOutQuad);

        Legend l = mPieChart.getLegend();
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
        l.setOrientation(Legend.LegendOrientation.VERTICAL);
        l.setDrawInside(false);
        l.setXEntrySpace(7f);
        l.setYEntrySpace(0f);
        l.setYOffset(0f);

        // 输入标签样式
        mPieChart.setEntryLabelColor(Color.WHITE);
        mPieChart.setEntryLabelTextSize(12f);
        //设置数据
        private void setData(ArrayList<PieEntry> entries) {
        PieDataSet dataSet = new PieDataSet(entries, "三年级一班");
        dataSet.setSliceSpace(3f);
        dataSet.setSelectionShift(5f);

        //数据和颜色
        ArrayList<Integer> colors = new ArrayList<Integer>();
        for (int c : ColorTemplate.VORDIPLOM_COLORS)
            colors.add(c);
        for (int c : ColorTemplate.JOYFUL_COLORS)
            colors.add(c);
        for (int c : ColorTemplate.COLORFUL_COLORS)
            colors.add(c);
        for (int c : ColorTemplate.LIBERTY_COLORS)
            colors.add(c);
        for (int c : ColorTemplate.PASTEL_COLORS)
            colors.add(c);
        colors.add(ColorTemplate.getHoloBlue());
        dataSet.setColors(colors);
        PieData data = new PieData(dataSet);
        data.setValueFormatter(new PercentFormatter());
        data.setValueTextSize(11f);
        data.setValueTextColor(Color.WHITE);
        mPieChart.setData(data);
        mPieChart.highlightValues(null);
        //刷新
        mPieChart.invalidate();
    }

饼状图效果展示
1.显示百分比

      for (IDataSet<?> set : mPieChart.getData().getDataSets()){
               set.setDrawValues(!set.isDrawValuesEnabled());
      }
               mPieChart.invalidate();

显示百分比.gif

2.xy轴动画

mPieChart.animateXY(1400, 1400);

饼状图XY轴动画.gif

3.旋转动画

mPieChart.spin(1000, mPieChart.getRotationAngle(), mPieChart.getRotationAngle() + 360, Easing.EasingOption
                        .EaseInCubic);

旋转动画.gif

5.小结

1.MPAndeordChart的核心功能：

支持x，y轴缩放
支持拖拽
支持手指滑动
支持高亮显示
支持保存图表到文件中
支持从文件（txt）中读取数据
预先定义颜色模板
自动生成标注
支持自定义x，y轴的显示标签
支持x，y轴动画
支持x，y轴设置最大值和附加信息
支持自定义字体，颜色，背景，手势，虚线等

2.优势

使用于Android和IOS
样式以及动画效果基本上满足开发各类应用的图表展示
使用方便简单，API非常详细，开发快捷

3.最后附上两位大神的总结

最后感谢您的阅读，有机会一起探讨！

thanks.png

MPAndroidChart的简单使用以及心得

1.MPAndroidChart简介

2.MPAndroidChart之折线图（LineChart）

1.效果图

2. 基本组成元素

3.基本实现

3.MPAndroidChart之条形图线图（BarChart）

1.效果图

2.基本实现

4.MPAndroidChart之饼状图（PieChart）

1.效果图

2.基本实现

5.小结

1.MPAndeordChart的核心功能：

2.优势

3.最后附上两位大神的总结

最后感谢您的阅读，有机会一起探讨！

猜你喜欢

热点阅读