在《
Android之MPAndroidChart库使用说明(柱状图、折线图、饼图和组合图.)
》中对利用MPAndroidChart绘制柱状图、饼图、折线图和饼图的流程做了一个简单的介绍,其中双柱图的X轴只能显示数值。鉴于有X轴显示字符串的需求,这里对双柱图时X轴显示字符串的情况进行一个简单的示例介绍。
本文继续在上篇博客的代码的基础上进行修改。主要就是修改MPChartHelper的setTwoBarChart和setTwoBarChartData两个方法,将传入的X轴数值改为string类型,设置X轴的ValueFormatter为MP库自带的IndexAxisValueFormatter。具体修改代码如下:
public static void setTwoBarChart(BarChart barChart, List<String> xAxisValue, List<Float> yAxisValue1, List<Float> yAxisValue2, String bartilte1, String bartitle2) {
barChart.getDescription().setEnabled(false);//设置描述
barChart.setPinchZoom(true);//设置按比例放缩柱状图
barChart.setExtraBottomOffset(10);
barChart.setExtraTopOffset(30);
//x坐标轴设置
XAxis xAxis = barChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(false);
xAxis.setDrawLabels(true);
xAxis.setGranularity(1f);
xAxis.setLabelCount(xAxisValue.size());
xAxis.setCenterAxisLabels(true);//设置标签居中
xAxis.setValueFormatter(new IndexAxisValueFormatter(xAxisValue));
//y轴设置
YAxis leftAxis = barChart.getAxisLeft();
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
leftAxis.setDrawGridLines(false);
leftAxis.setDrawLabels(false);
leftAxis.setDrawAxisLine(false);
//设置坐标轴最大最小值
Float yMin1 = Collections.min(yAxisValue1);
Float yMin2 = Collections.min(yAxisValue2);
Float yMax1 = Collections.max(yAxisValue1);
Float yMax2 = Collections.max(yAxisValue2);
Float yMin = Double.valueOf((yMin1 < yMin2 ? yMin1 : yMin2) * 0.1).floatValue();
Float yMax = Double.valueOf((yMax1 > yMax2 ? yMax1 : yMax2) * 1.1).floatValue();
leftAxis.setAxisMaximum(yMax);
leftAxis.setAxisMinimum(yMin);
barChart.getAxisRight().setEnabled(false);
//图例设置
Legend legend = barChart.getLegend();
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
legend.setDrawInside(false);
legend.setDirection(Legend.LegendDirection.LEFT_TO_RIGHT);
legend.setForm(Legend.LegendForm.SQUARE);
legend.setTextSize(12f);
//设置柱状图数据
setTwoBarChartData(barChart, xAxisValue, yAxisValue1, yAxisValue2, bartilte1, bartitle2);
barChart.animateX(1500);//数据显示动画,从左往右依次显示
barChart.invalidate();
}
/**
* 设置柱状图数据源
*/
private static void setTwoBarChartData(BarChart barChart, List<String> xAxisValue, List<Float> yAxisValue1, List<Float> yAxisValue2, String bartilte1, String bartitle2) {
float groupSpace = 0.04f;
float barSpace = 0.03f;
float barWidth = 0.45f;
// (0.45 + 0.03) * 2 + 0.04 = 1,即一个间隔为一组,包含两个柱图 -> interval per "group"
ArrayList<BarEntry> entries1 = new ArrayList<>();
ArrayList<BarEntry> entries2 = new ArrayList<>();
for (int i = 0, n = yAxisValue1.size(); i < n; ++i) {
entries1.add(new BarEntry(i, yAxisValue1.get(i)));
entries2.add(new BarEntry(i, yAxisValue2.get(i)));
}
BarDataSet dataset1, dataset2;
if (barChart.getData() != null && barChart.getData().getDataSetCount() > 0) {
dataset1 = (BarDataSet) barChart.getData().getDataSetByIndex(0);
dataset2 = (BarDataSet) barChart.getData().getDataSetByIndex(1);
dataset1.setValues(entries1);
dataset2.setValues(entries2);
barChart.getData().notifyDataChanged();
barChart.notifyDataSetChanged();
} else {
dataset1 = new BarDataSet(entries1, bartilte1);
dataset2 = new BarDataSet(entries2, bartitle2);
dataset1.setColor(Color.rgb(129, 216, 200));
dataset2.setColor(Color.rgb(181, 194, 202));
ArrayList<IBarDataSet> dataSets = new ArrayList<>();
dataSets.add(dataset1);
dataSets.add(dataset2);
BarData data = new BarData(dataSets);
data.setValueTextSize(10f);
data.setBarWidth(0.9f);
data.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int i, ViewPortHandler viewPortHandler) {
return StringUtils.double2String(value, 2);
}
});
barChart.setData(data);
}
barChart.getBarData().setBarWidth(barWidth);
barChart.getXAxis().setAxisMinimum(0);
// barData.getGroupWith(...) is a helper that calculates the width each group needs based on the provided parameters
barChart.getXAxis().setAxisMaximum(barChart.getBarData().getGroupWidth(groupSpace, barSpace) * xAxisValue.size() + 0);
barChart.groupBars(0, groupSpace, barSpace);
}
效果图如下