MPAndroidChart在github上的地址：https://github.com/PhilJay/MPAndroidChart
组合图CombinedChart可以将MPAndroidChart支持的所有类别的图表组合在一起，在此只是展示曲线图+柱状图
一.效果图
1.一条柱状图加一条线性图
1.png
2.多条柱状图加多条线性图
2.png
二.实现主要代码如下
1.chart的CombinedChartManager类
public class CombinedChartManager {
private CombinedChart mCombinedChart;
private YAxis leftAxis;
private YAxis rightAxis;
private XAxis xAxis;
public CombinedChartManager(CombinedChart combinedChart) {
this.mCombinedChart = combinedChart;
leftAxis = mCombinedChart.getAxisLeft();
rightAxis = mCombinedChart.getAxisRight();
xAxis = mCombinedChart.getXAxis();
}
/**
* 初始化Chart
*/
private void initChart() {
//不显示描述内容
mCombinedChart.getDescription().setEnabled(false);
mCombinedChart.setDrawOrder(new CombinedChart.DrawOrder[]{
CombinedChart.DrawOrder.BAR,
CombinedChart.DrawOrder.LINE
});
mCombinedChart.setBackgroundColor(Color.WHITE);
mCombinedChart.setDrawGridBackground(false);
mCombinedChart.setDrawBarShadow(false);
mCombinedChart.setHighlightFullBarEnabled(false);
//显示边界
mCombinedChart.setDrawBorders(true);
//图例说明
Legend legend = mCombinedChart.getLegend();
legend.setWordWrapEnabled(true);
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
legend.setDrawInside(false);
//Y轴设置
rightAxis.setDrawGridLines(false);
rightAxis.setAxisMinimum(0f);
leftAxis.setDrawGridLines(false);
leftAxis.setAxisMinimum(0f);
mCombinedChart.animateX(2000); // 立即执行的动画,x轴
}
/**
* 设置X轴坐标值
*
* @param xAxisValues x轴坐标集合
*/
public void setXAxis(final List<String> xAxisValues) {
//设置X轴在底部
XAxis xAxis = mCombinedChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setGranularity(1f);
xAxis.setLabelCount(xAxisValues.size() - 1,false);
xAxis.setValueFormatter(new ValueFormatter() {
@Override
public String getAxisLabel(float value, AxisBase axis) {
return xAxisValues.get((int) value % xAxisValues.size());
}
});
mCombinedChart.invalidate();
}
/**
* 得到折线图(一条)
*
* @param lineChartY 折线Y轴值
* @param lineName 折线图名字
* @param lineColor 折线颜色
* @return
*/
private LineData getLineData(List<Float> lineChartY, String lineName, int lineColor) {
LineData lineData = new LineData();
ArrayList<Entry> yValue = new ArrayList<>();
for (int i = 0; i < lineChartY.size(); i++) {
yValue.add(new Entry(i, lineChartY.get(i)));
}
LineDataSet dataSet = new LineDataSet(yValue, lineName);
dataSet.setColor(lineColor);
dataSet.setCircleColor(lineColor);
dataSet.setValueTextColor(lineColor);
dataSet.setCircleSize(1);
//显示值
dataSet.setDrawValues(true);
dataSet.setValueTextSize(10f);
dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
lineData.addDataSet(dataSet);
return lineData;
}
/**
* 得到折线图(多条)
*
* @param lineChartYs 折线Y轴值
* @param lineNames 折线图名字
* @param lineColors 折线颜色
* @return
*/
private LineData getLineData(List<List<Float>> lineChartYs, List<String> lineNames, List<Integer> lineColors) {
LineData lineData = new LineData();
for (int i = 0; i < lineChartYs.size(); i++) {
ArrayList<Entry> yValues = new ArrayList<>();
for (int j = 0; j < lineChartYs.get(i).size(); j++) {
yValues.add(new Entry(j, lineChartYs.get(i).get(j)));
}
LineDataSet dataSet = new LineDataSet(yValues, lineNames.get(i));
dataSet.setColor(lineColors.get(i));
dataSet.setCircleColor(lineColors.get(i));
dataSet.setValueTextColor(lineColors.get(i));
dataSet.setCircleSize(1);
dataSet.setDrawValues(true);
dataSet.setValueTextSize(10f);
dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
lineData.addDataSet(dataSet);
}
return lineData;
}
/**
* 得到柱状图
*
* @param barChartY Y轴值
* @param barName 柱状图名字
* @param barColor 柱状图颜色
* @return
*/
private BarData getBarData(List<Float> barChartY, String barName, int barColor) {
BarData barData = new BarData();
ArrayList<BarEntry> yValues = new ArrayList<>();
for (int i = 0; i < barChartY.size(); i++) {
yValues.add(new BarEntry(i, barChartY.get(i)));
}
BarDataSet barDataSet = new BarDataSet(yValues, barName);
barDataSet.setColor(barColor);
barDataSet.setValueTextSize(10f);
barDataSet.setValueTextColor(barColor);
barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
barData.addDataSet(barDataSet);
//以下是为了解决 柱状图 左右两边只显示了一半的问题 根据实际情况 而定
xAxis.setAxisMinimum(-0.5f);
xAxis.setAxisMaximum((float) (barChartY.size()- 0.5));
return barData;
}
/**
* 得到柱状图(多条)
*
* @param barChartYs Y轴值
* @param barNames 柱状图名字
* @param barColors 柱状图颜色
* @return
*/
private BarData getBarData(List<List<Float>> barChartYs, List<String> barNames, List<Integer> barColors) {
List<IBarDataSet> lists = new ArrayList<>();
for (int i = 0; i < barChartYs.size(); i++) {
ArrayList<BarEntry> entries = new ArrayList<>();
for (int j = 0; j < barChartYs.get(i).size(); j++) {
entries.add(new BarEntry(j, barChartYs.get(i).get(j)));
}
BarDataSet barDataSet = new BarDataSet(entries, barNames.get(i));
barDataSet.setColor(barColors.get(i));
barDataSet.setValueTextColor(barColors.get(i));
barDataSet.setValueTextSize(10f);
barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
lists.add(barDataSet);
}
BarData barData = new BarData(lists);
int amount = barChartYs.size(); //需要显示柱状图的类别 数量
float groupSpace = 0.12f; //柱状图组之间的间距
float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet
float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet
// (0.2 + 0.02) * 4 + 0.12 = 1.00 即100% 按照百分百布局
//柱状图宽度
barData.setBarWidth(barWidth);
//(起始点、柱状图组间距、柱状图之间间距)
barData.groupBars(0, groupSpace, barSpace);
return barData;
}
/**
* 显示混合图(柱状图+折线图)
*
* @param xAxisValues X轴坐标
* @param barChartY 柱状图Y轴值
* @param lineChartY 折线图Y轴值
* @param barName 柱状图名字
* @param lineName 折线图名字
* @param barColor 柱状图颜色
* @param lineColor 折线图颜色
*/
public void showCombinedChart(
List<String> xAxisValues, List<Float> barChartY, List<Float> lineChartY
, String barName, String lineName, int barColor, int lineColor) {
initChart();
setXAxis(xAxisValues);
CombinedData combinedData = new CombinedData();
combinedData.setData(getBarData(barChartY, barName, barColor));
combinedData.setData(getLineData(lineChartY, lineName, lineColor));
mCombinedChart.setData(combinedData);
mCombinedChart.invalidate();
}
/**
* 显示混合图(柱状图+折线图)
*
* @param xAxisValues X轴坐标
* @param barChartYs 柱状图Y轴值
* @param lineChartYs 折线图Y轴值
* @param barNames 柱状图名字
* @param lineNames 折线图名字
* @param barColors 柱状图颜色
* @param lineColors 折线图颜色
*/
public void showCombinedChart(
List<String> xAxisValues, List<List<Float>> barChartYs, List<List<Float>> lineChartYs,
List<String> barNames, List<String> lineNames, List<Integer> barColors, List<Integer> lineColors) {
initChart();
setXAxis(xAxisValues);
CombinedData combinedData = new CombinedData();
combinedData.setData(getBarData(barChartYs, barNames, barColors));
combinedData.setData(getLineData(lineChartYs, lineNames, lineColors));
mCombinedChart.setData(combinedData);
mCombinedChart.invalidate();
}
}
2.XML中的布局实现
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.github.mikephil.charting.charts.CombinedChart
android:id="@+id/chart1"
android:layout_width="match_parent"
android:layout_height="360dp"/>
<com.github.mikephil.charting.charts.CombinedChart
android:id="@+id/chart2"
android:layout_width="match_parent"
android:layout_height="360dp"/>
</LinearLayout>
</ScrollView>
3.在Activity中的实现
public class CombinedChartActivity extends AppCompatActivity {
private CombinedChart mCombinedChart1;
private CombinedChart mCombinedChart2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_combined_chart);
mCombinedChart1 = findViewById(R.id.chart1);
mCombinedChart2 = findViewById(R.id.chart2);
//x轴数据
List<String> xData = new ArrayList<>();
for (int i = 0; i <= 20; i++) {
xData.add(String.valueOf(i));
}
//y轴数据集合
List<List<Float>> yBarDatas = new ArrayList<>();
//4种直方图
for (int i = 0; i < 4; i++) {
//y轴数
List<Float> yData = new ArrayList<>();
for (int j = 0; j <= 20; j++) {
yData.add((float) (Math.random() * 100));
}
yBarDatas.add(yData);
}
//y轴数据集合
List<List<Float>> yLineDatas = new ArrayList<>();
//4种直方图
for (int i = 0; i < 4; i++) {
//y轴数
List<Float> yData = new ArrayList<>();
for (int j = 0; j <= 20; j++) {
yData.add((float) (Math.random() * 100));
}
yLineDatas.add(yData);
}
//名字集合
List<String> barNames = new ArrayList<>();
barNames.add("直方图一");
barNames.add("直方图二");
barNames.add("直方图三");
barNames.add("直方图四");
//颜色集合
List<Integer> colors = new ArrayList<>();
colors.add(ContextCompat.getColor(this,R.color.light_blue));
colors.add(ContextCompat.getColor(this,R.color.light_red));
colors.add(ContextCompat.getColor(this,R.color.light_yellow));
colors.add(ContextCompat.getColor(this,R.color.light_green));
//竖状图管理类
List<String> lineNames = new ArrayList<>();
lineNames.add("折线图一");
lineNames.add("折线图二");
lineNames.add("折线图三");
lineNames.add("折线图四");
//管理类
CombinedChartManager combineChartManager1 = new CombinedChartManager(mCombinedChart1);
combineChartManager1.showCombinedChart(xData, yBarDatas.get(0), yLineDatas.get(0),
"直方图", "线性图", colors.get(0), colors.get(1));
CombinedChartManager combineChartManager2 = new CombinedChartManager(mCombinedChart2);
combineChartManager2.showCombinedChart(xData, yBarDatas, yLineDatas, barNames, lineNames,
colors, colors);
}
}
三.使用中遇见的问题
1.和柱状图的显示一样，左右两边的柱状图显示只显示了一半
3.png
因为柱状图是从 X轴值中间开始显示的，为了显示左右两边的完整柱状图 设置X轴多显示0.5即可
//以下是为了解决 柱状图 左右两边只显示了一半的问题 根据实际情况 而定
xAxis.setAxisMinimum(-0.5f);
xAxis.setAxisMaximum((float) (barChartY.size()- 0.5));
2.在显示多条柱状图时,由堆积柱状图变为并排多列柱状图
4.png
解决方法
在getBarData()方法中 根据需要显示的柱状图条数，设置对应的宽度，间距，组间距
int amount = barChartYs.size(); //需要显示柱状图的类别 数量
float groupSpace = 0.12f; //柱状图组之间的间距
float barSpace = (float) ((1 - 0.12) / amount / 10); // x4 DataSet
float barWidth = (float) ((1 - 0.12) / amount / 10 * 9); // x4 DataSet
// (0.2 + 0.02) * 4 + 0.12 = 1.00 即100% 按照百分百布局
//柱状图宽度
barData.setBarWidth(barWidth);
//(起始点、柱状图组间距、柱状图之间间距)
barData.groupBars(0, groupSpace, barSpace);
