1. 程式人生 > >MPAndroidChart餅圖屬性及相關設定

MPAndroidChart餅圖屬性及相關設定

公司最近在做統計功能,所以用到了餅圖,在網上查了一些資料最終決定使用MPAndroidChart,使用起來非常方便,還有一些問題通過各種查詢,終於解決...廢話不多說,先看下效果圖:


佈局檔案:

 <com.github.mikephil.charting.charts.PieChart
                android:id="@+id/chart"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

java程式碼:

1、初始化餅圖

 private void initChart(){

        mChart = (PieChart) findViewById(R.id.chart);
        mChart.setUsePercentValues(true);
        mChart.setDescription("");
        mChart.setExtraOffsets(5, 10, 5, 5);
//        mChart.setDrawSliceText(false);//設定隱藏餅圖上文字,只顯示百分比
        mChart.setDrawHoleEnabled(true);
        mChart.setHoleColorTransparent(true);

        mChart.setTransparentCircleColor(getResources().getColor(R.color.buttombar_bg));
        mChart.setTransparentCircleAlpha(110);
        mChart.setOnChartValueSelectedListener(this);
        mChart.setHoleRadius(45f); //半徑
        //mChart.setHoleRadius(0)  //實心圓
        mChart.setTransparentCircleRadius(48f);// 半透明圈
        mChart.setDrawCenterText(true);//餅狀圖中間可以新增文字
        // 如果沒有資料的時候,會顯示這個,類似ListView的EmptyView
        mChart.setNoDataText(getResources().getString(R.string.no_data));
        mChart.setUsePercentValues(true);//設定顯示成比例
        SimpleDateFormat format = new SimpleDateFormat("yyyy");
        String year = format.format(since_at*1000);
        mChart.setCenterText(generateCenterSpannableText(year));
        mChart.setRotationAngle(0); // 初始旋轉角度
        // enable rotation of the chart by touch
        mChart.setRotationEnabled(true); // 可以手動旋轉
        mChart.setHighlightPerTapEnabled(true);
        mChart.animateY(1000, Easing.EasingOption.EaseInOutQuad); //設定動畫
        Legend mLegend = mChart.getLegend();  //設定比例圖
        mLegend.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);  //左下邊顯示
        mLegend.setFormSize(12f);//比例塊字型大小
        mLegend.setXEntrySpace(2f);//設定距離餅圖的距離,防止與餅圖重合
        mLegend.setYEntrySpace(2f);
        //設定比例塊換行...
        mLegend.setWordWrapEnabled(true);
        mLegend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);

        mLegend.setTextColor(getResources().getColor(R.color.alpha_80));
        mLegend.setForm(Legend.LegendForm.SQUARE);//設定比例塊形狀,預設為方塊
//        mLegend.setEnabled(false);//設定禁用比例塊
    }

2、設定餅圖資料

 /**
     * 設定餅圖的資料
     * @param names 餅圖上顯示的比例名稱
     * @param counts 百分比
     */
    private void setData(ArrayList<String> names,ArrayList<Entry> counts) {
        PieDataSet dataSet = new PieDataSet(counts, "");
        dataSet.setSliceSpace(2f);
        dataSet.setSelectionShift(5f);

        ArrayList<Integer> colors = new ArrayList<Integer>();
        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());
//        colors.add(getResources().getColor(R.color.stastic_team));
        dataSet.setColors(colors);
        //dataSet.setSelectionShift(0f);
        PieData data = new PieData(names, dataSet);
        data.setValueFormatter(new PercentFormatter());
        data.setValueTextSize(12f);
        data.setValueTextColor(getResources().getColor(R.color.whrite));
        mChart.setData(data);
        // undo all highlights
        mChart.highlightValues(null);

        mChart.invalidate();
    }


在這個過程中遇到幾個問題:

1、底部的比例塊顯示只有一行,如果資料較多的話,會超出螢幕外邊,所以需要換行顯示比例塊,設定如下:

 //設定比例塊換行...
   mLegend.setWordWrapEnabled(true);
同時需要把比例塊放到下邊或者放到上邊  <span style="font-family: Arial, Helvetica, sans-serif;"> mLegend.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);  //左下邊顯示</span>
2、餅圖上怎麼只顯示百分比,查了好多資料沒有看有人提到這個,最後在stackoverflow上找到答案。

pieChart.setDrawSliceText(false)

3、如果比例塊放在左邊或者右邊,如果字型太長,會和餅圖疊加在一起,做以下處理可以防止疊加。

    mLegend.setXEntrySpace(2f);//設定距離餅圖的距離,防止與餅圖重合
    mLegend.setYEntrySpace(2f);

 以上就是本人遇到的一些問題,在這裡和大家分享,如有問題及時交流..