您的位置:首页 > 其它

饼状图(PieChart)与柱形图(BarChart)的使用

2016-06-16 17:21 465 查看
最近在工作中需要用到饼状图的功能,网上查了一下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));

b8ac
//设置标签在柱形图的哪个位置
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);
}


柱形图更多属性设置查看地址http://www.ithao123.cn/content-10519924.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息