文章目录
- 1 前言
- 2 基本使用
- 3 正负水平图
1 前言
本篇文章讲解MPAndroidChart中HorizontalBarChart控件的基本使用,相关的一些基本属性在本篇文章中不会讲解,大部分属性与柱状图的属性相同,有需要的读者请转到:安卓图形之MPAndroidChart3.0详解三——柱状图(一)(属性篇)
2 基本使用
HorizontalBarChart与BarChart的基本使用大致相同,但还是有一些要注意的地方,如:
- X轴和Y轴的位置
在HorizontalBarChart中,不能以数学意义上的x,y来判断x轴和y轴的位置
在HorizontalBarChart中,y轴表示上下两个轴,x轴表示左侧的轴(代码中会演示)
- 两边的y轴都要设置最大最小值
在HorizontalBarChart中有上下两个y轴,在一般的开发中我们通常都只希望显示一侧的y轴,如果按照之前的做法直接将另外的一个y轴setEnabled(false)的话,就会出现在柱块上无法显示本文的问题
解决方案:
只需要把不希望显示的那个y轴设置最大值和最小值然后在setEnabled(false)就ok啦,详情见代码中的演示效果图:完整代码如下:
xml代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.HorizontalBarChart
android:id="@+id/hc"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Java代码:
public class HBar_test extends Fragment {
private HorizontalBarChart hc;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.hc,null);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
hc = view.findViewById(R.id.hc);
setDes();
setXAxis();
setYAxis();
loadData();
}
//设置标题
private void setDes() {
Description description = new Description();
description.setText("违章车辆的违章次数占比分布图统计");
description.setTextSize(20f);
description.setTextColor(Color.BLACK);
//获取屏幕的中间坐标
WindowManager wm = (WindowManager) getActivity() .getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
float x = dm.widthPixels / 2;
description.setPosition(x,40);
hc.setDescription(description);
}
//设置y轴
private void setYAxis() {
//两边的y轴都要设置y轴的最小值才能在柱状图上面显示数值
//不然是看不到效果的
YAxis tepAxis = hc.getAxisLeft();
tepAxis.setAxisMaximum(80f);
tepAxis.setAxisMinimum(0f);
tepAxis.setEnabled(false);
YAxis yAxis = hc.getAxisRight();
yAxis.setTextSize(12f);
yAxis.setAxisMinimum(0f);
yAxis.setAxisMaximum(80f);
//自定义样式
yAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return value + "0%";
}
});
}
//设置x轴
private void setXAxis() {
XAxis xAxis = hc.getXAxis();
xAxis.setTextSize(16);
xAxis.setAxisMaximum(2.6f);
//把最小值设置为负数能够为下方留出点空白距离
xAxis.setAxisMinimum(-0.6f);
xAxis.setDrawGridLines(false);
//将x轴显示在左侧
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setLabelCount(3);
//自定义样式
final String ss[] = {"5条以上违章","3-5条违章","1-2条违章"};
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return ss[(int) value];
}
});
//设置x轴的偏移量
xAxis.setXOffset(15f);
}
//加载数据
private void loadData() {
//不绘制图例
hc.getLegend().setEnabled(false);
//自动对齐
hc.setFitBars(true);
hc.setExtraOffsets(20,50,30,30);
//将文本绘制在柱块上还是柱块里面
hc.setDrawValueAboveBar(true);
//从下往上绘制
final List<BarEntry> entries = new ArrayList<BarEntry>();
float da[] = {60.51f,26.28f,13.20f};
for(int i = 0; i < da.length; i++){
entries.add(new BarEntry(i,da[i]));
}
BarDataSet barDataSet = new BarDataSet(entries,"");
barDataSet.setValueTextSize(16f);//柱块上的字体大小
barDataSet.setValueTextColor(Color.RED);//柱块上的字体颜色
barDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);//加粗
//自自定义样式
barDataSet.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
return String.format("%.2f",value) + "%";//保留两位小数
}
});
//依次设置每次柱块的颜色
barDataSet.setColors(getResources().getColor(R.color.h_green),getResources().getColor(R.color.h_bule),getResources().getColor(R.color.h_red));
BarData barData = new BarData(barDataSet);
//设置柱块的宽度
barData.setBarWidth(0.4f);
hc.setData(barData);
}
3 正负水平图
效果图:
完整代码如下:
xml代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.HorizontalBarChart
android:id="@+id/hc"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
java代码:
public class HBar_test extends Fragment {
private HorizontalBarChart hc;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.hc,null);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
hc = view.findViewById(R.id.hc);
setDes();
setXAxis();
setYAxis();
loadData();
}
//设置标题
private void setDes() {
Description description = new Description();
description.setText("全国人口普查");
description.setTextSize(20f);
description.setTextColor(Color.BLACK);
// 获取屏幕中间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,40);
hc.setDescription(description);
}
//设置y轴
private void setYAxis() {
//两边的y轴都要设置y轴的最小值才能在柱状图上面显示数值
//不然是看不到效果的
YAxis tepAxis = hc.getAxisLeft();
tepAxis.setAxisMinimum(-25f);
tepAxis.setAxisMaximum(25f);
tepAxis.setEnabled(false);
YAxis yAxis = hc.getAxisRight();
yAxis.setTextSize(14f);
yAxis.setAxisMinimum(-25f);
yAxis.setAxisMaximum(25f);
yAxis.setTextColor(Color.BLACK);
yAxis.setDrawGridLines(false);
yAxis.setDrawLabels(true);
//自定义样式
yAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return Math.abs(value) + " MM";
}
});
}
//设置x轴
private void setXAxis() {
XAxis xAxis = hc.getXAxis();
xAxis.setTextSize(16);
xAxis.setAxisMaximum(10.6f);
//把最小值设置为负数能够为下方留出点空白距离
xAxis.setAxisMinimum(-0.6f);
//不显示网格
xAxis.setDrawGridLines(false);
xAxis.setDrawAxisLine(true);
//将x轴显示在左侧
xAxis.setPosition(XAxis.XAxisPosition.BOTH_SIDED);
xAxis.setLabelCount(11);
//自定义样式
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return (int)value * 10 + "-" + ((int)value + 1) * 10;
}
});
//设置x轴的偏移量
xAxis.setXOffset(15f);
}
//加载数据
private void loadData() {
//不绘制图例
//自动对齐
hc.setFitBars(true);
hc.setExtraOffsets(20,50,50,15);
//将文本绘制在柱块上还是柱块里面
hc.setDrawValueAboveBar(true);
//从下往上绘制
final List<BarEntry> entries = new ArrayList<BarEntry>();
float da[] = {11f,13f,15f,17f,20f,19f,16f,14f,11f,6f,2f};
float da2[] = {-12f,-13f,-15f,-17f,-19f,-19f,-16f,-13f,-10f,-5f,-1f};
for(int i = 0; i < da.length; i++){
entries.add(new BarEntry(i,new float[]{da[i],da2[i]}));
}
BarDataSet barDataSet = new BarDataSet(entries,"");
barDataSet.setValueTextSize(10f);//柱块上的字体大小
barDataSet.setValueTextColor(Color.BLACK);//柱块上的字体颜色
barDataSet.setValueTypeface(Typeface.DEFAULT_BOLD);
//自自定义样式
barDataSet.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
return Math.abs((int)value) + " MM";
}
});
//设置柱块的颜色
barDataSet.setColors(getResources().getColor(R.color.h_green),getResources().getColor(R.color.h_bule));
barDataSet.setStackLabels(new String[]{"女人","男人"});
hc.getLegend().setYOffset(15f);
BarData barData = new BarData(barDataSet);
//设置柱块的宽度
barData.setBarWidth(0.8f);
hc.setData(barData);
}
}