Android图表库MPAndroidChart(四)——条形图的绘制过程过程,隐隐约约我看到了套路

在学习本课程之前我建议先把我之前的博客看完，这样对整体的流程有一个大致的了解

好的，那我们直接进入正题，我们今天要学习的是又一个比较常用的图形，那就是条形图，我们之前纸条介绍的，应该算是折线图的一种，我们来看下今天要实现的效果

一.基本实现

这就是最终要实现的效果，我们依葫芦画瓢，来实现以下，首先，我们先写下他的layout

他的名字叫做BarChart，我们还是按照一贯的套路，先去给他初始化

//条形图        mBarChart = (BarChart) findViewById(R.id.mBarChart);        //设置表格上的点，被点击的时候，的回调函数        mBarChart.setOnChartValueSelectedListener(this);        mBarChart.setDrawBarShadow(false);        mBarChart.setDrawValueAboveBar(true);        mBarChart.getDescription().setEnabled(false);        // 如果60多个条目显示在图表,drawn没有值        mBarChart.setMaxVisibleValueCount(60);        // 扩展现在只能分别在x轴和y轴        mBarChart.setPinchZoom(false);        //是否显示表格颜色        mBarChart.setDrawGridBackground(false);

按照惯例，给他一些手势，点击之类的监听，然后绘制我们的x和y轴，这里我们可以绘制一条也可以绘制两条，因为定制型还是比较强的，所有我们这里绘制两条

XAxis xAxis = mBarChart.getXAxis();        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);        xAxis.setDrawGridLines(false);        // 只有1天的时间间隔        xAxis.setGranularity(1f);        xAxis.setLabelCount(7);        xAxis.setAxisMaximum(50f);        xAxis.setAxisMinimum(0f);        xAxis.setValueFormatter(xAxisFormatter);        YAxis leftAxis = mBarChart.getAxisLeft();        leftAxis.setLabelCount(8, false);        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);        leftAxis.setSpaceTop(15f);        //这个替换setStartAtZero(true)        leftAxis.setAxisMinimum(0f);        leftAxis.setAxisMaximum(50f);        YAxis rightAxis = mBarChart.getAxisRight();        rightAxis.setDrawGridLines(false);        rightAxis.setLabelCount(8, false);        rightAxis.setSpaceTop(15f);        rightAxis.setAxisMinimum(0f);        rightAxis.setAxisMaximum(50f);

然后依次绘制他的线条以及模拟一些数据

// 设置标示，就是那个一组y的value的        Legend l = mBarChart.getLegend();        l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);        l.setOrientation(Legend.LegendOrientation.HORIZONTAL);        l.setDrawInside(false);        //样式        l.setForm(Legend.LegendForm.SQUARE);        //字体        l.setFormSize(9f);        //大小        l.setTextSize(11f);        l.setXEntrySpace(4f);        //模拟数据        ArrayList
     
       yVals1 = new ArrayList
      
       ();        yVals1.add(new BarEntry(0, 10));        yVals1.add(new BarEntry(5, 20));        yVals1.add(new BarEntry(16, 30));        yVals1.add(new BarEntry(18, 40));        yVals1.add(new BarEntry(20, 50));        yVals1.add(new BarEntry(22, 10));        yVals1.add(new BarEntry(25, 20));        yVals1.add(new BarEntry(28, 30));        yVals1.add(new BarEntry(30, 40));        setData(yVals1);
      
     

现在再来看下怎么设置数据的

//设置数据    private void setData(ArrayList yVals1) {        float start = 1f;        BarDataSet set1;        if (mBarChart.getData() != null &&                mBarChart.getData().getDataSetCount() > 0) {            set1 = (BarDataSet) mBarChart.getData().getDataSetByIndex(0);            set1.setValues(yVals1);            mBarChart.getData().notifyDataChanged();            mBarChart.notifyDataSetChanged();        } else {            set1 = new BarDataSet(yVals1, "2017年工资涨幅");            //设置有四种颜色            set1.setColors(ColorTemplate.MATERIAL_COLORS);            ArrayList
     
       dataSets = new ArrayList
      
       ();            dataSets.add(set1);            BarData data = new BarData(dataSets);            data.setValueTextSize(10f);            data.setBarWidth(0.9f);            //设置数据            mBarChart.setData(data);        }    }
      
     

和之前的图形一样，我们把数据集放进我们的图标里就行，可以看到，我这里描述的很轻描淡写，因为我们画图表都是一样的套路，而且你最后总结出来的api也是一样的，只是每次变换的图形不一样而已

二.显示顶点值

三.x轴动画

四.y轴动画

五.xy轴动画

六.显示边框

这就是基本的使用方法了，如果你不需要什么属性，你就删掉，如果你需要什么属性，你就增加，就是这样，非常的简单好用，现在把基本的代码奉上

activity_barchar.xml

BarChartActivity

public class BarChartActivity extends BaseActivity implements OnChartValueSelectedListener, View.OnClickListener {
         private BarChart mBarChart;    //显示顶点值    private Button btn_show_values;    //x轴动画    private Button btn_anim_x;    //y轴动画    private Button btn_anim_y;    //xy轴动画    private Button btn_anim_xy;    //保存到sd卡    private Button btn_save_pic;    //切换自动最大最小值    private Button btn_auto_mix_max;    //高亮显示    private Button btn_actionToggleHighlight;    //显示边框    private Button btn_actionToggleBarBorders;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_barchar);        initView();    }    //初始化    private void initView() {        //基本控件        btn_show_values = (Button) findViewById(R.id.btn_show_values);        btn_show_values.setOnClickListener(this);        btn_anim_x = (Button) findViewById(R.id.btn_anim_x);        btn_anim_x.setOnClickListener(this);        btn_anim_y = (Button) findViewById(R.id.btn_anim_y);        btn_anim_y.setOnClickListener(this);        btn_anim_xy = (Button) findViewById(R.id.btn_anim_xy);        btn_anim_xy.setOnClickListener(this);        btn_save_pic = (Button) findViewById(R.id.btn_save_pic);        btn_save_pic.setOnClickListener(this);        btn_auto_mix_max = (Button) findViewById(R.id.btn_auto_mix_max);        btn_auto_mix_max.setOnClickListener(this);        btn_actionToggleHighlight = (Button) findViewById(R.id.btn_actionToggleHighlight);        btn_actionToggleHighlight.setOnClickListener(this);        btn_actionToggleBarBorders = (Button) findViewById(R.id.btn_actionToggleBarBorders);        btn_actionToggleBarBorders.setOnClickListener(this);        //条形图        mBarChart = (BarChart) findViewById(R.id.mBarChart);        //设置表格上的点，被点击的时候，的回调函数        mBarChart.setOnChartValueSelectedListener(this);        mBarChart.setDrawBarShadow(false);        mBarChart.setDrawValueAboveBar(true);        mBarChart.getDescription().setEnabled(false);        // 如果60多个条目显示在图表,drawn没有值        mBarChart.setMaxVisibleValueCount(60);        // 扩展现在只能分别在x轴和y轴        mBarChart.setPinchZoom(false);        //是否显示表格颜色        mBarChart.setDrawGridBackground(false);        IAxisValueFormatter xAxisFormatter = new DayAxisValueFormatter(mBarChart);        XAxis xAxis = mBarChart.getXAxis();        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);        xAxis.setDrawGridLines(false);        // 只有1天的时间间隔        xAxis.setGranularity(1f);        xAxis.setLabelCount(7);        xAxis.setAxisMaximum(50f);        xAxis.setAxisMinimum(0f);        xAxis.setValueFormatter(xAxisFormatter);        //设置悬浮        XYMarkerView mv = new XYMarkerView(this, xAxisFormatter);        mv.setChartView(mBarChart);        mBarChart.setMarker(mv);        YAxis leftAxis = mBarChart.getAxisLeft();        leftAxis.setLabelCount(8, false);        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);        leftAxis.setSpaceTop(15f);        //这个替换setStartAtZero(true)        leftAxis.setAxisMinimum(0f);        leftAxis.setAxisMaximum(50f);        YAxis rightAxis = mBarChart.getAxisRight();        rightAxis.setDrawGridLines(false);        rightAxis.setLabelCount(8, false);        rightAxis.setSpaceTop(15f);        rightAxis.setAxisMinimum(0f);        rightAxis.setAxisMaximum(50f);        // 设置标示，就是那个一组y的value的        Legend l = mBarChart.getLegend();        l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);        l.setOrientation(Legend.LegendOrientation.HORIZONTAL);        l.setDrawInside(false);        //样式        l.setForm(Legend.LegendForm.SQUARE);        //字体        l.setFormSize(9f);        //大小        l.setTextSize(11f);        l.setXEntrySpace(4f);        //模拟数据        ArrayList
     
       yVals1 = new ArrayList
      
       ();        yVals1.add(new BarEntry(0, 10));        yVals1.add(new BarEntry(5, 20));        yVals1.add(new BarEntry(16, 30));        yVals1.add(new BarEntry(18, 40));        yVals1.add(new BarEntry(20, 50));        yVals1.add(new BarEntry(22, 10));        yVals1.add(new BarEntry(25, 20));        yVals1.add(new BarEntry(28, 30));        yVals1.add(new BarEntry(30, 40));        setData(yVals1);    }    //设置数据    private void setData(ArrayList yVals1) {        float start = 1f;        BarDataSet set1;        if (mBarChart.getData() != null &&                mBarChart.getData().getDataSetCount() > 0) {            set1 = (BarDataSet) mBarChart.getData().getDataSetByIndex(0);            set1.setValues(yVals1);            mBarChart.getData().notifyDataChanged();            mBarChart.notifyDataSetChanged();        } else {            set1 = new BarDataSet(yVals1, "2017年工资涨幅");            //设置有四种颜色            set1.setColors(ColorTemplate.MATERIAL_COLORS);            ArrayList
       
         dataSets = new ArrayList
        
         ();            dataSets.add(set1);            BarData data = new BarData(dataSets);            data.setValueTextSize(10f);            data.setBarWidth(0.9f);            //设置数据            mBarChart.setData(data);        }    }    @Override    public void onValueSelected(Entry e, Highlight h) {    }    @Override    public void onNothingSelected() {    }    @Override    public void onClick(View v) {        switch (v.getId()) {            //显示顶点值            case R.id.btn_show_values:                for (IDataSet set : mBarChart.getData().getDataSets())                    set.setDrawValues(!set.isDrawValuesEnabled());                mBarChart.invalidate();                break;            //x轴动画            case R.id.btn_anim_x:                mBarChart.animateX(3000);                break;            //y轴动画            case R.id.btn_anim_y:                mBarChart.animateY(3000);                break;            //xy轴动画            case R.id.btn_anim_xy:                mBarChart.animateXY(3000, 3000);                break;            //保存到sd卡            case R.id.btn_save_pic:                if (mBarChart.saveToGallery("title" + System.currentTimeMillis(), 50)) {                    Toast.makeText(getApplicationContext(), "保存成功",                            Toast.LENGTH_SHORT).show();                } else                    Toast.makeText(getApplicationContext(), "保存失败",                            Toast.LENGTH_SHORT).show();                break;            //切换自动最大最小值            case R.id.btn_auto_mix_max:                mBarChart.setAutoScaleMinMaxEnabled(!mBarChart.isAutoScaleMinMaxEnabled());                mBarChart.notifyDataSetChanged();                break;            //高亮显示            case R.id.btn_actionToggleHighlight:                if (mBarChart.getData() != null) {                    mBarChart.getData().setHighlightEnabled(                            !mBarChart.getData().isHighlightEnabled());                    mBarChart.invalidate();                }                break;            //显示边框            case R.id.btn_actionToggleBarBorders:                for (IBarDataSet set : mBarChart.getData().getDataSets())                    ((BarDataSet) set)                            .setBarBorderWidth(set.getBarBorderWidth() == 1.f ? 0.f                                    : 1.f);                mBarChart.invalidate();                break;        }    }
        
       
      
     

有兴趣的加群：555974449

Sample: