android图表库MPAndroidChart之分组柱状图的里面的坑

 android图表库MPAndroidChart之分组柱状图里面的坑

MPAndroidChart库里集成了很多各种各样的图表绘制。但是最近的一个项目需要用到统计柱状图，但是这个柱状图是有分组的。

于是套用官方demo中的代码，结果发现总是图表的布局不对，不是这有问题就是那有问题。找了半天网上也没找到答案。明明

知道是数据封装和配置问题，但是就是找不到哪里有问题。研究了整整一天总算解决了。

先贴出一张最终的效果图和最早的布局有问题的图片，做一个对比

：

下面介绍分组柱状图的正确使用：

关键：我的例子中每组数据是两个数据

一、初始化BarChart：

private void initBarChart()
{
    MyMarkerView mv = new MyMarkerView(getActivity());
    mv.setChartView(barChart);
    barChart.setMarker(mv);

    Typeface mTfLight = Typeface.createFromAsset(getActivity().getAssets(),
            "OpenSans-Light.ttf");

    Description description = new Description();
    description.setText("分类态势");
    barChart.setDescription(description);
    barChart.setDrawValueAboveBar(true);
    barChart.setTouchEnabled(true);
    barChart.setDragEnabled(true);
    barChart.setScaleEnabled(true);
    barChart.fitScreen();
    barChart.animateXY(3000, 3000);
    barChart.setNoDataText("正在加载数据...");
    barChart.getAxisLeft().setDrawGridLines(false);//不设置Y轴网格
    barChart.getAxisRight().setEnabled(false);//右侧不显示Y轴
    barChart.getAxisLeft().setAxisMinimum(0f);//设置Y轴显示最小值，不然0下面会有空隙
    barChart.setOnChartValueSelectedListener(this);

    XAxis xAxis = barChart.getXAxis();
    xAxis.setGranularity(1f);
    xAxis.setCenterAxisLabels(true);
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setTypeface(mTfLight);
    xAxis.setValueFormatter(new IAxisValueFormatter()
    {
        @Override
        public String getFormattedValue(float value, AxisBase axis)
        {
            LogN.d("value:" + value);

            return getTypeDesc((int) value);//关键：根据需要返回x轴数据，x轴的数据个数一定要等于下面max-min的值
        }
    });

    xAxis.setAxisMinimum(1);
    xAxis.setAxisMaximum(6);//关键：差值为x轴数据个数，也是y轴数据的组数
}

二、封装数据

private void refreshChart()
{
    float groupSpace = 0.08f;
    float barSpace = 0.06f; // x4 DataSet
    float barWidth = 0.4f; // x4 DataSet
    //关键： (0.4 + 0.06) * 2 + 0.08 = 1.00 -> interval per "group" 一定要等于1,乘以2是表示每组有两个数据

    ArrayList<BarEntry> yVals1 = new ArrayList<>();
    ArrayList<BarEntry> yVals2 = new ArrayList<>();

    for (StatisticsInfo info : dataList)
    {
        yVals1.add(new BarEntry(info.getType(), info.getTotal()));
        yVals2.add(new BarEntry(info.getType(), info.getFinished()));
    }//根据实际项目设置数据即可

    BarDataSet set1, set2;//每组有两个数据

    if (barChart.getData() != null && barChart.getData().getDataSetCount() > 0)
    {
        set1 = (BarDataSet) barChart.getData().getDataSetByIndex(0);
        set2 = (BarDataSet) barChart.getData().getDataSetByIndex(1);
        set1.setValues(yVals1);
        set2.setValues(yVals2);
        barChart.getData().notifyDataChanged();
        barChart.notifyDataSetChanged();
    }
    else
    {
        set1 = new BarDataSet(yVals1, "权重");
        set1.setColor(RgbUtil.rgb("#cee57"));
        set2 = new BarDataSet(yVals2, "完成");
        set2.setColors(getColors());

        BarData barData = new BarData(set1, set2);
        barData.setValueTextSize(10f);
        barData.setDrawValues(false);
        barData.setBarWidth(barWidth);

        barChart.setData(barData);
    }

    barChart.groupBars(1f, groupSpace, barSpace);//最关键，分组柱状图一定要增加这个配置，且要在setData之后调用否则会程序崩溃

    barChart.invalidate();
}

备注：barChart.groupBars(1f, groupSpace, barSpace);的含义可参考下面的示意图（网上截取的）