基于android MPAndroidChart实现多图表展示,效果如下:
代码如下: xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.github.mikephil.charting.charts.CombinedChart
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="500dp"/>
</LinearLayout>
java 代码:
public class MainActivity3 extends AppCompatActivity {
protected String[] suppliers = new String[]{
"鸿兴", "利科", "大阪", "沃佳尔", "大唐", "聚科", "其他", "联博", "聚源升", "尹信达"
};
CombinedChart combinedChart;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main3);
combinedChart = (CombinedChart) findViewById(R.id.chart);
combinedChart.setDrawBorders(true); // 显示边界
combinedChart.getDescription().setEnabled(false); // 不显示备注信息
combinedChart.setPinchZoom(true); // 比例缩放
combinedChart.animateY(1500);
XAxis xAxis = combinedChart.getXAxis();
xAxis.setDrawGridLines(false);
/*解决左右两端柱形图只显示一半的情况 只有使用CombinedChart时会出现,如果单独使用BarChart不会有这个问题*/
xAxis.setAxisMinimum(-0.5f);
xAxis.setAxisMaximum(suppliers.length - 0.5f);
xAxis.setLabelCount(suppliers.length); // 设置X轴标签数量
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // 设置X轴标签位置,BOTTOM在底部显示,TOP在顶部显示
combinedChart.getXAxis().setValueFormatter(new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
if (value < 0) {
return "";
}
int index = (int) value;
if (index < 0 || index >= suppliers.length) {
// return "" + (int) value;
return "";
}
return suppliers[index];
}
});
YAxis axisLeft = combinedChart.getAxisLeft(); // 获取左边Y轴操作类
axisLeft.setAxisMinimum(0); // 设置最小值
axisLeft.setGranularity(5); // 设置Label间隔
axisLeft.setLabelCount(5);// 设置标签数量
YAxis axisRight = combinedChart.getAxisRight(); // 获取右边Y轴操作类
axisRight.setStartAtZero(false);//就是这句话就OK了
axisRight.setDrawGridLines(false); // 不绘制背景线,上面左边Y轴并没有设置此属性,因为不设置默认是显示的
axisRight.setGranularity(5); // 设置Label间隔
axisRight.setAxisMinimum(-10); // 设置最小值
axisRight.setLabelCount(5); // 设置标签个数
YAxis yAxis = combinedChart.getAxisLeft();
yAxis.setStartAtZero(false);//就是这句话就OK了
/**
* 初始化柱形图的数据
* 此处用suppliers的数量做循环,因为总共所需要的数据源数量应该和标签个数一致
* 其中BarEntry是柱形图数据源的实体类,包装xy坐标数据
*/
/******************BarData start********************/
List<BarEntry> barEntries = new ArrayList<>();
List<BarEntry> barEntries1 = new ArrayList<>();
BarData barData = new BarData();
for (int i = 0; i < suppliers.length; i++) {
barEntries.add(new BarEntry(i, getRandom(20, 50)));
// barEntries1.add(new BarEntry(i, getRandom(250, 50)));
}
BarDataSet barDataSet = new BarDataSet(barEntries, "看护后心情值"); // 新建一组柱形图,"LAR"为本组柱形图的Label
barDataSet.setColor(Color.parseColor("#fc8428")); // 设置柱形图颜色
barDataSet.setValueTextColor(Color.parseColor("#fc8428")); // 设置柱形图顶部文本颜色
// barData.addDataSet(barDataSet);// 添加一组柱形图,如果有多组柱形图数据,则可以多次addDataSet来设置
for (int i = 0; i < suppliers.length; i++) {
barEntries1.add(new BarEntry(i, getRandom(-50, 10)));
}
BarDataSet barDataSet1 = new BarDataSet(barEntries1, "看护前心情值"); // 新建一组柱形图,"LAR"为本组柱形图的Label
barDataSet1.setColor(Color.parseColor("#0985e3")); // 设置柱形图颜色
barDataSet1.setValueTextColor(Color.parseColor("#0985e3")); // 设置柱形图顶部文本颜色
barData.addDataSet(barDataSet);// 添加一组柱形图,如果有多组柱形图数据,则可以多次addDataSet来设置
barData.addDataSet(barDataSet1);// 添加一组柱形图,如果有多组柱形图数据,则可以多次addDataSet来设置
/******************BarData end********************/
/**
* 初始化折线图数据
* 说明同上
*/
/******************LineData start********************/
List<Entry> lineEntries = new ArrayList<>();
for (int i = 0; i < suppliers.length; i++) {
lineEntries.add(new Entry(i, getRandom(10, 0)));
}
LineDataSet lineDataSet = new LineDataSet(lineEntries, "心情变化值");
lineDataSet.setColor(Color.parseColor("#b71c1c"));
lineDataSet.setCircleColor(Color.parseColor("#b71c1c"));
lineDataSet.setValueTextColor(Color.parseColor("#f44336"));
lineDataSet.setLineWidth(3f);
lineDataSet.setHighlightEnabled(false);
LineData lineData = new LineData();
lineData.addDataSet(lineDataSet);
/******************LineData end********************/
CombinedData combinedData = new CombinedData(); // 创建组合图的数据源
combinedData.setData(barData); // 添加柱形图数据源
combinedData.setData(lineData); // 添加折线图数据源
combinedChart.setData(combinedData); // 为组合图设置数据源
}
protected float getRandom(float range, float startsfrom) {
return (float) (Math.random() * range) + startsfrom;
}
}
end:
java类比较粗糙,需要简洁的话,请自行封装。