安卓图形之MPAndroidChart3.0详解三——柱状图（一）（属性篇）
文章目录
- 1 前言
- 2 基本使用
- 3 属性介绍
- 3.1 Legend（图例），Description（描述/标题）
- 3.2 XAxis属性
- 3.3 YAxis属性
- 3.4 BarDataSet属性
- 3.5 BarChart属性和BarData属性
- BarChart属性
- BarData属性
1 前言
MPAndroidCHart中柱状图的使用与与折线图的使用大致相同，也是通过设置Legend，Description，XAxis，YAxis，BarDataset，BarSet和BarChart来达到我们想要的属性。本篇文章只是介绍了MPAndroidChart中柱状图最基本的做法，当然还有很多更其他用法，如多柱图，正负柱状图，堆叠柱状图等，想要了解的读者请转到：安卓图形之MPAndroidChart3.0详解三——柱状图（一）（案例篇）
2 基本使用
下面的这个demo仅仅只是演示了MPAndroidCahrt中柱状图最基本的使用，就只是简单的填充了数据，都是默认的样式
效果图
代码如下
public class Bar_Frag extends Fragment {
private BarChart bc;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.bar_frag,null);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
bc = view.findViewById(R.id.bc);
loadData();
}
private void loadData() {
List<BarEntry> barEntries = new ArrayList<BarEntry>();
barEntries.add(new BarEntry(0,5));
barEntries.add(new BarEntry(1,10));
barEntries.add(new BarEntry(2,13));
BarDataSet barDataSet = new BarDataSet(barEntries,"图例标题");
BarData ba = new BarData(barDataSet);
bc.setData(ba);
}
}
下面将一一介绍BarChart的属性
3 属性介绍
BarCahrt大致可分为下面的6个部分
- Legend(图例)
- Description（描述/标题）
- YAxis（Y轴）
- XAxis（X轴）
- BarDataSet
- BarChart
3.1 Legend（图例），Description（描述/标题）
柱状图的Legend和Description的属性和饼状图的Legend和Description属性都是相同的，这里不做过多的描述，需要参考的读者可以点击：安卓图形之MPAndroidChart3.0详解二——饼状图，直接看效果：
代码如下
public class Bar_Frag extends Fragment {
private BarChart bc;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.bar_frag,null);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
bc = view.findViewById(R.id.bc);
setLegend();
setDesc();
loadData();
}
private void setLegend() {
//得到Legend对象
Legend legend = bc.getLegend();
//设置字体大小
legend.setTextSize(18f);
//设置排列方式
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
//设置图例的大小
legend.setFormSize(15f);
}
public void setDesc(){
//得到Description对象
Description description = bc.getDescription();
//设置文字
description.setText("这是柱状图的标题");
//设置文字大小
description.setTextSize(18f);
//设置偏移量
// 获取屏幕中间x 轴的像素坐标
WindowManager wm=(WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
float x = dm.widthPixels / 2;
description.setPosition(x,50);
//设置字体颜色
description.setTextColor(Color.BLUE);
//设置字体加粗
description.setTypeface(Typeface.DEFAULT_BOLD);
}
private void loadData() {
//为了看到更明显的效果，我这里设置了图形在上下左右四个方向上的偏移量
bc.setExtraTopOffset(25);
bc.setExtraLeftOffset(30);
bc.setExtraRightOffset(100);
bc.setExtraBottomOffset(50);
List<BarEntry> barEntries = new ArrayList<BarEntry>();
barEntries.add(new BarEntry(0,5));
barEntries.add(new BarEntry(1,10));
barEntries.add(new BarEntry(2,13));
BarDataSet barDataSet = new BarDataSet(barEntries,"标题一");
BarData ba = new BarData(barDataSet);
bc.setData(ba);
}
}
3.2 XAxis属性
XAxis可以理解为x轴。
相关属性
| 属性 | 注解 |
|---|---|
| setPosition() | 设置x轴是显示在顶部还是底部，XAxisPosition枚举值 ，可取值：TOP(默认值)：位于上方，TOP_INSIDE：位于上方并绘制在图形内部，BOTTOM：位于下方，BOTTOM_INSIDE：位于下方并绘制在图形内部，BOTH_SIDED：上下两边都显示轴 |
| setLabelRotationAngle() | 设置文字旋转的角度 |
| setAxisMinimum() | 设置最小值，可通过该属性设置与左边的距离 |
| setAxisMinimum() | 设置最大值 |
| setLabelCount() | 设置在x轴绘制标签的数量 |
| setAxisLineColor() | 设置靠近x轴第一条线的颜色 |
| setAxisLineWidth() | 设置绘制靠近x轴的第一条线的宽度 |
| setDrawAxisLine() | 是否绘制靠近x轴的第一条线，不受setDrawGridLines属性影响 |
| setDrawGridLines() | 是否绘制竖向的网格线 |
| setGridColor() | 设置竖向网格线的颜色 |
| setGridLineWidth() | 设置竖向网格线的宽度 |
| setValueFormatter() | 自定义格式，通过继承IAxisValueFormatter接口实现 |
| setXOffset() | 设置x轴在x方向上的偏移量 |
| setYOffset() | 设置x轴在y方向上的偏移量 |
| setTextSize() | 设置x轴字体大小 |
| setTextColor() | 设置x轴字体颜色 |
| setCenterAxisLabels() | 是否将x轴上的文字居中显示 |
| setDrawLabels() | /是否绘制x轴上的标签 |
| setGranularity() | 设置间隔 |
| setGranularityEnabled() | 是否启用间隔 |
| setEnabled() | 是否绘制x轴 |
效果图如下
设置xAxis的代码如下
//该方法在OnCreate中直接调用即可，后面会给出完整代码
private void setXAxis() {
//得到xAxis对象
XAxis xAxis = bc.getXAxis();
//设置x轴是显示在顶部还是底部，柱状图内还是外
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//设置文字旋转的角度
xAxis.setLabelRotationAngle(60);
//设置最小值，可通过该属性设置与左边的距离
xAxis.setAxisMinimum(-0.5f);
//设置最大值
xAxis.setAxisMaximum(2.5f);
xAxis.setLabelCount(3);
//设置靠近x轴第一条线的颜色
xAxis.setAxisLineColor(Color.RED);
//设置绘制靠近x轴的第一条线的宽度
xAxis.setAxisLineWidth(3f);
//是否绘制横向的网格
xAxis.setDrawGridLines(false);
//自定义格式
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
int tep = (int) (value + 1);
return "第" + tep + "月份";
}
});
//设置x轴在y方向上的偏移量
xAxis.setYOffset(10f);
//设置x轴字体大小
xAxis.setTextSize(16f);
//设置x轴字体颜色
xAxis.setTextColor(Color.GREEN);
xAxis.setGranularity(1);
}
3.3 YAxis属性
在柱状图中YAxis包括左测和右侧的两个轴
相关属性
| 属性 | 注解 |
|---|---|
| setTextSize() | 设置y轴的字体大小 |
| setTextColor() | 设置y轴的字体颜色 |
| setTypeface() | 设置y轴字体的类型，如加粗等,Typeface枚举值 |
| setValueFormatter() | 自定义样式，通过实现接口IAxisValueFormatter |
| setDrawTopYLabelEntry() | 是否绘制最上面的那个标签 |
| setAxisMinimum() | 设置显示的最小值 |
| setAxisMaximum | 设置显示的最大值 |
| setPosition() | 设置标签是绘制在图形内部还是外部， YAxisLabelPosition枚举值 |
| setAxisLineWidth() | 设置靠近y轴第一条线的宽度 |
| setAxisLineColor() | 设置靠近y轴第一条线的颜色 |
| setDrawAxisLine() | 是否绘制靠近y轴的第一条线 |
| setDrawGridLines() | 是否绘制横向的网格 |
| setGridColor() | 设置横向网格的颜色 |
| setGridLineWidth() | 设置横向网格线的宽度 |
| setGranularity() | 设置文字在数学意义上的间隔 |
| setGranularityEnabled() | 是否可以绘制间隔 |
| setXOffset() | 设置y轴在x方向上的偏移量 |
| setYOffset() | 设置y轴在y方向上的偏移量 |
| setLabelCount() | 设置Y轴的标签数量 |
| setEnabled() | 是否启用 |
效果图
代码如下
private void setYAxis() {
//不显示右侧的y轴
bc.getAxisRight().setEnabled(false);
//得到左侧的y轴对象
YAxis yAxis = bc.getAxisLeft();
//是否绘制最上面的那个标签
yAxis.setDrawTopYLabelEntry(false);
yAxis.setAxisMinimum(0);
yAxis.setAxisMaximum(20);
//设置标签是绘制在图形内部还是外部， YAxisLabelPosition枚举值
yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
//设置靠近y轴第一条线的宽度
yAxis.setAxisLineWidth(3f);
//设置靠近y轴第一条线的颜色
yAxis.setAxisLineColor(Color.RED);
yAxis.setGridColor(Color.RED);
//设置横向网格线的宽度
yAxis.setGridLineWidth(2f);
//设置y轴在x方向上的偏移量
yAxis.setXOffset(15f);
//设置y轴的字体大小
yAxis.setTextSize(14f);
//设置y轴的字体颜色
yAxis.setTextColor(Color.BLACK);
//设置y轴字体的类型，如加粗等
yAxis.setTypeface(Typeface.DEFAULT_BOLD);
//自定义样式
yAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return value + " 万/元";
}
});
}
3.4 BarDataSet属性
BarDataSet可以理解为所有的柱块
相关属性
| 属性 | 注解 |
|---|---|
| setValueTextColor() | 设置住块上文字的颜色 |
| setValueTextSize() | 设置住块上文字的大小 |
| setValueTypeface () | 设置住块上文字的类型，如加粗，Typeface枚举值 |
| setValueFormatter() | 设置柱块上文字的格式,通过接口IValueFormatter实现 |
| setBarBorderColor() | 设置柱状图的边框颜色 |
| setBarBorderWidth() | 设置柱状图的边框大小，默认0 |
| setColors() | 依次设置每次柱块的颜色,int… colors |
| setHighLightColor() | 设置高亮的颜色，效果不是很明显 |
| setDrawValues() | 是否绘制柱块上的文字 |
| setAxisDependency() | 设置数据是参照左侧的y轴还是右侧的y轴，AxisDependency枚举值，在绘制组合图的时候使用 |
| setValues() | 重新设置数据源，参数为List |
| notifyDataSetChanged() | 当数据源发生改变，该方法自动触发，无需参数 |
| setForm () | 设置图例的形状，如圆形，条形等 |
| setDrawValues() | 是否绘制柱状图上面显示的文字 |
| setBarShadowColor() | 设置柱状图的阴影颜色，把barChart.setDrawBarShadow(true)才有效果 |
效果图
代码如下
//该方法在OnCreate中直接调用即可，在下方会给出完整代码
private void loadData() {
//为了看到更明显的效果，我这里设置了图形在上下左右四个方向上的偏移量
bc.setExtraTopOffset(25);
bc.setExtraLeftOffset(30);
bc.setExtraRightOffset(100);
bc.setExtraBottomOffset(50);
List<BarEntry> barEntries = new ArrayList<BarEntry>();
barEntries.add(new BarEntry(0,5));
barEntries.add(new BarEntry(1,10));
barEntries.add(new BarEntry(2,13));
BarDataSet barDataSet = new BarDataSet(barEntries,"标题一");
//设置柱状图的边框颜色
barDataSet.setBarBorderColor(Color.GREEN);
//设置柱状图的边框大小，默认0
barDataSet.setBarBorderWidth(5f);
//依次设置每次柱块的颜色,int... 类型
barDataSet.setColors(Color.RED,Color.BLUE,Color.MAGENTA);
//设置住块上文字的颜色
barDataSet.setValueTextColor(Color.RED);
//设置住块上文字的大小
barDataSet.setValueTextSize(16f);
//设置住块上文字的类型，如加粗
barDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);
//设置柱块上文字的格式
barDataSet.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
return value + " %";
}
});
//设置高亮的颜色，效果不是很明显
barDataSet.setHighLightColor(Color.BLACK);
//设置柱状图的阴影
barDataSet.setBarShadowColor(Color.GRAY);
BarData ba = new BarData(barDataSet);
bc.setData(ba);
}
3.5 BarChart属性和BarData属性
BarChart属性即该控件点出来的属性，但柱状图的BarData中有几个属性是BarDataSet中没有的，而在实际开发中我们用的又比较多，在下面将会介绍到
BarChart属性
| 属性 | 注解 |
|---|---|
| setBackgroundColor() | 设置整个控件的背景颜色 |
| setBackground() | 设置整个控件的背景图片 |
| setGridBackgroundColor() | 设置网格线的背景颜色 |
| setDrawGridBackground() | 是否绘制网格线的背景色,bool值 |
| setAlpha() | 设置整个控件的透明度。取值0-1，0表示完全透明 |
| setTouchEnabled() | 是否取消所有的手势操作，包括点击和缩放，bool值 |
| notifyDataSetChanged() | 当数据源发生改变时自动调用，无需参数 |
| setDrawValueAboveBar() | 是否将柱块上的文字绘制在柱块的上面 |
| setFitBars() | 是否处理超出的柱块（这是个非常重要的属性，有时候可以帮助我们自动处理超出的柱块），一般都会加上 |
| setHighlightFullBarEnabled() | 是否绘制高亮，效果不大 |
| setExtraBottomOffset() | 设置柱状图在底部的偏移量，同样也有设置上左右方向上的偏移量，还有一次行设置四个方向上的属性，这里不做过多的介绍 |
| setDrawBarShadow() | 是否绘制阴影 |
| setScaleEnabled() | 是否支持缩放 |
| animateXY() | 设置x和y两个方向的动画，也可以单独设置x和y方向上的动画，但同时设置效果更好看 |
BarData属性
在BarData中有两个比较重要的属性，下面会介绍到
| 属性 | 注解 |
|---|---|
| setBarWidth() | 设置每个柱块的宽度，取值0-1 |
| groupBars() | 设置一组柱块与一组柱块之间的距离，当每组只有一个柱块时将会报错 |
效果图
完整代码如下：
public class Bar_Frag extends Fragment {
private BarChart bc;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.bar_frag,null);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
bc = view.findViewById(R.id.bc);
setLegend();
setDesc();
setXAxis();
setYAxis();
loadData();
}
private void setYAxis() {
//不显示右侧的y轴
bc.getAxisRight().setEnabled(false);
//得到左侧的y轴对象
YAxis yAxis = bc.getAxisLeft();
//是否绘制最上面的那个标签
yAxis.setDrawTopYLabelEntry(false);
yAxis.setAxisMinimum(0);
yAxis.setAxisMaximum(20);
//设置标签是绘制在图形内部还是外部， YAxisLabelPosition枚举值
yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
//设置靠近y轴第一条线的宽度
yAxis.setAxisLineWidth(3f);
//设置靠近y轴第一条线的颜色
yAxis.setAxisLineColor(Color.RED);
yAxis.setGridColor(Color.RED);
//设置横向网格线的宽度
yAxis.setGridLineWidth(2f);
//设置y轴在x方向上的偏移量
yAxis.setXOffset(15f);
//设置y轴的字体大小
yAxis.setTextSize(14f);
//设置y轴的字体颜色
yAxis.setTextColor(Color.BLACK);
//设置y轴字体的类型，如加粗等
yAxis.setTypeface(Typeface.DEFAULT_BOLD);
//自定义样式
yAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return value + " 万/元";
}
});
}
private void setXAxis() {
XAxis xAxis = bc.getXAxis();
//设置x轴是显示在顶部还是底部，柱状图内还是外
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//设置文字旋转的角度
xAxis.setLabelRotationAngle(60);
//设置最小值，可通过该属性设置与左边的距离
xAxis.setAxisMinimum(-0.5f);
//设置最大值
xAxis.setAxisMaximum(2.5f);
xAxis.setLabelCount(3);
//设置靠近x轴第一条线的颜色
xAxis.setAxisLineColor(Color.RED);
//设置绘制靠近x轴的第一条线的宽度
xAxis.setAxisLineWidth(3f);
//是否绘制靠近x轴的第一条线,不受setDrawGridLines属性影响
// xAxis.setDrawAxisLine(false);
//是否绘制竖向的网格
xAxis.setDrawGridLines(false);
//自定义格式
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
int tep = (int) (value + 1);
return "第" + tep + "月份";
}
});
//设置x轴在y方向上的偏移量
xAxis.setYOffset(10f);
//设置x轴字体大小
xAxis.setTextSize(16f);
//设置x轴字体颜色
xAxis.setTextColor(Color.GREEN);
//设置间隔
xAxis.setGranularity(1);
}
private void setLegend() {
//得到Legend对象
Legend legend = bc.getLegend();
//设置字体大小
legend.setTextSize(18f);
//设置排列方式
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
//设置图例的大小
legend.setFormSize(15f);
}
public void setDesc(){
//得到Description对象
Description description = bc.getDescription();
//设置文字
description.setText("这是柱状图的标题");
//设置文字大小
description.setTextSize(18f);
//设置偏移量
// 获取屏幕中间x 轴的像素坐标
WindowManager wm=(WindowManager)getActivity().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
float x = dm.widthPixels / 2;
description.setPosition(x,50);
//设置字体颜色
description.setTextColor(Color.BLUE);
//设置字体加粗
description.setTypeface(Typeface.DEFAULT_BOLD);
}
private void loadData() {
//为了看到更明显的效果，我这里设置了图形在上下左右四个方向上的偏移量
bc.setExtraTopOffset(25);
bc.setExtraLeftOffset(30);
bc.setExtraRightOffset(100);
bc.setExtraBottomOffset(50);
List<BarEntry> barEntries = new ArrayList<BarEntry>();
barEntries.add(new BarEntry(0,5));
barEntries.add(new BarEntry(1,10));
barEntries.add(new BarEntry(2,13));
BarDataSet barDataSet = new BarDataSet(barEntries,"标题一");
//设置柱状图的边框颜色
barDataSet.setBarBorderColor(Color.GREEN);
//设置柱状图的边框大小，默认0
barDataSet.setBarBorderWidth(5f);
//依次设置每次柱块的颜色,int... 类型
barDataSet.setColors(Color.RED,Color.BLUE,Color.MAGENTA);
//设置住块上文字的颜色
barDataSet.setValueTextColor(Color.RED);
//设置住块上文字的大小
barDataSet.setValueTextSize(16f);
//设置住块上文字的类型，如加粗
barDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);
//设置柱块上文字的格式
barDataSet.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
return value + " %";
}
});
//设置高亮的颜色，效果不是很明显
barDataSet.setHighLightColor(Color.BLACK);
//设置柱状图的阴影
barDataSet.setBarShadowColor(Color.RED);
//设置x和y两个方向的动画，也可以单独设置x和y方向上的动画，但同时设置效果更好看
bc.animateXY(1500,1500);
bc.setDrawGridBackground(true);
//是否绘制高亮，效果不大
bc.setHighlightFullBarEnabled(false);
//是否处理超出的柱块（这是个非常重要的属性，有时候可以帮助我们自动处理超出的柱块）
bc.setFitBars(true);
//是否将柱块上的文字绘制在柱块的上面
bc.setDrawValueAboveBar(true);
//是否绘制阴影
// bc.setDrawBarShadow(true);
//是否支持缩放
// bc.setScaleEnabled(false);
BarData ba = new BarData(barDataSet);
//设置每个柱块的宽度，取值0-1
ba.setBarWidth(0.2f);
//设置一组柱块与一组柱块之间的距离，当每组只有一个柱块时将会报错
// ba.groupBars();
bc.setData(ba);
}
}
本篇文章只是介绍了MPAndroidChart中柱状图最基本的做法，当然还有很多更其他用法，如多柱图，正负柱状图，堆叠柱状图等，想要了解的读者请转到：安卓图形之MPAndroidChart3.0详解三——柱状图（二）（案例篇）