饼状图（PieChart）与柱形图（BarChart）的使用

最新推荐文章于 2024-08-02 14:01:20 发布

跑快点

最新推荐文章于 2024-08-02 14:01:20 发布

阅读量1.6w

点赞数 1

分类专栏：学习笔记文章标签： PieChart 饼状图图表柱状图 BarChart

本文链接：https://blog.csdn.net/qidingquan/article/details/51693371

版权

学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

最近在工作中需要用到饼状图的功能，网上查了一下MPAndroidChart开源图表库是一个很好的东西，并下载了MPAndroidChart项目运行。于是自己写了一个简单的例子，使用PieChart（饼图）的方法如下：
源码下载地址：https://github.com/PhilJay/MPAndroidChart
（一）将其导入到工程中（更多方法在github中有介绍）
这里我使用的是Android Studio,只需在Module中的build.grade文件中添加如下代码

repositories {
    maven { url "https://jitpack.io" }
}

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v2.2.5'
}

添加后编译成功即可使用
（二）在要使用的布局文件中添加PieChart

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

        </com.github.mikephil.charting.charts.PieChart>

（三）在代码中使用PieChart

 private void initChart() {
        // 设置饼图是否接收点击事件，默认为true
        pieChart.setTouchEnabled(true);
        //设置饼图是否使用百分比
        pieChart.setUsePercentValues(true);
        //设置饼图右下角的文字描述
        pieChart.setDescription("测试");
        //设置饼图右下角的文字大小
        pieChart.setDescriptionTextSize(16);

        //是否显示圆盘中间文字，默认显示
        pieChart.setDrawCenterText(true);
        //设置圆盘中间文字
        pieChart.setCenterText("我在中间");
        //设置圆盘中间文字的大小
        pieChart.setCenterTextSize(20);
        //设置圆盘中间文字的颜色
        pieChart.setCenterTextColor(Color.WHITE);
        //设置圆盘中间文字的字体
        pieChart.setCenterTextTypeface(Typeface.DEFAULT);

        //设置中间圆盘的颜色
        pieChart.setHoleColor(Color.GREEN);
        //设置中间圆盘的半径,值为所占饼图的百分比
        pieChart.setHoleRadius(20);

        //设置中间透明圈的半径,值为所占饼图的百分比
        pieChart.setTransparentCircleRadius(40);

        //是否显示饼图中间空白区域，默认显示
        pieChart.setDrawHoleEnabled(true);
        //设置圆盘是否转动，默认转动
        pieChart.setRotationEnabled(true);
        //设置初始旋转角度
        pieChart.setRotationAngle(0);

        //设置比例图
        Legend mLegend = pieChart.getLegend();
        //设置比例图显示在饼图的哪个位置
        mLegend.setPosition(Legend.LegendPosition.RIGHT_OF_CHART);
        //设置比例图的形状，默认是方形,可为方形、圆形、线性
        mLegend.setForm(Legend.LegendForm.CIRCLE);
//        mLegend.setXEntrySpace(7f);
//        mLegend.setYEntrySpace(5f);

        //设置X轴动画
        pieChart.animateX(1800);
//        //设置y轴动画
//        pieChart.animateY(1800);
//        //设置xy轴一起的动画
//        pieChart.animateXY(1800, 1800);

        //绑定数据
        bindData(3);

        // 设置一个选中区域监听
        pieChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
                Toast.makeText(MainActivity.this,dataSetIndex+""+e.toString(),Toast.LENGTH_SHORT).show();
            }
            @Override
            public void onNothingSelected() {
            }
        });
    }

    /**
     *
     * @param count 分成几部分
     */
    private void bindData(int count) {
        /**
         * nameList用来表示每个饼块上的文字内容
         * 如：部分一，部分二，部分三
         */
        ArrayList<String> nameList = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            nameList.add("部分" + (i + 1));
        }
        /**
         * valueList将一个饼形图分成三部分，各个区域的百分比的值
         * Entry构造函数中
         * 第一个值代表所占比例，
         * 第二个值代表区域位置
         * （可以有第三个参数，表示携带的数据object）这里没用到
         */
        ArrayList<Entry> valueList = new ArrayList<Entry>();
        valueList.add(new Entry(20, 0));
        valueList.add(new Entry(30, 1));
        valueList.add(new Entry(50, 2));

        //显示在比例图上
        PieDataSet dataSet = new PieDataSet(valueList, "不同颜色代表的含义");
        //设置个饼状图之间的距离
        dataSet.setSliceSpace(3f);
        // 部分区域被选中时多出的长度
        dataSet.setSelectionShift(5f);

        // 设置饼图各个区域颜色
        ArrayList<Integer> colors = new ArrayList<Integer>();
        colors.add(Color.RED);
        colors.add(Color.GREEN);
        colors.add(Color.BLUE);
        dataSet.setColors(colors);

        PieData data = new PieData(nameList, dataSet);
        //设置以百分比显示
        data.setValueFormatter(new PercentFormatter());
        //区域文字的大小
        data.setValueTextSize(11f);
        //设置区域文字的颜色
        data.setValueTextColor(Color.WHITE);
        //设置区域文字的字体
        data.setValueTypeface(Typeface.DEFAULT);

        pieChart.setData(data);

        //设置是否显示区域文字内容
        pieChart.setDrawSliceText(pieChart.isDrawSliceTextEnabled());
        //设置是否显示区域百分比的值
        for (IDataSet<?> set : pieChart.getData().getDataSets()){
            set.setDrawValues(!set.isDrawValuesEnabled());
        }
        // undo all highlights
        pieChart.highlightValues(null);
        pieChart.invalidate();
    }

柱形图使用：

 private void initBarChart() {
        //设置矩形阴影是否显示
        barChart.setDrawBarShadow(false);
        //设置值是否在矩形的上方显示
        barChart.setDrawValueAboveBar(true);
        //设置右下角描述
        barChart.setDescription("测试");
        //没用数据时显示
        barChart.setNoDataText("没有数据");
        // if more than 60 entries are displayed in the chart, no values will be
        // drawn
        barChart.setMaxVisibleValueCount(60);

        // 设置是否可以触摸
        barChart.setTouchEnabled(true);
        // 是否可以拖拽
        barChart.setDragEnabled(true);
        // 是否可以缩放
        barChart.setScaleEnabled(true);
         // 集双指缩放
        barChart.setPinchZoom(false);
        // 设置是否显示表格颜色,矩形之间的空隙
        barChart.setDrawGridBackground(false);
        // 设置表格的的颜色，矩形之间的空隙颜色
        barChart.setGridBackgroundColor(Color.GRAY);

        //设置比例显示
        Legend l = barChart.getLegend();
        //设置比例显示在柱形图哪个位置
        l.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);
        //设置比例显示形状，方形，圆形，线性
        l.setForm(Legend.LegendForm.SQUARE);
        //设置比例显示形状的大小
        l.setFormSize(15f);
        //设置比例显示文字的大小
        l.setTextSize(15f);
        l.setXEntrySpace(4f);

        //设置X轴方向上的属性
        XAxis xAxis = barChart.getXAxis();
        //设置标签显示在柱形图的上方还是下方
        xAxis.setPosition(XAxis.XAxisPosition.TOP);
        xAxis.setTypeface(Typeface.DEFAULT);
        //设置是否绘制表格
        xAxis.setDrawGridLines(false);
        //设置x标签的间隙
        xAxis.setSpaceBetweenLabels(2);

        //设置柱形图左边y轴方向上的属性
        YAxis leftAxis = barChart.getAxisLeft();
        leftAxis.setTypeface(Typeface.DEFAULT);
        //设置y轴上的标签数,boolean值为true代表必须8个
        leftAxis.setLabelCount(8, false);
        leftAxis.setValueFormatter(new DefaultYAxisValueFormatter(0));
        //设置标签在柱形图的哪个位置
        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
        //设置y轴标签之间的间距
        leftAxis.setSpaceTop(15f);
        leftAxis.setAxisMinValue(0f); // this replaces setStartAtZero(true)

        //设置柱形图右边y轴方向上的属性,属性含义与上面相同
        YAxis rightAxis = barChart.getAxisRight();
        rightAxis.setDrawGridLines(false);
        rightAxis.setTypeface(Typeface.DEFAULT);
        rightAxis.setLabelCount(5, true);
        rightAxis.setValueFormatter(new DefaultYAxisValueFormatter(0));
        rightAxis.setSpaceTop(15f);
        rightAxis.setAxisMinValue(0f); // this replaces setStartAtZero(true)

        // 隐藏右边的坐标轴
//        barChart.getAxisRight().setEnabled(false);
        // 隐藏左边的坐标轴(同上)
//        barChart.getAxisLeft().setEnabled(false);
        setData(15);

    }

/**
     * 绑定数据
     * @param count x轴上的标签数
     */
    private void setData(int count) {
        //设置x轴方向上的标签数据
        ArrayList<String> xVals = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            xVals.add(i+"");
        }
        //设置每个矩形在y轴上的值
        ArrayList<BarEntry> yVals1 = new ArrayList<BarEntry>();
        for (int i = 0; i < count; i++) {
            yVals1.add(new BarEntry(20*i, i));
        }

        //第一个参数是各个矩形在y轴方向上的值得集合，第二个参数为比例的文字说明
        BarDataSet set1 = new BarDataSet(yVals1, "不同颜色代表不同的值");
        //设置矩形之间的间距，参数为百分数，可控制矩形的宽度
        set1.setBarSpacePercent(10f);
        //设置矩形的颜色
        int colors[]={0xffff0000,0xff00ff00,0xff0000ff};
        set1.setColors(colors);

        ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
        dataSets.add(set1);
        //设置柱形图的数据
        BarData data = new BarData(xVals, dataSets);
        data.setValueTextSize(10f);
        data.setValueTypeface(Typeface.DEFAULT);

        barChart.setData(data);
    }