MPAndroidChart简单教你画柱形图与折线图相结合
话不多说先上效果
看效果是不是很炫酷呢
咱们今天教大家的就是这种相结合的图表
依赖什么的可以去我上篇博客里查看
首先是布局
在activity里紧接着就是传入数据
List body = viewModel.qualityAnalysisBeanObservableList.get().getBody().get(0);
initDefaultBarChart(mChart,body);
继续往下来
private void initDefaultBarChart(CombinedChart mChart, List body) {
mChart.setDrawBorders(true); // 显示边界
mChart.getDescription().setEnabled(false); // 不显示备注信息
mChart.setPinchZoom(true); // 比例缩放
mChart.animateY(1500);
XAxis xAxis = mChart.getXAxis();
xAxis.setDrawGridLines(false);
/*解决左右两端柱形图只显示一半的情况 只有使用CombinedChart时会出现，如果单独使用BarChart不会有这个问题*/
xAxis.setAxisMinimum(-0.5f);
xAxis.setAxisMaximum(body.size() - 0.5f);
xAxis.setLabelCount(body.size()); // 设置X轴标签数量
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // 设置X轴标签位置，BOTTOM在底部显示，TOP在顶部显示
/* xAxis.setValueFormatter(new IAxisValueFormatter() { // 转换要显示的标签文本，value值默认是int从0开始
@Override
public String getFormattedValue(float value, AxisBase axis) {
return suppliers[(int) value];
}
});*/
YAxis axisLeft = mChart.getAxisLeft(); // 获取左边Y轴操作类
axisLeft.setAxisMinimum(0); // 设置最小值
axisLeft.setGranularity(10); // 设置Label间隔
axisLeft.setLabelCount(10);// 设置标签数量
axisLeft.setValueFormatter(new IAxisValueFormatter() { // 在左边Y轴标签文本后加上%号
@Override
public String getFormattedValue(float value, AxisBase axis) {
return value + "%";
}
});
YAxis axisRight = mChart.getAxisRight(); // 获取右边Y轴操作类
axisRight.setDrawGridLines(false); // 不绘制背景线，上面左边Y轴并没有设置此属性，因为不设置默认是显示的
axisRight.setGranularity(10); // 设置Label间隔
axisRight.setAxisMinimum(0); // 设置最小值
axisRight.setLabelCount(20); // 设置标签个数
axisRight.setValueFormatter(new IAxisValueFormatter() { // 在右边Y轴标签文本后加上%号
@Override
public String getFormattedValue(float value, AxisBase axis) {
return value + "%";
}
});
/**
* 初始化柱形图的数据
* 此处用suppliers的数量做循环，因为总共所需要的数据源数量应该和标签个数一致
* 其中BarEntry是柱形图数据源的实体类，包装xy坐标数据
*/
/******************BarData start********************/
List barAdvisable = new ArrayList<>();
List barMild = new ArrayList<>();
List barSerious = new ArrayList<>();
List barProperties = new ArrayList<>();
List barVarietie = new ArrayList<>();
if (body != null && body.size() != 0) {
for (int i = 0; i < body.size(); i++) {
double advisable = body.get(i).getAdvisable();
barAdvisable.add(new BarEntry(i, (float)advisable));
//
double mildInadvisable = body.get(i).getMildInadvisable();
barMild.add(new BarEntry(i, (float)mildInadvisable));
//
double seriousInadvisable = body.get(i).getSeriousInadvisable();
barSerious.add(new BarEntry(i, (float)seriousInadvisable));
double properties = body.get(i).getProperties();
barProperties.add(new BarEntry(i, (float)properties));
// double varietie = body.get(i).getVarietie();
// barVarietie.add(new BarEntry(i, (float)varietie));
}
}else {
return;
}
BarDataSet propertiesDataSet = new BarDataSet(barProperties, ""); // 新建一组柱形图，"LAR"为本组柱形图的Label
propertiesDataSet.setColor(Color.parseColor("#eaa510")); // 设置柱形图颜色
propertiesDataSet.setValueTextColor(Color.parseColor("#eaa510")); // 设置柱形图顶部文本颜色
BarDataSet barDataSet = new BarDataSet(barAdvisable, ""); // 新建一组柱形图，"LAR"为本组柱形图的Label
barDataSet.setColor(Color.parseColor("#0288d1")); // 设置柱形图颜色
barDataSet.setValueTextColor(Color.parseColor("#0288d1")); // 设置柱形图顶部文本颜色
// 添加一组柱形图，如果有多组柱形图数据，则可以多次addDataSet来设置
BarDataSet mildDataSet = new BarDataSet(barMild, ""); // 新建一组柱形图，"LAR"为本组柱形图的Label
mildDataSet.setColor(Color.parseColor("#11de0a")); // 设置柱形图颜色
mildDataSet.setValueTextColor(Color.parseColor("#11de0a")); // 设置柱形图顶部文本颜色
BarDataSet seriousDataSet = new BarDataSet(barSerious, ""); // 新建一组柱形图，"LAR"为本组柱形图的Label
seriousDataSet.setColor(Color.parseColor("#eaa510")); // 设置柱形图颜色
seriousDataSet.setValueTextColor(Color.parseColor("#eaa510")); // 设置柱形图顶部文本颜色
BarDataSet varietieDataSet = new BarDataSet(barVarietie, ""); // 新建一组柱形图，"LAR"为本组柱形图的Label
varietieDataSet.setColor(Color.parseColor("#ea4c12")); // 设置柱形图颜色
varietieDataSet.setValueTextColor(Color.parseColor("#ea4c12")); // 设置柱形图顶部文本颜色
//保存LineDataSet集合
ArrayList dataSets = new ArrayList<>();
dataSets.add(barDataSet);
dataSets.add(mildDataSet);
dataSets.add(seriousDataSet);
//dataSets.add(varietieDataSet);
dataSets.add(propertiesDataSet);
/******************BarData end********************/
/**
* 初始化折线图数据
* 说明同上
*/
/******************LineData start********************/
List lineEntries = new ArrayList<>();
if (body != null && body.size() != 0) {
for (int i = 0; i < body.size(); i++) {
//宜存率
double advisable = body.get(i).getAdvisable();
lineEntries.add(new BarEntry(i, (float)advisable));
// double properties = body.get(i).getProperties();
// lineEntries.add(new BarEntry(i, (float)properties));
}
}else {
return;
}
LineDataSet lineDataSet = new LineDataSet(lineEntries, "宜存率");
lineDataSet.setColor(Color.parseColor("#b71c1c"));
lineDataSet.setCircleColor(Color.parseColor("#b71c1c"));
lineDataSet.setValueTextColor(Color.parseColor("#f44336"));
lineDataSet.setLineWidth(1f);
lineDataSet.setHighlightEnabled(false);
LineData lineData = new LineData();
lineData.addDataSet(lineDataSet);
/******************LineData end********************/
float groupSpace = 0.12f; //柱状图组之间的间距
float barSpace = 0.02f; // x4
float barWidth = 0.2f;
CombinedData combinedData = new CombinedData(); // 创建组合图的数据源
BarData barData = new BarData(dataSets);
combinedData.setData(barData); // 添加柱形图数据源
combinedData.setData(lineData); // 添加折线图数据源
//柱状图宽度
barData.setBarWidth(barWidth);
// (起始点、柱状图组间距、柱状图之间间距)
barData.groupBars(0, groupSpace, barSpace);
mChart.setData(combinedData); // 为组合图设置数据源
}
这样就能够实现折线与柱形相结合 是不是很棒呢
感谢大家的支持！