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

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

先来看一下效果

• 设置基础属性

//设置每个直方图阴影为falsemBarChart.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 controlmv.setChartView(mBarChart);// Set the marker to the chartmBarChart.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();    }

分组直方图的展示结果