package com.xxmassdeveloper.mpchartexample.view; import android.content.Context; import android.graphics.Color; import android.util.AttributeSet; import android.view.View; import android.widget.CheckBox; import android.widget.CompoundButton; import android.widget.RelativeLayout; import android.widget.TextView; import com.github.mikephil.charting.charts.CombinedChart; import com.github.mikephil.charting.components.Legend; import com.github.mikephil.charting.components.XAxis; import com.github.mikephil.charting.components.YAxis; import com.github.mikephil.charting.data.BarData; import com.github.mikephil.charting.data.BarDataSet; import com.github.mikephil.charting.data.BarEntry; import com.github.mikephil.charting.data.CombinedData; import com.github.mikephil.charting.data.Entry; import com.github.mikephil.charting.data.LineData; import com.github.mikephil.charting.data.LineDataSet; import com.github.mikephil.charting.formatter.IndexAxisValueFormatter; import com.github.mikephil.charting.formatter.MyYAxisValueFormatter; import com.github.mikephil.charting.interfaces.datasets.IDataSet; import com.xxmassdeveloper.mpchartexample.R; import com.xxmassdeveloper.mpchartexample.custom.MyMarkerView; import java.util.ArrayList; /** * @Info 双柱图带曲线 * * @Auth Bello * @Time 18-3-2 下午6:08 * @Ver */ public class MultiBarChart extends RelativeLayout { private Context context; private TextView titleText; private CheckBox showBtn; //组合图形控件 private CombinedChart mChart; //X轴显示的文字 private String[] quarters ; //线图数据 private ArrayList lineEntries1 = new ArrayList<>(); private ArrayList lineEntries2 = new ArrayList<>(); //柱图数据 private ArrayList barEntries1 = new ArrayList<>(); private ArrayList barEntries2 = new ArrayList<>(); public MultiBarChart(Context context) { super(context); initView(context); } public MultiBarChart(Context context, AttributeSet attrs) { super(context, attrs); initView(context); } /** * 加载UI布局 * @param context */ private void initView(Context context){ this.context = context; View.inflate(context, R.layout.lt_my_bar, this); titleText = this.findViewById(R.id.chart_title_text); showBtn = this.findViewById(R.id.chart_show_text); showBtn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton compoundButton, boolean b) { for (IDataSet set : mChart.getData().getDataSets()) { if (set instanceof LineDataSet) set.setDrawValues(b); if (set instanceof BarDataSet) set.setDrawValues(b); } mChart.invalidate(); } }); mChart = this.findViewById(R.id.chart_combined); } /** * 加载数据 * @param chartName * @param legend1 * @param legend2 * @param legend3 * @param leftYUnit * @param rightYUnit * @param quarters * @param lineEntries1 * @param barEntries1 * @param barEntries2 */ public void setData(String chartName, String legend1, String legend2, String legend3, String legend4, String leftYUnit, String rightYUnit, String[] quarters, ArrayList lineEntries1, ArrayList lineEntries2, ArrayList barEntries1, ArrayList barEntries2) { this.quarters = quarters; this.lineEntries1 = lineEntries1; this.lineEntries2 = lineEntries2; this.barEntries1 = barEntries1; this.barEntries2 = barEntries2; //显示表的名称 titleText.setText(chartName); CombinedData data = new CombinedData(); //添加线图 if (null != lineEntries1) { data.setData(generateLineData(legend1, legend2)); } //添加柱图 if (null != barEntries1) { data.setData(generateBarData(legend3, legend4)); } //载入chart loadChart(data, leftYUnit, rightYUnit); } /** * 为chart加载数据 */ private void loadChart(CombinedData data, String leftYUnit, String rightYUnit) { //图表描述 mChart.getDescription().setEnabled(false); //图表背景 mChart.setBackgroundColor(Color.WHITE); //是否启用网格背景 mChart.setDrawGridBackground(false); //在各条 bar 后面绘制 “灰色全值 bar” mChart.setDrawBarShadow(false); //Y轴方向上不允许拉伸 mChart.setScaleYEnabled(false); mChart.setHighlightFullBarEnabled(false); //true，没缩放功能。false，x轴和y轴可分别放大 mChart.setPinchZoom(true); //要绘制的组件 mChart.setDrawOrder(new CombinedChart.DrawOrder[]{CombinedChart.DrawOrder.LINE, CombinedChart.DrawOrder.BAR}); //点击是显示的marker值 MyMarkerView mv = new MyMarkerView(context, R.layout.custom_marker_view); mv.setChartView(mChart); // For bounds control mChart.setMarker(mv); // Set the marker to the chart //图例 Legend l = mChart.getLegend(); l.setEnabled(true); //是否启用图列（true：下面属性才有意义） l.setWordWrapEnabled(true); //设置图列换行(注意使用影响性能,仅适用legend位于图表下面) l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP); l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT); l.setOrientation(Legend.LegendOrientation.HORIZONTAL); // l.setForm(Legend.LegendForm.DEFAULT); //设置图例的形状 l.setFormSize(10); //设置图例的大小 l.setFormToTextSpace(2f); //设置每个图例实体中标签和形状之间的间距 l.setDrawInside(false); l.setXEntrySpace(18f); //设置图例实体之间延X轴的间距（setOrientation = HORIZONTAL有效） l.setYEntrySpace(8f); //设置图例实体之间延Y轴的间距（setOrientation = VERTICAL 有效） l.setXOffset(5f); l.setYOffset(0f); //设置比例块Y轴偏移量 l.setTextSize(10f); //设置图例标签文本的大小 l.setTextColor(Color.parseColor("#888888"));//设置图例标签文本的颜色 //左边的Y轴 YAxis leftAxis = mChart.getAxisLeft(); leftAxis.setDrawGridLines(false); //是否显示Y轴网格线 leftAxis.setAxisMinimum(0f); //Y轴的最小值 leftAxis.setTextColor(Color.parseColor("#888888")); //Y轴文字颜色 leftAxis.setLabelCount(10); //Y轴显示的值个数 leftAxis.setAxisLineColor(Color.TRANSPARENT); //Y轴线颜色 leftAxis.setValueFormatter(new MyYAxisValueFormatter(leftYUnit)); //右边的Y轴 YAxis rightAxis = mChart.getAxisRight(); rightAxis.setDrawGridLines(false); //是否显示Y轴网格线 rightAxis.setTextColor(Color.parseColor("#888888")); //Y轴文字颜色 // rightAxis.setAxisMinimum(0f); //Y轴的最小值 // rightAxis.setAxisMaximum(120); //设置Y轴最大值 rightAxis.setLabelCount(10); //Y轴显示的值个数 rightAxis.setAxisLineColor(Color.TRANSPARENT); //Y轴线颜色 rightAxis.setDrawZeroLine(false); //是否显示0值的轴线 rightAxis.setGranularityEnabled(false); rightAxis.setValueFormatter(new MyYAxisValueFormatter(rightYUnit)); if (null == lineEntries1) { rightAxis.setEnabled(false); } //底部X轴 XAxis xAxis = mChart.getXAxis(); xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setDrawGridLines(false); xAxis.setAxisMinimum(0f); //设置轴的最小值。这样设置将不会根据提供的数据自动计算。 xAxis.setGranularity(1f); //缩放的时候有用，比如放大的时候，我不想把横轴的月份再细分 xAxis.setGranularityEnabled(true); xAxis.setCenterAxisLabels(true); //字体下面的标签 显示在每个直方图的中间 xAxis.setTextColor(Color.parseColor("#FFFFFF")); xAxis.setValueFormatter(new IndexAxisValueFormatter(quarters));//X轴文字 xAxis.setAxisLineColor(Color.TRANSPARENT); //X轴线颜色 xAxis.setXAxisBackground(Color.parseColor("#A3A3A3")); // xAxis.setAxisLineWidth(10f); xAxis.setYOffset(1.5f); // xAxis.setAxisMaximum((float) (12 - 0.5)); //以下是为了解决 柱状图 左右两边只显示了一半的问题 根据实际情况 而定 xAxis.setDrawLabels(true); //绘制标签 指x轴上的对应数值 xAxis.setAvoidFirstLastClipping(false);//图表将避免第一个和最后一个标签条目被减掉在图表或屏幕的边缘 xAxis.setLabelCount((int)data.getXMax(), false); //一个界面显示几个Lable if (null != lineEntries1) { xAxis.setAxisMaximum(data.getXMax() + 0.5f); } else { xAxis.setAxisMaximum(data.getXMax() + 1.0f); } //动画 mChart.animateXY(2000, 2000); mChart.setData(data); mChart.invalidate(); } /** * 加载线条的数据 * * @return */ private LineData generateLineData(String label1, String label2) { LineData d = new LineData(); if (null != lineEntries1) { LineDataSet set1 = new LineDataSet(lineEntries1, label1); //新建线条数据，并设置示例文字 set1.setColor(MyChartColorTheme.GRAY_COLOR); //线条颜色 set1.setLineWidth(0.5f); //线条宽度 set1.setDrawCircles(false); //是否显示圆点 set1.setCircleColor(Color.GRAY); //圆点颜色 set1.setCircleRadius(0.8f); //圆点半径 set1.setDrawFilled(true); //是否颜色填充 set1.setFillColor(MyChartColorTheme.GRAY_COLOR); //填充颜色 set1.setFillAlpha(100); set1.setMode(LineDataSet.Mode.CUBIC_BEZIER); //转折点为曲线 set1.setDrawValues(false); //显示数值 set1.setValueTextSize(8f); //数值字体大小 set1.setValueTextColor(MyChartColorTheme.GRAY_COLOR); //数值的颜色 set1.setAxisDependency(YAxis.AxisDependency.RIGHT); //以右边Y轴的标签绘制 d.addDataSet(set1); } if (null != lineEntries2){ LineDataSet set2 = new LineDataSet(lineEntries2, label2); //新建线条数据，并设置示例文字 set2.setColor(MyChartColorTheme.DRAY_COLOR); //线条颜色 set2.setLineWidth(0.5f); //线条宽度 set2.setDrawCircles(false); //是否显示圆点 set2.setCircleColor(Color.GRAY); //圆点颜色 set2.setCircleRadius(0.8f); //圆点半径 set2.setDrawFilled(true); //是否颜色填充 set2.setFillColor(MyChartColorTheme.DRAY_COLOR); //填充颜色 set2.setFillAlpha(100); set2.setMode(LineDataSet.Mode.CUBIC_BEZIER); //转折点为曲线 set2.setDrawValues(false); //显示数值 set2.setValueTextSize(8f); //数值字体大小 set2.setValueTextColor(MyChartColorTheme.DRAY_COLOR); //数值的颜色 set2.setAxisDependency(YAxis.AxisDependency.RIGHT); //以右边Y轴的标签绘制 d.addDataSet(set2); } return d; } /** * 加载矩形的数据 * * @return */ private BarData generateBarData(String label1, String label2) { BarData barData = new BarData(); if (null != barEntries1) { BarDataSet barDataSet = new BarDataSet(barEntries1, label1); //新建数据，并设置示例文字 barDataSet.setColor(MyChartColorTheme.RED_COLOR); //柱状颜色 barDataSet.setBarBorderRadius(10f); //设置圆角矩形 barDataSet.setDrawValues(false); barDataSet.setValueTextSize(8f); //数值字体大小 barDataSet.setValueTextColor(MyChartColorTheme.RED_COLOR); //数值的颜色//是否显示数值 barDataSet.setAxisDependency(YAxis.AxisDependency.LEFT); //以左边Y轴的标签绘制 barData.addDataSet(barDataSet); } if (null != barEntries2) { BarDataSet barDataSet2 = new BarDataSet(barEntries2, label2); //新建数据，并设置示例文字 barDataSet2.setColor(MyChartColorTheme.TGAY_COLOR); //柱状颜色 barDataSet2.setBarBorderRadius(10f); //设置圆角矩形 barDataSet2.setDrawValues(false); barDataSet2.setValueTextSize(8f); //数值字体大小 barDataSet2.setValueTextColor(MyChartColorTheme.TGAY_COLOR); //数值的颜色//是否显示数值 barDataSet2.setAxisDependency(YAxis.AxisDependency.LEFT); //以左边Y轴的标签绘制 barData.addDataSet(barDataSet2); } barData.setBarWidth(0.41f); barData.groupBars(0, 0.14f, 0.02f); return barData; } }