實現柱狀圖與條形圖的結合，MPAndroidChart的簡單使用
阿新 • • 發佈：2018-11-10
先貼效果圖：
這種樣式的統計表格也是比較常用的，下面直接貼程式碼：
public class ChartActivity extends BaseActivity { @BindView(R.id.chart1) MyCombinedChart mChart1;//完成情況 private final int itemcount = 3; protected String[] mMonths = new String[]{"張三", "李四", "王五"};//X軸標籤 private List<Float> lineDatas;//線圖資料來源private List<float[]> barDatas;//堆圖資料來源 @Override public void init(Bundle savedInstanceState) { setContentView(R.layout.activity_chart,this); initTitleBar(R.id.title,"報表"); setChart1(); } /** * 配置維修單完成情況 */ private void setChart1() { configChart(mChart1); } private void configChart(MyCombinedChart mChart){ mChart.setDrawValueAboveBar(false); mChart.getDescription().setEnabled(false);//不顯示錶名 // mChart.getDescription().setPosition();//設定表名在螢幕中的位置 mChart.setBackgroundColor(Color.WHITE); mChart.setDrawGridBackground(false); mChart.setDrawBarShadow(false); mChart.setScaleYEnabled(false);//Y軸方向上不允許拉伸 mChart.setHighlightFullBarEnabled(false); // draw bars behind lines設定繪製順序，重疊部分的圖案後繪製的會遮擋先繪製的 mChart.setDrawOrder(new CombinedChart.DrawOrder[]{ CombinedChart.DrawOrder.BAR, CombinedChart.DrawOrder.LINE }); //圖例 Legend l = mChart.getLegend(); l.setWordWrapEnabled(true); l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER); l.setOrientation(Legend.LegendOrientation.HORIZONTAL); l.setDrawInside(false); //設定右邊Y軸標籤 YAxis rightAxis = mChart.getAxisRight(); rightAxis.setAxisMaximum(100);//設定最大數值 rightAxis.setLabelCount(6, true);//設定標籤數量 rightAxis.setValueFormatter(new MyAxisValueFormatter());//設定數值顯示格式 rightAxis.setDrawGridLines(true);//繪製網格線 rightAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true) //設定左邊Y軸標籤 YAxis leftAxis = mChart.getAxisLeft(); leftAxis.setAxisMaximum(20); leftAxis.setLabelCount(6, true); leftAxis.setDrawGridLines(true); leftAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true) //設定X軸標籤 XAxis xAxis = mChart.getXAxis(); xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setAxisMinimum(0f); xAxis.setGranularity(1f); xAxis.setDrawGridLines(false); xAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { if (value==0||value==mMonths.length+1){ return ""; } return mMonths[(int) (value-1) % mMonths.length]; } @Override public int getDecimalDigits() { return 0; } }); CombinedData data = new CombinedData(); data.setData(generateBarData()); data.setData(generateLineData()); //設定字型樣式 // data.setValueTypeface(mTfLight); xAxis.setAxisMaximum(data.getXMax() + 1);//最大寬度另加1個單元格的寬度 mChart.setData(data); mChart.invalidate(); } private LineData generateLineData() { lineDatas = new ArrayList<>(); for (int i = 0; i < barDatas.size(); i++) { lineDatas.add(barDatas.get(i)[0] / (plus(barDatas.get(i))) * 100); } LineData d = new LineData(); ArrayList<Entry> entries = new ArrayList<Entry>(); //傳入資料 for (int index = 0; index < itemcount; index++) entries.add(new Entry(index + 1, lineDatas.get(index))); LineDataSet set = new LineDataSet(entries, "完成率"); set.setColor(getResources().getColor(R.color.chart_green)); set.setLineWidth(2.5f); set.setCircleColor(Color.rgb(240, 238, 70)); set.setCircleRadius(5f); set.setFillColor(Color.rgb(240, 238, 70)); set.setMode(LineDataSet.Mode.LINEAR); set.setDrawValues(true); set.setValueTextSize(10f); set.setValueTextColor(getResources().getColor(R.color.black));//設定內容字型顏色 set.setAxisDependency(YAxis.AxisDependency.RIGHT);//以右邊Y軸的標籤繪製 d.addDataSet(set); MyValueFormatter format = new MyValueFormatter(); d.setValueFormatter(format); return d; } private float plus(float[] f) { float plus = 0; for (float aF : f) { plus += aF; } return plus; } private BarData generateBarData() { barDatas = new ArrayList<>(); barDatas.add(new float[]{6, 8}); barDatas.add(new float[]{15, 4}); barDatas.add(new float[]{11, 7}); ArrayList<BarEntry> entries2 = new ArrayList<>(); for (int index = 0; index < itemcount; index++) { // stacked entries2.add(new BarEntry(index + 1, barDatas.get(index))); } BarDataSet set2 = new BarDataSet(entries2, ""); set2.setStackLabels(new String[]{"已完成", "未完成"}); set2.setColors(getResources().getColor(R.color.chart_blue),getResources().getColor(R.color.chart_red)); set2.setValueTextColor(getResources().getColor(R.color.black)); set2.setValueTextSize(10f); set2.setAxisDependency(YAxis.AxisDependency.LEFT);//以左邊Y軸的標籤繪製 float barWidth = 0.45f; // x2 dataset BarData d = new BarData(set2); d.setBarWidth(barWidth); return d; }
class MyAxisValueFormatter implements IAxisValueFormatter { private DecimalFormat mFormat; public MyAxisValueFormatter() { mFormat = new DecimalFormat("###,###,###,##0.0"); } @Override public String getFormattedValue(float value, AxisBase axis) { return mFormat.format(value) + "%"; } //小數點後數字個數 @Override public int getDecimalDigits() { return 0; } }
class MyValueFormatter implements IValueFormatter { private DecimalFormat mFormat; public MyValueFormatter() { mFormat = new DecimalFormat("###,###,###,##0.0"); } @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { //百分比顯示 return mFormat.format(value)+ "%" ; } }
class MyYAxis extends YAxis { public MyYAxis() { super(); } public MyYAxis(AxisDependency position) { super(position); } @Override public String getFormattedLabel(int index) { if (index < 0 || index >= mEntries.length) return ""; else { float max=mEntries[0]; for (int i=1;i<mEntries.length;i++){ Log.d("test", "getFormattedLabel: "+mEntries[i]); if (mEntries[i]>max){ max=mEntries[i]; } } return getValueFormatter().getFormattedValue(mEntries[index] /max*100, this); } } }
}
public class MyCombinedChart extends CombinedChart { public MyCombinedChart(Context context) { super(context); } public MyCombinedChart(Context context, AttributeSet attrs) { super(context, attrs); } public MyCombinedChart(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override public YAxis getAxisRight() { return super.getAxisRight(); } @Override protected void init() { super.init(); mAxisLeft = new YAxis(YAxis.AxisDependency.LEFT); mAxisRight = new MyYAxis(MyYAxis.AxisDependency.RIGHT); mLeftAxisTransformer = new Transformer(mViewPortHandler); mRightAxisTransformer = new Transformer(mViewPortHandler); mAxisRendererLeft = new YAxisRenderer(mViewPortHandler, mAxisLeft, mLeftAxisTransformer); mAxisRendererRight = new YAxisRenderer(mViewPortHandler, mAxisRight, mRightAxisTransformer); mXAxisRenderer = new XAxisRenderer(mViewPortHandler, mXAxis, mLeftAxisTransformer); setHighlighter(new ChartHighlighter(this)); mChartTouchListener = new BarLineChartTouchListener(this, mViewPortHandler.getMatrixTouch(), 3f); mGridBackgroundPaint = new Paint(); mGridBackgroundPaint.setStyle(Paint.Style.FILL); // mGridBackgroundPaint.setColor(Color.WHITE); mGridBackgroundPaint.setColor(Color.rgb(240, 240, 240)); // light // grey mBorderPaint = new Paint(); mBorderPaint.setStyle(Paint.Style.STROKE); mBorderPaint.setColor(Color.BLACK); mBorderPaint.setStrokeWidth(Utils.convertDpToPixel(1f)); } }