开源图表库MPAndroidChart之饼状图和柱状图

MPAndroidChart是一款基于Android的开源图表库,MPAndroidChart不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,应用起来非常灵活。MPAndroidChart同样拥有常用的图表类型:线型图、饼图、柱状图和散点图。

MPAndroidChartGitHub地址
各个版本mpandroidchartlibrary.jar包下载


1、导入 mpandroidchartlibrary-2-0-8.jar
2、定义XML文件
activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/spread_pie_chart"
        android:layout_width="wrap_content"
        android:layout_height="320dp"
        android:layout_gravity="center_horizontal"
         />
    <Button
        android:id="@+id/bt_to_bar_chart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ToBarChart"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

activity_main2.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Main2Activity" >

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/spread_bar_chart"
        android:layout_width="wrap_content"
        android:layout_height="320dp"
        android:layout_gravity="center_horizontal" />
</RelativeLayout>

3.主要Java逻辑代码如下
饼状图
MainActivity.java

import java.util.ArrayList;
import android.app.Activity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.Legend.LegendPosition;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import com.github.mikephil.charting.utils.PercentFormatter;

public class MainActivity extends Activity {

    private PieChart mChart;

    private Button toBarChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toBarChart = (Button) findViewById(R.id.bt_to_bar_chart);
        toBarChart.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this,Main2Activity.class);
                startActivity(intent);
            }
        });
        mChart = (PieChart) findViewById(R.id.spread_pie_chart);

        PieData mPieData = getPieData(4, 100);
        showChart(mChart, mPieData);
    }

    private void showChart(PieChart pieChart, PieData pieData) {
         pieChart.setHoleColorTransparent(true);

        //pieChart.setHoleRadius(40f); // 半径
        pieChart.setTransparentCircleRadius(0f); // 半透明圈
         pieChart.setHoleRadius(0); //实心圆

        pieChart.setDescription("测试饼状图");

        // mChart.setDrawYValues(true);
        pieChart.setDrawCenterText(false); // 饼状图中间可以添加文字

        pieChart.setDrawHoleEnabled(true);

        pieChart.setRotationAngle(90); // 初始旋转角度

        // draws the corresponding description value into the slice
        // mChart.setDrawXValues(true);

        // enable rotation of the chart by touch
        pieChart.setRotationEnabled(false); // 可以手动旋转

        // display percentage values
        pieChart.setUsePercentValues(true); // 显示成百分比
        // mChart.setUnit(" €");
        // mChart.setDrawUnitsInChart(true);

        // add a selection listener
        // mChart.setOnChartValueSelectedListener(this);
        // mChart.setTouchEnabled(false);

        // mChart.setOnAnimationListener(this);

        //pieChart.setCenterText("Quarterly Revenue"); // 饼状图中间的文字

        // 设置数据
        pieChart.setData(pieData);

        // undo all highlights
        // pieChart.highlightValues(null);
        // pieChart.invalidate();

        Legend mLegend = pieChart.getLegend(); // 设置比例图
        mLegend.setPosition(LegendPosition.RIGHT_OF_CHART_CENTER); // 最右边显示
        // mLegend.setForm(LegendForm.LINE); //设置比例图的形状,默认是方形
        mLegend.setXEntrySpace(7f);
        mLegend.setYEntrySpace(5f);

        pieChart.animateXY(1000, 1000); // 设置动画
        // mChart.spin(2000, 0, 360);
    }

    /**
     * 
     * @param count
     *            分成几部分
     * @param range
     */
    private PieData getPieData(int count, float range) {

        ArrayList<String> xValues = new ArrayList<String>(); // xVals用来表示每个饼块上的内容

        for (int i = 0; i < count; i++) {
            xValues.add("Quarterly" + (i + 1)); // 饼块上显示成Quarterly1, Quarterly2,
                                                // Quarterly3, Quarterly4
        }

        ArrayList<Entry> yValues = new ArrayList<Entry>(); // yVals用来表示封装每个饼块的实际数据

        // 饼图数据
        /**
         * 将一个饼形图分成四部分, 四部分的数值比例为14:14:34:38 所以 14代表的百分比就是14%
         */
        float quarterly1 = 100;
        float quarterly2 = 20;
        float quarterly3 = 66;
        float quarterly4 = 98;

        yValues.add(new Entry(quarterly1, 0));
        yValues.add(new Entry(quarterly2, 1));
        yValues.add(new Entry(quarterly3, 2));
        yValues.add(new Entry(quarterly4, 3));

        // y轴的集合
        PieDataSet pieDataSet = new PieDataSet(yValues,
                ""/* 显示在比例图上 */);
        pieDataSet.setSliceSpace(2f); // 设置个饼状图之间的距离

        ArrayList<Integer> colors = new ArrayList<Integer>();

        // 饼图颜色
        colors.add(Color.rgb(205, 205, 205));
        colors.add(Color.rgb(114, 188, 223));
        colors.add(Color.rgb(255, 123, 124));
        colors.add(Color.rgb(57, 135, 200));

        //pieDataSet.setColors(colors);
        pieDataSet.setColors(ColorTemplate.VORDIPLOM_COLORS);
        DisplayMetrics metrics = getResources().getDisplayMetrics();
        float px = 5 * (metrics.densityDpi / 160f);
        pieDataSet.setSelectionShift(px); // 选中态多出的长度

        PieData pieData = new PieData(xValues, pieDataSet);
        pieData.setValueFormatter(new PercentFormatter());//显示百分比
        pieData.setValueTextSize(10f);//饼状图上字体大小
        return pieData;
    }

}

柱状图
Main2Activity.java


import java.util.ArrayList;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.components.Legend.LegendForm;
import com.github.mikephil.charting.components.Legend.LegendPosition;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.XAxis.XAxisPosition;
import com.github.mikephil.charting.components.YAxis.YAxisLabelPosition;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
import com.github.mikephil.charting.utils.ValueFormatter;


public class Main2Activity extends Activity {

    private BarChart mBarChart;
    private BarData mBarData;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        mBarChart = (BarChart) findViewById(R.id.spread_bar_chart);
        mBarData = getBarData(4, 100);
        showBarChart(mBarChart, mBarData);
    }

    private void showBarChart(BarChart barChart, BarData barData) {
        barChart.setDrawBorders(false); // //是否添加边框

        barChart.setDescription("");// 数据描述

        // 如果没有数据的时候,会显示这个,类似ListView的EmptyView
        barChart.setNoDataTextDescription("You need to provide data for the chart.");

        barChart.setDrawGridBackground(false); // 是否显示表格颜色
        barChart.setGridBackgroundColor(Color.WHITE & 0x70FFFFFF); // 表格的的颜色,在这里是是给颜色设置一个透明度

        barChart.setTouchEnabled(true); // 设置是否可以触摸

        barChart.setDragEnabled(false);// 是否可以拖拽
        barChart.setScaleEnabled(false);// 是否可以缩放

        barChart.setPinchZoom(false);//

        // barChart.setBackgroundColor();// 设置背景

        barChart.setDrawBarShadow(false);

        barChart.setData(barData); // 设置数据

        Legend mLegend = barChart.getLegend(); // 设置比例图标示

        mLegend.setForm(LegendForm.CIRCLE);// 样式
        mLegend.setFormSize(6f);// 字体
        mLegend.setTextColor(Color.BLACK);// 颜色
        mLegend.setPosition(LegendPosition.BELOW_CHART_CENTER);
        // X轴设定
        XAxis xAxis = barChart.getXAxis();
        xAxis.setPosition(XAxisPosition.BOTTOM);
          YAxis leftAxis = barChart.getAxisLeft();
           // leftAxis.setTypeface(mTf);
         //   leftAxis.setLabelCount(8);
         //   leftAxis.setValueFormatter(custom);
            leftAxis.setPosition(YAxisLabelPosition.OUTSIDE_CHART);


            YAxis rightAxis = barChart.getAxisRight();
            rightAxis.setDrawGridLines(false);
           // rightAxis.setTypeface(mTf);
           // rightAxis.setLabelCount(8);
           // rightAxis.setValueFormatter(custom);
            rightAxis.setEnabled(false);//设置不可见
        barChart.animateX(2500); // 立即执行的动画,x轴
    }

    private BarData getBarData(int count, float range) {
        ArrayList<String> xValues = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            xValues.add("第" + (i + 1) + "季度");
        }

        ArrayList<BarEntry> yValues = new ArrayList<BarEntry>();

        for (int i = 0; i < count; i++) {
            float value = (float) (Math.random() * range/* 100以内的随机数 */) + 3;
            yValues.add(new BarEntry(value, i));
        }

        // y轴的数据集合
        BarDataSet barDataSet = new BarDataSet(yValues, "测试饼状图");
        // 单色
        // barDataSet.setColor(Color.rgb(114, 188, 223));
        // 多色

        barDataSet.setColors(ColorTemplate.VORDIPLOM_COLORS);
        ArrayList<BarDataSet> barDataSets = new ArrayList<BarDataSet>();
        barDataSets.add(barDataSet);

        // add the datasets

        BarData barData = new BarData(xValues, barDataSets);
        // barData.setValueTypeface(mTf);

        return barData;
    }
}

4.效果图

饼状图

柱状图
5.存在问题

如下图:

问题饼状图

如果有哪位大神知道解决方案,请告知,不甚感谢。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值