MPAndroidChart简单教你画柱形图与折线图相结合

话不多说先上效果

看效果是不是很炫酷呢

咱们今天教大家的就是这种相结合的图表

依赖什么的可以去我上篇博客里查看

首先是布局

  <com.github.mikephil.charting.charts.CombinedChart
               android:id="@+id/mChart"
               android:layout_width="match_parent"
               android:layout_height="match_parent" />

在activity里紧接着就是传入数据

   List<QualityAnalysisEntity> body = viewModel.qualityAnalysisBeanObservableList.get().getBody().get(0);
   initDefaultBarChart(mChart,body);

继续往下来

 private void initDefaultBarChart(CombinedChart mChart, List<QualityAnalysisEntity> body) {


        mChart.setDrawBorders(true); // 显示边界
        mChart.getDescription().setEnabled(false);  // 不显示备注信息
        mChart.setPinchZoom(true); // 比例缩放
        mChart.animateY(1500);

        XAxis xAxis = mChart.getXAxis();
        xAxis.setDrawGridLines(false);
        /*解决左右两端柱形图只显示一半的情况 只有使用CombinedChart时会出现，如果单独使用BarChart不会有这个问题*/
        xAxis.setAxisMinimum(-0.5f);
        xAxis.setAxisMaximum(body.size() - 0.5f);

        xAxis.setLabelCount(body.size()); // 设置X轴标签数量
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // 设置X轴标签位置，BOTTOM在底部显示，TOP在顶部显示
       /* xAxis.setValueFormatter(new IAxisValueFormatter() { // 转换要显示的标签文本，value值默认是int从0开始
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return suppliers[(int) value];
            }
        });*/


        YAxis axisLeft = mChart.getAxisLeft(); // 获取左边Y轴操作类
        axisLeft.setAxisMinimum(0); // 设置最小值
        axisLeft.setGranularity(10); // 设置Label间隔
        axisLeft.setLabelCount(10);// 设置标签数量
        axisLeft.setValueFormatter(new IAxisValueFormatter() { // 在左边Y轴标签文本后加上%号
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return value + "%";
            }
        });

        YAxis axisRight = mChart.getAxisRight(); // 获取右边Y轴操作类
        axisRight.setDrawGridLines(false); // 不绘制背景线，上面左边Y轴并没有设置此属性，因为不设置默认是显示的
        axisRight.setGranularity(10); // 设置Label间隔
        axisRight.setAxisMinimum(0); // 设置最小值
        axisRight.setLabelCount(20); // 设置标签个数
        axisRight.setValueFormatter(new IAxisValueFormatter() { // 在右边Y轴标签文本后加上%号
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return value + "%";
            }
        });

        /**
         * 初始化柱形图的数据
         * 此处用suppliers的数量做循环，因为总共所需要的数据源数量应该和标签个数一致
         * 其中BarEntry是柱形图数据源的实体类，包装xy坐标数据
         */
        /******************BarData start********************/
        List<BarEntry> barAdvisable = new ArrayList<>();
        List<BarEntry> barMild = new ArrayList<>();
        List<BarEntry> barSerious = new ArrayList<>();
        List<BarEntry> barProperties = new ArrayList<>();
        List<BarEntry> barVarietie = new ArrayList<>();
        if (body != null && body.size() != 0) {
            for (int i = 0; i < body.size(); i++) {
                double advisable = body.get(i).getAdvisable();
                barAdvisable.add(new BarEntry(i, (float)advisable));
//
                double mildInadvisable = body.get(i).getMildInadvisable();
                barMild.add(new BarEntry(i, (float)mildInadvisable));
//
                double seriousInadvisable = body.get(i).getSeriousInadvisable();
                barSerious.add(new BarEntry(i, (float)seriousInadvisable));

            double properties = body.get(i).getProperties();
            barProperties.add(new BarEntry(i, (float)properties));

//                double varietie = body.get(i).getVarietie();
//                barVarietie.add(new BarEntry(i, (float)varietie));
            }
        }else {
            return;
        }


        BarDataSet propertiesDataSet = new BarDataSet(barProperties, "");  // 新建一组柱形图，"LAR"为本组柱形图的Label
        propertiesDataSet.setColor(Color.parseColor("#eaa510")); // 设置柱形图颜色
        propertiesDataSet.setValueTextColor(Color.parseColor("#eaa510")); //  设置柱形图顶部文本颜色


        BarDataSet barDataSet = new BarDataSet(barAdvisable, "");  // 新建一组柱形图，"LAR"为本组柱形图的Label
        barDataSet.setColor(Color.parseColor("#0288d1")); // 设置柱形图颜色
        barDataSet.setValueTextColor(Color.parseColor("#0288d1")); //  设置柱形图顶部文本颜色
        // 添加一组柱形图，如果有多组柱形图数据，则可以多次addDataSet来设置

        BarDataSet mildDataSet = new BarDataSet(barMild, "");  // 新建一组柱形图，"LAR"为本组柱形图的Label
        mildDataSet.setColor(Color.parseColor("#11de0a")); // 设置柱形图颜色
        mildDataSet.setValueTextColor(Color.parseColor("#11de0a")); //  设置柱形图顶部文本颜色


        BarDataSet seriousDataSet = new BarDataSet(barSerious, "");  // 新建一组柱形图，"LAR"为本组柱形图的Label
        seriousDataSet.setColor(Color.parseColor("#eaa510")); // 设置柱形图颜色
        seriousDataSet.setValueTextColor(Color.parseColor("#eaa510")); //  设置柱形图顶部文本颜色

        BarDataSet varietieDataSet = new BarDataSet(barVarietie, "");  // 新建一组柱形图，"LAR"为本组柱形图的Label
        varietieDataSet.setColor(Color.parseColor("#ea4c12")); // 设置柱形图颜色
        varietieDataSet.setValueTextColor(Color.parseColor("#ea4c12")); //  设置柱形图顶部文本颜色

        //保存LineDataSet集合
        ArrayList<IBarDataSet> dataSets = new ArrayList<>();
        dataSets.add(barDataSet);
        dataSets.add(mildDataSet);
        dataSets.add(seriousDataSet);
        //dataSets.add(varietieDataSet);
        dataSets.add(propertiesDataSet);

        /******************BarData end********************/

        /**
         * 初始化折线图数据
         * 说明同上
         */
        /******************LineData start********************/
        List<Entry> lineEntries = new ArrayList<>();
        if (body != null && body.size() != 0) {
            for (int i = 0; i < body.size(); i++) {

                //宜存率
                double advisable = body.get(i).getAdvisable();
                lineEntries.add(new BarEntry(i, (float)advisable));


//                double properties = body.get(i).getProperties();
//                lineEntries.add(new BarEntry(i, (float)properties));
            }
        }else {
            return;
        }
        LineDataSet lineDataSet = new LineDataSet(lineEntries, "宜存率");
        lineDataSet.setColor(Color.parseColor("#b71c1c"));
        lineDataSet.setCircleColor(Color.parseColor("#b71c1c"));
        lineDataSet.setValueTextColor(Color.parseColor("#f44336"));
        lineDataSet.setLineWidth(1f);
        lineDataSet.setHighlightEnabled(false);
        LineData lineData = new LineData();
        lineData.addDataSet(lineDataSet);
        /******************LineData end********************/
        float groupSpace = 0.12f; //柱状图组之间的间距
        float barSpace =  0.02f; // x4
        float barWidth = 0.2f;
        CombinedData combinedData = new CombinedData(); // 创建组合图的数据源
        BarData barData = new BarData(dataSets);
        combinedData.setData(barData);  // 添加柱形图数据源
        combinedData.setData(lineData); // 添加折线图数据源
        //柱状图宽度
        barData.setBarWidth(barWidth);
        // (起始点、柱状图组间距、柱状图之间间距)
        barData.groupBars(0, groupSpace, barSpace);
        mChart.setData(combinedData); // 为组合图设置数据源


    }

这样就能够实现折线与柱形相结合 是不是很棒呢
感谢大家的支持！