MPAndroidChart直方图（BarChart），渐变，左右滑动

上一篇单个直方图
上一篇多组直方图

先来看一下效果

• 设置基础属性

//设置每个直方图阴影为false
mBarChart.setDrawBarShadow(false);
//这里设置为true每一个直方图的值就会显示在直方图的顶部
mBarChart.setDrawValueAboveBar(false);
//设置描述不显示
mBarChart.getDescription().setEnabled(false);
mBarChart.setPinchZoom(false);
//设置不显示网格
mBarChart.setDrawGridBackground(false);
//设置图表的背景颜色
mBarChart.setBackgroundColor(ColorAndImgUtils.CHART_BACKGROUND_COLOR);
//手机屏幕上显示6剩下的滑动直方图然后显示
float ratio = (float) xValueList.size()/(float) 7;
//显示的时候是按照多大的比率缩放显示，1f表示不放大缩小
mBarChart.zoom(ratio,1f,0,0);
//从Y轴弹出的动画时间
mBarChart.animateY(1500);
//设置是否可以缩放
mBarChart.setScaleEnabled(false);
//设置是否可以触摸
mBarChart.setTouchEnabled(true);
//设置是否可以拖拽
mBarChart.setDragEnabled(true);

• 设置图例

//获取图例对象
Legend legend = mBarChart.getLegend();
//设置图例不显示
legend.setEnabled(false);

• 设置X轴

//自定义设置横坐标
IAxisValueFormatter xValueFormatter = new FastBrowserXValueFormatter(xValueList);
//设置不显示网格线，保留水平线
XAxis xAxis = mBarChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawAxisLine(false);
xAxis.setDrawGridLines(false);
xAxis.setGridColor(ColorAndImgUtils.GRID_COLOR);
xAxis.setGridLineWidth(1);
//设置为true当一个页面显示条目过多，X轴值隔一个显示一个
xAxis.setGranularityEnabled(true);
//设置最小间隔，防止当放大时，出现重复标签。
xAxis.setGranularity(1f);
//一个界面显示6个Lable。那么这里要设置7个
xAxis.setLabelCount(7);
//将自定义的横坐标设置上去
xAxis.setValueFormatter(xValueFormatter);
//设置X轴字体显示角度
xAxis.setLabelRotationAngle(45f);
xAxis.setTextSize(10f);
xAxis.setTextColor(ColorAndImgUtils.FAST_BW_TEXT_COLOR);

• 设置Y轴

//左边Y轴
YAxis leftYAxis = mBarChart.getAxisLeft();
//设置从Y轴左侧发出横线
leftYAxis.setDrawGridLines(true);
//设置网格线的颜色
leftYAxis.setGridColor(ColorAndImgUtils.GRID_COLOR);
leftYAxis.setGridLineWidth(1);
leftYAxis.setAxisMinimum(0f);
//设置显示左边Y坐标
leftYAxis.setEnabled(true);
leftYAxis.setTextSize(12f);
leftYAxis.setTextColor(ColorAndImgUtils.FAST_BW_TEXT_COLOR);
//设置Y轴的颜色
leftYAxis.setAxisLineColor(ColorAndImgUtils.GRID_COLOR);
//设置Y轴的宽度
leftYAxis.setAxisLineWidth(1f);
//如果沿着轴线的线应该被绘制，则将其设置为true,显示隐藏Y轴
leftYAxis.setDrawAxisLine(false);
//右边Y轴
YAxis rightYAxis = mBarChart.getAxisRight();
//设置隐藏右边y坐标
rightYAxis.setEnabled(false);

• 设置MarkView

CustomMarkView mv = new CustomMarkView(getActivity(), R.layout.bar_chart_custom_marker_view);
// For bounds control
mv.setChartView(mBarChart);
// Set the marker to the chart
mBarChart.setMarker(mv);

• 设置值

private void setData(ArrayList<String> xValueList, ArrayList<Integer> yValueList) {
        ArrayList<BarEntry> yValues = new ArrayList<>();
        for(int i=0;i<xValueList.size();i++){
            yValues.add(new BarEntry(i,yValueList.get(i)));
        }
        BarDataSet set;
        if(mBarChart.getData()!=null && mBarChart.getData().getDataSetCount()>0){
            set = (BarDataSet) mBarChart.getData().getDataSetByIndex(0);
            set.setValues(yValues);
            mBarChart.getData().notifyDataChanged();
            mBarChart.notifyDataSetChanged();
        }else{
            set = new BarDataSet(yValues,"");
            //设置直方图上面时候显示图标
            set.setDrawIcons(false);
            //设置点击之后显示的颜色
            set.setHighLightColor(ColorAndImgUtils.HIGH_LIGHT_COLOR);
            //设置颜色
            set.setColors(ColorAndImgUtils.ONE_COLOR,ColorAndImgUtils.BASE_COLOR_TWO);
            ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
            dataSets.add(set);

            BarData data = new BarData(dataSets);
            //设置顶部值是否显示
            data.setDrawValues(false);
            //默认是0.85f
            data.setBarWidth(0.6f);

            mBarChart.setData(data);
            mBarChart.invalidate();
        }
    }

展示结果

分组的直方图，区别也是数据设置那里的问题

private void setData(ArrayList<String> xValueList, ArrayList<ArrayList<Integer>> yValueList) {
        float groupSpace = 0.12f; //柱状图组之间的间距
        float barSpace = (float) ((1 - 0.12) / yValueList.size() / 10); // x4 DataSet
        //按照这个公式来计算
        float barWidth = (float) ((1 - 0.12) / yValueList.size() / 10 * 9); // x4 DataSet
        // (barWidth + barSpace)*4 + groupSpace = 1.00 -> interval per "group"
        int startYear = 0;
        ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
        for(int i=0;i<yValueList.size();i++){
            ArrayList<BarEntry> yValues = new ArrayList<>();
            for(int j=0;j<xValueList.size();j++){
                yValues.add(new BarEntry(j,yValueList.get(i).get(j)));
            }
            BarDataSet set = new BarDataSet(yValues,nameList.get(i));
            set.setDrawIcons(false);//设置直方图上面时候显示图标
            //set.setColor(mColors[i%mColors.length]);
            set.setColors(ColorAndImgUtils.ALL_COLORS[i%ColorAndImgUtils.ALL_COLORS.length], ColorAndImgUtils.BASE_COLOR_TWO);
            set.setHighLightColor(ColorAndImgUtils.HIGH_LIGHT_COLOR);//设置点击之后显示的颜色
            dataSets.add(set);
        }
        BarData data = new BarData(dataSets);
        data.setValueFormatter(new LargeValueFormatter());
        //data.setValueTextSize(10f);//设置直方图上面文字的大小
        //data.setBarWidth(0.9f);//设置直方图的宽度
        //data.setValueTextColor(Color.WHITE);
        data.setBarWidth(barWidth);//直方图的宽度
        data.setDrawValues(false);//设置直方图顶部值的显示与隐藏
        mBarChart.setData(data);

        mBarChart.getBarData().setBarWidth(barWidth);
        // restrict the x-axis range
        mBarChart.getXAxis().setAxisMinimum(startYear);
        // barData.getGroupWith(...) is a helper that calculates the width each group needs based on the provided parameters
        mBarChart.getXAxis().setAxisMaximum(startYear + mBarChart.getBarData().getGroupWidth(groupSpace, barSpace) * xValueList.size());
        //起始点、直方图组间距、直方图之间的间距
        mBarChart.groupBars(startYear, groupSpace, barSpace);
        mBarChart.invalidate();

    }

分组直方图的展示结果