MPAndroidChart 柱状图 xValues 问题

Question

我发现了一个关于MPAndroidChart的BarChart的问题，并需要修复。这是我的代码：

this.barChart = (BarChart) view.findViewById(R.id.bar_fragment_bar_chart);
this.barChart.setDrawYValues(true);
this.barChart.setDrawXLabels(false);
this.barChart.setDrawValueAboveBar(true);
this.barChart.setDrawBorder(false);
this.barChart.setDrawGridBackground(false);
this.barChart.setDrawHorizontalGrid(true);
this.barChart.setDrawVerticalGrid(false);
this.barChart.setDrawBarShadow(false);
this.barChart.setDescription("");
this.barChart.setNoDataTextDescription("");
this.barChart.set3DEnabled(false);

我的xValues是简单的日期：

ArrayList<String> xValues = new ArrayList<String>();

for(int i = 0; i < measureDataListEntry.size(); i++) {
    String StringValue = measureDataListEntry.get(i).getTime();
    Long value = Long.parseLong(StringValue) * 1000;
    DateFormat dateFormat = new SimpleDateFormat("dd.MM.yyyy", Locale.GERMAN);
    String date = dateFormat.format(new Date(value));

    xValues.add(date);
}

现在我有多个数据集：

ArrayList<BarEntry> yValuesMonday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesTuesday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesWednesday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesThursday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesFriday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesSaturday = new ArrayList<BarEntry>();
ArrayList<BarEntry> yValuesSunday = new ArrayList<BarEntry>();

for(int i = 0; i < measureDataListEntry.size(); i++) {
    String stringValue = measureDataListEntry.get(i).getValue();
    int dayOfWeek = Helper.getDayOfWeek(measureDataListEntry.get(i).getTime());
    float value = Float.parseFloat(stringValue);

    switch(dayOfWeek) {
    case Calendar.MONDAY:
        yValuesMonday.add(new BarEntry(value, i));
        break;
    case Calendar.TUESDAY:
        yValuesTuesday.add(new BarEntry(value, i));
        break;
    case Calendar.WEDNESDAY:
        yValuesWednesday.add(new BarEntry(value, i));
        break;
    case Calendar.THURSDAY:
        yValuesThursday.add(new BarEntry(value, i));
        break;
    case Calendar.FRIDAY:
        yValuesFriday.add(new BarEntry(value, i));
        break;
    case Calendar.SATURDAY:
        yValuesSaturday.add(new BarEntry(value, i));
        break;
    case Calendar.SUNDAY:
        yValuesSunday.add(new BarEntry(value, i));
        break;
    }
}

BarDataSet barDataSetMonday = new BarDataSet(yValuesMonday, this.getResources().getString(R.string.text_monday));

barDataSetMonday.setColor(this.getResources().getColor(R.color.diagramGreenColor));

BarDataSet barDataSetTuesday = new BarDataSet(yValuesTuesday, this.getResources().getString(R.string.text_tuesday));

barDataSetTuesday.setColor(this.getResources().getColor(R.color.diagramOrangeColor));

BarDataSet barDataSetWednesday = new BarDataSet(yValuesWednesday, this.getResources().getString(R.string.text_wednesday));

barDataSetWednesday.setColor(this.getResources().getColor(R.color.diagramPinkColor));

BarDataSet barDataSetThursday = new BarDataSet(yValuesThursday, this.getResources().getString(R.string.text_thursday));

barDataSetThursday.setColor(this.getResources().getColor(R.color.diagramBlackColor));

BarDataSet barDataSetFriday = new BarDataSet(yValuesFriday, this.getResources().getString(R.string.text_friday));

barDataSetFriday.setColor(this.getResources().getColor(R.color.diagramBlueColor));

BarDataSet barDataSetSaturday = new BarDataSet(yValuesSaturday, this.getResources().getString(R.string.text_saturday));

barDataSetSaturday.setColor(this.getResources().getColor(R.color.diagramRedColor));

BarDataSet barDataSetSunday = new BarDataSet(yValuesSunday, this.getResources().getString(R.string.text_sunday));

barDataSetSunday.setColor(this.getResources().getColor(R.color.diagramYellowColor));

ArrayList<BarDataSet> dataSets = new ArrayList<BarDataSet>();

dataSets.add(barDataSetMonday);
dataSets.add(barDataSetTuesday);
dataSets.add(barDataSetWednesday);
dataSets.add(barDataSetThursday);
dataSets.add(barDataSetFriday);
dataSets.add(barDataSetSaturday);
dataSets.add(barDataSetSunday);

BarData data = new BarData(xValues, dataSets);

this.barChart.setData(data);
this.barChart.animateY(1000);

我的问题是xLabels和xValues完全不匹配：

柱形图的位置远远在xLabels后面，最后一个条目和倒数第二个之间有非常多的空间。

我还测试了将所有数据放入一个数据集中的情况。 xLabels也不与xValues相匹配：

如何解决这个问题？

编辑

您在此处看到的日期属于该条柱形图。那么为什么xLabel的位置与柱形图如此远？

编辑2：

使用LineChart：

protected void initData() {
    List<MeasureDataListEntry> measureDataListEntry = null;

    if(this.favourite) {
        measureDataListEntry = this.sessionMeasureDataListFavourite.getMeasureDataList().getMeasureDataListEntries();
    } else {
        measureDataListEntry = this.sessionMeasureDataList.getMeasureDataList().getMeasureDataListEntries();
    }

    ArrayList<String> xValues = new ArrayList<String>();
    ArrayList<Entry> yValuesMonday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesTuesday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesWednesday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesThursday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesFriday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesSaturday = new ArrayList<Entry>();
    ArrayList<Entry> yValuesSunday = new ArrayList<Entry>();

    for(int i = 0; i < measureDataListEntry.size(); i++) {
        String StringValue = measureDataListEntry.get(i).getTime();
        Long value = Long.parseLong(StringValue) * 1000;
        DateFormat dateFormat = new SimpleDateFormat("dd.MM.yyyy", Locale.GERMAN);
        String date = dateFormat.format(new Date(value));

        xValues.add(date);
    }

    for(int i = 0; i < measureDataListEntry.size(); i++) {
        String stringValue = measureDataListEntry.get(i).getValue();
        int dayOfWeek = Helper.getDayOfWeek(measureDataListEntry.get(i).getTime());
        float value = Float.parseFloat(stringValue);

        switch(dayOfWeek) {
        case Calendar.MONDAY:
            yValuesMonday.add(new Entry(value, i));
            break;
        case Calendar.TUESDAY:
            yValuesTuesday.add(new Entry(value, i));
            break;
        case Calendar.WEDNESDAY:
            yValuesWednesday.add(new Entry(value, i));
            break;
        case Calendar.THURSDAY:
            yValuesThursday.add(new Entry(value, i));
            break;
        case Calendar.FRIDAY:
            yValuesFriday.add(new Entry(value, i));
            break;
        case Calendar.SATURDAY:
            yValuesSaturday.add(new Entry(value, i));
            break;
        case Calendar.SUNDAY:
            yValuesSunday.add(new Entry(value, i));
            break;
        }
    }

    LineDataSet lineDataSetMonday = new LineDataSet(yValuesMonday, this.getResources().getString(R.string.text_monday));

    lineDataSetMonday.setColor(this.getResources().getColor(R.color.diagramGreenColor));
    lineDataSetMonday.setCircleColor(this.getResources().getColor(R.color.diagramGreenColor));
    lineDataSetMonday.setLineWidth(1f);
    lineDataSetMonday.setCircleSize(4f);
    lineDataSetMonday.setFillAlpha(65);
    lineDataSetMonday.setFillColor(this.getResources().getColor(R.color.diagramGreenColor));

    LineDataSet lineDataSetTuesday = new LineDataSet(yValuesTuesday, this.getResources().getString(R.string.text_tuesday));

    lineDataSetTuesday.setColor(this.getResources().getColor(R.color.diagramOrangeColor));
    lineDataSetTuesday.setCircleColor(this.getResources().getColor(R.color.diagramOrangeColor));
    lineDataSetTuesday.setLineWidth(1f);
    lineDataSetTuesday.setCircleSize(4f);
    lineDataSetTuesday.setFillAlpha(65);
    lineDataSetTuesday.setFillColor(this.getResources().getColor(R.color.diagramOrangeColor));

    LineDataSet lineDataSetWednesday = new LineDataSet(yValuesWednesday, this.getResources().getString(R.string.text_wednesday));

    lineDataSetWednesday.setColor(this.getResources().getColor(R.color.diagramPinkColor));
    lineDataSetWednesday.setCircleColor(this.getResources().getColor(R.color.diagramPinkColor));
    lineDataSetWednesday.setLineWidth(1f);
    lineDataSetWednesday.setCircleSize(4f);
    lineDataSetWednesday.setFillAlpha(65);
    lineDataSetWednesday.setFillColor(this.getResources().getColor(R.color.diagramPinkColor));

    LineDataSet lineDataSetThursday = new LineDataSet(yValuesThursday, this.getResources().getString(R.string.text_thursday));

    lineDataSetThursday.setColor(this.getResources().getColor(R.color.diagramBlackColor));
    lineDataSetThursday.setCircleColor(this.getResources().getColor(R.color.diagramBlackColor));
    lineDataSetThursday.setLineWidth(1f);
    lineDataSetThursday.setCircleSize(4f);
    lineDataSetThursday.setFillAlpha(65);
    lineDataSetThursday.setFillColor(this.getResources().getColor(R.color.diagramBlackColor));

    LineDataSet lineDataSetFriday = new LineDataSet(yValuesFriday, this.getResources().getString(R.string.text_friday));

    lineDataSetFriday.setColor(this.getResources().getColor(R.color.diagramBlueColor));
    lineDataSetFriday.setCircleColor(this.getResources().getColor(R.color.diagramBlueColor));
    lineDataSetFriday.setLineWidth(1f);
    lineDataSetFriday.setCircleSize(4f);
    lineDataSetFriday.setFillAlpha(65);
    lineDataSetFriday.setFillColor(this.getResources().getColor(R.color.diagramBlueColor));

    LineDataSet lineDataSetSaturday = new LineDataSet(yValuesSaturday, this.getResources().getString(R.string.text_saturday));

    lineDataSetSaturday.setColor(this.getResources().getColor(R.color.diagramRedColor));
    lineDataSetSaturday.setCircleColor(this.getResources().getColor(R.color.diagramRedColor));
    lineDataSetSaturday.setLineWidth(1f);
    lineDataSetSaturday.setCircleSize(4f);
    lineDataSetSaturday.setFillAlpha(65);
    lineDataSetSaturday.setFillColor(this.getResources().getColor(R.color.diagramRedColor));

    LineDataSet lineDataSetSunday = new LineDataSet(yValuesSunday, this.getResources().getString(R.string.text_sunday));

    lineDataSetSunday.setColor(this.getResources().getColor(R.color.diagramYellowColor));
    lineDataSetSunday.setCircleColor(this.getResources().getColor(R.color.diagramYellowColor));
    lineDataSetSunday.setLineWidth(1f);
    lineDataSetSunday.setCircleSize(4f);
    lineDataSetSunday.setFillAlpha(65);
    lineDataSetSunday.setFillColor(this.getResources().getColor(R.color.diagramYellowColor));

    ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();

    dataSets.add(lineDataSetMonday);
    dataSets.add(lineDataSetTuesday);
    dataSets.add(lineDataSetWednesday);
    dataSets.add(lineDataSetThursday);
    dataSets.add(lineDataSetFriday);
    dataSets.add(lineDataSetSaturday);
    dataSets.add(lineDataSetSunday);

    LineData data = new LineData(xValues, dataSets);

    this.lineChart.setData(data);
    this.lineChart.animateX(1000);
}

一切正常：

- Mulgard

Answer 1

我不太确定你想要什么。 但是如果想将x标签居中放置在柱形图上方，请使用以下命令：

chart.getXLabels().setCenterXLabelText(true);

关于条形图内部的分组，也许你应该查看示例项目并了解这里所做的工作：

https://github.com/PhilJay/MPAndroidChart/blob/master/MPChartExample/src/com/xxmassdeveloper/mpchartexample/BarChartActivityMultiDataset.java

更新:

如果你只是想为每一天设置不同的颜色，将所有条目放在一个数据集中，并向数据集添加7种颜色（每天一种）。 在这种情况下，x-values数组需要与你提供的条目数组一样长，包含不同的日期。

- Philipp Jahoda

---

你展示的例子不是我想做的。我有不同的数据集，每天一组数据。我不想将它们分组或做任何处理，只需要按原样绘制即可。我只是希望所有星期一的值有相同的颜色，星期二以此类推。 - Mulgard

我在我的帖子中添加了另一张图片来展示问题...你可以看到那里的日期属于该条...我猜你可以看到xLabel的奇怪定位。 - Mulgard

哦，我发现了更多的问题：柱形图没有按照正确的顺序排列。例如，我添加的第一个值是145，它属于2014年11月23日星期二的数据集。但是图表中的第一个值是238，它属于2014年11月24日星期一的数据集。因此，柱状图在某种程度上混合了这些值。所以我猜测数据集存在问题。它们忽略了new BarEntry(value, i)中的索引参数。 - Mulgard

你的更新答案应该如何解决这个问题？数据集如何自动知道哪一天是星期一，哪一天不是？这些值没有排序。 - Mulgard

是的，在你的情况下这是不可能的。在许多其他场景中（该库的其他用户可能创建的场景），它是可能的。这个库的创建和公开并不是为了适应单个人的特定要求，而是为了广大群众。 - Philipp Jahoda