1.MPAndroidChart簡(jiǎn)介

• 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動(dòng)畫.gif

2.MPAndroidChart之折線圖（LineChart）

1.效果圖

折線圖.png

2. 基本組成元素

• x軸（最大/最小值 顏色 高寬等）
• Y軸（最大/最小值 顏色 高寬等）
• 不及格線（位置 顏色 高寬等）
• 優(yōu)秀線（位置 顏色 高寬等）
• 下標(biāo)文字（年度總結(jié)報(bào)告）
• 區(qū)域顏色（黃色）
• 數(shù)據(jù)（x,y）

3.基本實(shí)現(xiàn)

• 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代碼
  基本設(shè)置

mLineChar = (LineChart) findViewById(R.id.mLineChar);
        //設(shè)置手勢(shì)滑動(dòng)事件
        mLineChar.setOnChartGestureListener(this);
        //設(shè)置數(shù)值選擇監(jiān)聽
        mLineChar.setOnChartValueSelectedListener(this);
        //后臺(tái)繪制
        mLineChar.setDrawGridBackground(false);
        //設(shè)置描述文本
        mLineChar.getDescription().setEnabled(false);
        //設(shè)置支持觸控手勢(shì)
        mLineChar.setTouchEnabled(true);
        //設(shè)置縮放
        mLineChar.setDragEnabled(true);
        //設(shè)置推動(dòng)
        mLineChar.setScaleEnabled(true);
        //如果禁用,擴(kuò)展可以在x軸和y軸分別完成
        mLineChar.setPinchZoom(true);

填充數(shù)據(jù)

 //這里我模擬一些數(shù)據(jù)
        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));

        //設(shè)置數(shù)據(jù)
        setData(values);
        //默認(rèn)動(dòng)畫
        mLineChar.animateX(2500);
        //刷新
        mChart.invalidate();
        // 得到這個(gè)文字
        Legend l = mLineChar.getLegend();
        // 修改文字 ...
        l.setForm(Legend.LegendForm.LINE);
        //傳遞數(shù)據(jù)集
    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 {
            // 創(chuàng)建一個(gè)數(shù)據(jù)集,并給它一個(gè)類型
            set1 = new LineDataSet(values, "年度總結(jié)報(bào)告");

            // 在這里設(shè)置線
            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>();
            //添加數(shù)據(jù)集
            dataSets.add(set1);

            //創(chuàng)建一個(gè)數(shù)據(jù)集的數(shù)據(jù)對(duì)象
            LineData data = new LineData(dataSets);

            //誰(shuí)知數(shù)據(jù)
            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.基本實(shí)現(xiàn)

• 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);
        //設(shè)置表格上的點(diǎn)索绪，被點(diǎn)擊的時(shí)候鹤啡，的回調(diào)函數(shù)
        mBarChart.setOnChartValueSelectedListener(this);
        mBarChart.setDrawBarShadow(false);
        mBarChart.setDrawValueAboveBar(true);
        mBarChart.getDescription().setEnabled(false);
        // 如果60多個(gè)條目顯示在圖表,drawn沒(méi)有值
        mBarChart.setMaxVisibleValueCount(60);
        // 擴(kuò)展現(xiàn)在只能分別在x軸和y軸
        mBarChart.setPinchZoom(false);
        //是否顯示表格顏色
        mBarChart.setDrawGridBackground(false);
        XAxis xAxis = mBarChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawGridLines(false);
        // 只有1天的時(shí)間間隔
        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);
        //這個(gè)替換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);

    //設(shè)置數(shù)據(jù)
      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年工資漲幅");
            //設(shè)置有四種顏色
            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);
            //設(shè)置數(shù)據(jù)
            mBarChart.setData(data);
        }
    }

• 條形圖效果展示
  1.顯示頂點(diǎn)值

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

顯示頂點(diǎn)值.gif

2.XY軸動(dòng)畫

mBarChart.animateXY(3000, 3000);

XY軸動(dòng)畫.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.基本實(shí)現(xiàn)

• 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);
        //設(shè)置中間文件
        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);
        // 觸摸旋轉(zhuǎn)
        mPieChart.setRotationEnabled(true);
        mPieChart.setHighlightPerTapEnabled(true);

        //變化監(jiān)聽
        mPieChart.setOnChartValueSelectedListener(this);
        //模擬數(shù)據(jù)
        ArrayList<PieEntry> entries = new ArrayList<PieEntry>();
        entries.add(new PieEntry(40, "優(yōu)秀"));
        entries.add(new PieEntry(20, "滿分"));
        entries.add(new PieEntry(30, "及格"));
        entries.add(new PieEntry(10, "不及格"));

        //設(shè)置數(shù)據(jù)
        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);

        // 輸入標(biāo)簽樣式
        mPieChart.setEntryLabelColor(Color.WHITE);
        mPieChart.setEntryLabelTextSize(12f);
        //設(shè)置數(shù)據(jù)
        private void setData(ArrayList<PieEntry> entries) {
        PieDataSet dataSet = new PieDataSet(entries, "三年級(jí)一班");
        dataSet.setSliceSpace(3f);
        dataSet.setSelectionShift(5f);

        //數(shù)據(jù)和顏色
        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軸動(dòng)畫

mPieChart.animateXY(1400, 1400);

餅狀圖XY軸動(dòng)畫.gif

3.旋轉(zhuǎn)動(dòng)畫

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

旋轉(zhuǎn)動(dòng)畫.gif

5.小結(jié)

1.MPAndeordChart的核心功能：

• 支持x，y軸縮放
• 支持拖拽
• 支持手指滑動(dòng)
• 支持高亮顯示
• 支持保存圖表到文件中
• 支持從文件（txt）中讀取數(shù)據(jù)
• 預(yù)先定義顏色模板
• 自動(dòng)生成標(biāo)注
• 支持自定義x，y軸的顯示標(biāo)簽
• 支持x，y軸動(dòng)畫
• 支持x，y軸設(shè)置最大值和附加信息
• 支持自定義字體琐旁，顏色，背景猜绣，手勢(shì)灰殴，虛線等

2.優(yōu)勢(shì)

• 使用于Android和IOS
• 樣式以及動(dòng)畫效果基本上滿足開發(fā)各類應(yīng)用的圖表展示
• 使用方便簡(jiǎn)單，API非常詳細(xì)途事，開發(fā)快捷

3.最后附上兩位大神的總結(jié)

• https://blog.csdn.net/column/details/13579.html
• https://blog.csdn.net/u014136472/article/details/50273309

最后感謝您的閱讀验懊，有機(jī)會(huì)一起探討！

thanks.png