MPAndroidChart BarChart（分组数据集）未显示所有条形图

Question

我正在使用 MPAndroidChart BarChart (Grouped DataSets) 来显示两个用户的数据。它正在显示数据，但问题是它从一开始就没有在 x 轴上显示数据，因此所有条形都不可见。

数组：

String[] title_list = {"Whatsapp", "Visit", "Callback", "Interested"}
int[] title_values_1 = {50, 15, 25, 36};
int[] title_values_2 = {70, 35, 15, 10};

条形图：

public void LoadBarChart()
    {
        List<BarEntry> barEntries1 = new ArrayList<>();
        for (int i = 0; i < title_list.length; i++) {
            barEntries1.add(new BarEntry(i, title_values_1[i]));
        }

        List<BarEntry> barEntries2 = new ArrayList<>();
        for (int i = 0; i < title_list.length; i++) {
            barEntries2.add(new BarEntry(i, title_values_2[i]));
        }

        BarDataSet dataSet1 = new BarDataSet(barEntries1, "Dataset 1");
        dataSet1.setColors(getColor(R.color.pie_chart_blue));
        dataSet1.setValueTextSize(10f);  /* values size */
        dataSet1.setValueTextColor(Color.WHITE);

        BarDataSet dataSet2 = new BarDataSet(barEntries2, "Dataset 2");
        dataSet2.setColors(getColor(R.color.pie_chart_red));
        dataSet2.setValueTextSize(10f);  /* values size */
        dataSet2.setValueTextColor(Color.WHITE);

        float groupSpace = 0.06f;
        float barSpace = 0.02f; // x2 dataset
        float barWidth = 0.45f; // x2 dataset

        BarData data = new BarData(dataSet1, dataSet2);
        ValueFormatter vf = new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) { return ""+(int)value; }
        };
        data.setValueFormatter(vf);
        data.setValueTextSize(12f);
        data.setBarWidth(barWidth);

        XAxis xAxis = barChart.getXAxis();
        xAxis.setValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) {
                return title_list[(int) value];
            }
        });
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawGridLines(false);
        xAxis.setDrawAxisLine(false);
        xAxis.setLabelCount(title_list.length);

        barChart.setData(data);
        barChart.groupBars(0f, groupSpace, barSpace);
        barChart.getDescription().setEnabled(false);
        barChart.setDrawValueAboveBar(false);
        barChart.setTouchEnabled(false);
        barChart.animateY(1000);
        barChart.invalidate();
    }

我已经尝试过有关 stackoverflow 的答案，但没有解决我的问题。请帮忙！

更新：

Shayan 回答后，现在所有条形都可见，但标签未居中。

是否可以将标签与条形对齐？

Answer 1

您必须使用间距，我认为当它无法调整屏幕中的整个内容时，它会开始切割条。

添加此行，以便条形图可以从头开始

    xAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)

像这样设置间距和宽度有点低

    float groupSpace = 0.06f;
    float barSpace = 0.02f; // x2 dataset
    float barWidth = 0.40f; // x2 dataset

完整的方法看起来像这样

public void LoadBarChart()
{
    List<BarEntry> barEntries1 = new ArrayList<>();
    for (int i = 0; i < title_list.length; i++) {
        barEntries1.add(new BarEntry(i, title_values_1[i]));
    }

    List<BarEntry> barEntries2 = new ArrayList<>();
    for (int i = 0; i < title_list.length; i++) {
        barEntries2.add(new BarEntry(i, title_values_2[i]));
    }

    BarDataSet dataSet1 = new BarDataSet(barEntries1, "Dataset 1");
    dataSet1.setColors(R.color.colorPrimary);
    dataSet1.setValueTextSize(10f);  /* values size */
    dataSet1.setValueTextColor(Color.WHITE);

    BarDataSet dataSet2 = new BarDataSet(barEntries2, "Dataset 2");
    dataSet2.setColors(R.color.colorPrimary);
    dataSet2.setValueTextSize(10f);  /* values size */
    dataSet2.setValueTextColor(Color.WHITE);

    float groupSpace = 0.06f;
    float barSpace = 0.02f; // x2 dataset
    float barWidth = 0.40f; // x2 dataset

    BarData data = new BarData(dataSet1, dataSet2);
    ValueFormatter vf = new ValueFormatter() {
        @Override
        public String getFormattedValue(float value) { return ""+(int)value; }
    };
    data.setValueFormatter(vf);
   // data.setValueTextSize(12f);
    data.setBarWidth(barWidth);

    XAxis xAxis = barChart.getXAxis();
    xAxis.setValueFormatter(new ValueFormatter() {
        @Override
        public String getFormattedValue(float value) {
            return title_list[(int) value];
        }
    });
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setDrawGridLines(false);
    xAxis.setDrawAxisLine(false);
    xAxis.setLabelCount(title_list.length);
    xAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)

    barChart.setData(data);
    barChart.groupBars(0f,groupSpace,barSpace);
    barChart.getDescription().setEnabled(false);
    barChart.setDrawValueAboveBar(false);
    barChart.setTouchEnabled(false);
    barChart.animateY(1000);
    barChart.invalidate();
}

希望这行得通！

Answer 2

在Shayan的指导下，我能够达到预期的效果。我在答案中添加了一些属性。

间距和条宽：

float groupSpace = 0.15f;
float barSpace = 0.01f; // x2 dataset
float barWidth = 0.42f; // x2 dataset

X 轴加法：

xAxis.setAxisMinimum(0f);
xAxis.setGranularity(1);
xAxis.setCenterAxisLabels(true);
xAxis.setAxisMaximum(title_list.length);

格式化程序：

barChart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(title_list));

所以条形图方法现在看起来像这样：

public void LoadBarChart()
{
    List<BarEntry> barEntries1 = new ArrayList<>();
    for (int i = 0; i < title_list.length; i++) {
        barEntries1.add(new BarEntry(i, title_values_1[i]));
    }

    List<BarEntry> barEntries2 = new ArrayList<>();
    for (int i = 0; i < title_list.length; i++) {
        barEntries2.add(new BarEntry(i, title_values_2[i]));
    }

    BarDataSet dataSet1 = new BarDataSet(barEntries1, Global.employeesComparisonList.get(0).getName());
    dataSet1.setColors(getColor(R.color.blue));
    dataSet1.setValueTextSize(10f);  /* values size */
    dataSet1.setValueTextColor(Color.WHITE);

    BarDataSet dataSet2 = new BarDataSet(barEntries2, Global.employeesComparisonList.get(1).getName());
    dataSet2.setColors(getColor(R.color.red));
    dataSet2.setValueTextSize(10f);  /* values size */
    dataSet2.setValueTextColor(Color.WHITE);

    float groupSpace = 0.15f;
    float barSpace = 0.01f; // x2 dataset
    float barWidth = 0.42f; // x2 dataset

    BarData data = new BarData(dataSet1, dataSet2);
    ValueFormatter vf = new ValueFormatter() {
        @Override
        public String getFormattedValue(float value) { return ""+(int)value; }
    };
    data.setValueFormatter(vf);
    data.setValueTextSize(12f);
    data.setBarWidth(barWidth);

    XAxis xAxis = barChart.getXAxis();
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setDrawGridLines(false);
    xAxis.setDrawAxisLine(false);
    xAxis.setLabelCount(title_list.length);
    xAxis.setAxisMinimum(0f); // this replaces setStartAtZero(true)
    xAxis.setGranularity(1);
    xAxis.setCenterAxisLabels(true);
    xAxis.setAxisMaximum(title_list.length);

    Legend l = barChart.getLegend();
    l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
    l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
    l.setOrientation(Legend.LegendOrientation.HORIZONTAL);

    barChart.setData(data);
    barChart.groupBars(0f,groupSpace,barSpace);
    barChart.getXAxis().setValueFormatter(new IndexAxisValueFormatter(title_list));
    barChart.getDescription().setEnabled(false);
    barChart.setDrawValueAboveBar(false);
    barChart.setTouchEnabled(false);
    barChart.animateY(1000);
    barChart.invalidate();
}

最终结果：

Answer 3

是的，这很容易做到。

您需要的是一个带有多个 BarDataSets 的 BarChart，其中每个集合（在您的情况下）代表每个活动的计数。

• 这是how to create a BarChart with multiple DataSets 的示例
• 这里是how to use MPAndroidChart with Realm.io的教程

示例代码（不含 realm.io）

    List<String> xValues = ...; // "Denmark", "Finland", ...

    XAxis xAxis = chart.getXAxis();
    xAxis.setValueFormatter(new MyValueFormatter(xValues));
    xAxis.setCenterAxisLabels(true);

    // create 2 datasets 
    BarDataSet set1 = new BarDataSet(valuesMen, "Men");
    set1.setColor(Color.BLUE);
    BarDataSet set2 = new BarDataSet(valuesWomen, "Women");
    set2.setColor(Color.RED);

    BarData data = new BarData(set1, set2);
    chart.setData(data);
    chart.groupBars(...); // available since release v3.0.0
    chart.invalidate(); // refresh

如果您需要进一步的帮助，这里有一个 detailed tutorial 分组 BarChart 可在 wiki 上找到。

如果您想将BarChart 中的值“堆叠”在彼此之上，您需要创建一个堆叠条形图：Android Stacked Bars Chart

**

结果图片

**