MPAndroidChart：条形图x轴标签未居中

Question

MPAndroidChart：条形图x轴标签未居中

6

我有一个分组条形图，可以设置任意数量的组内条形。它将首先从2个组内条形开始。然后，如果用户点击按钮，它将在组内添加一个新的条形，再次点击，又会增加一个新的条形，以此类推。我的目标是重新绘制带有新条形的图表，但X轴标签必须始终位于分组条形的中心。

当有5个条形时，我总是遇到问题。

如上所示，二月份不再居中于第二个分组条形。这里提供了示例代码: https://github.com/PhilJay/MPAndroidChart/issues/3505 （我也在这里发布了问题，因为似乎 github 不再维护）

在代码中，resize 函数是核心部分，它希望在添加新条形时减小条形的宽度，并同时增加刻度最小值。但是一直没有成功。需要帮助。

- iadcialim24

你好，你有解决这个问题的方案吗？ - Sachin Arora

@SachinArora 不是的 - iadcialim24

@SachinArora，你有解决这个问题的方案吗？ - Amrutha Saj

@AmruthaSaj 你好，你找到解决方案了吗？在我的情况下，条形图的组大小将是固定的。 - sak

4个回答

6

首先，您需要动态设置x轴的最小和最大值。

mChart.getXAxist().setAxisMinimum(0);
mChart.getXAxis().setAxisMaximum(0 + 
barChart.getBarData().getGroupWidth(groupSpace, barSpace) * groupCount);

然后将其设置为居中：

mChart.getXAxis().setCenterAxisLabels(true);

我在这里提供了详细的答案：设置x轴标签之间的间隔：stackoverflow

- Extremis II

4

我认为标签位置正确，问题出在柱形图位置和间距上。请尝试以下方法。

    /**
     * Group charts by specifying width & other properties externally
     *
     * @param dataSets  Entire DataSet made
     * @param data      Bar Data created from datasets
     * @see <a href="https://github.com/PhilJay/MPAndroidChart/wiki/Setting-Data#grouped-barchart">http://google.com</a>
     */
    private void setupChartGrouping(ArrayList<IBarDataSet> dataSets,
                                    BarData data) {
        if (dataSets.size() > 1) {
            barChart.getXAxis().setCenterAxisLabels(true);
            barChart.getBarData().setBarWidth(getBarWidth(dataSets.size()));
            barChart.getXAxis().setAxisMinimum(-data.getBarWidth() / 2);
            barChart.getXAxis().setAxisMaximum(dataSets.size());
            barChart.groupBars(0, GROUPED_CHART_GROUP_SPACING, GROUPED_CHART_BAR_SPACING);

        } else {

            barChart.getXAxis().setCenterAxisLabels(false);
            barChart.getXAxis().resetAxisMaximum();
            barChart.getXAxis().resetAxisMinimum();

            barChart.getAxisLeft().setDrawGridLines(false);
            barChart.getXAxis().setDrawGridLines(false);
        }
    }

    private static final float GROUPED_CHART_MAGICAL_NUMBER = 1.00f;
    public static final float GROUPED_CHART_BAR_SPACING = 0.05f;
    public static final float GROUPED_CHART_GROUP_SPACING = 0.20f;

    /**
     * Size would be ==> ((barSpace + barWidth) * no: of bars in a group) + groupSpace = 1.00
     *
     * @param barEntryCount No: of bars in a Group
     * @return Width of a Single Bar in Chart
     */
    public static float getBarWidth(int barEntryCount) {
        return ((GROUPED_CHART_MAGICAL_NUMBER - GROUPED_CHART_GROUP_SPACING) / barEntryCount) - GROUPED_CHART_BAR_SPACING;
    }

- Don Chakkappan

0

To align x axis at center of groupBarChart you need to fulfill the below formula

Formula :: (barWidth + barSpace)*count + groupSpace = 1    :-count= no of bars/groups

here:
barWdith = ??
barSpace = 0.05f
grouSpace = 0.44f

You can find the barWidth using below formula:

barWidth = (1 - groupSpace) /`enter code here` count - barSpace;

- Waqas ali

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sauvik · Accepted Answer

查看此示例分组条形图代码。

public class MpAndroidGroupedBarChart extends AppCompatActivity {

    BarChart mChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mChart = (BarChart) findViewById(R.id.bar_chart);
        mChart.setDrawBarShadow(false);
        mChart.getDescription().setEnabled(false);
        mChart.setPinchZoom(false);
        mChart.setDrawGridBackground(false);

        // empty labels so that the names are spread evenly
        String[] labels = {"", "Name1", "Name2", "Name3", "Name4", "Name5", ""};
        IAxisValueFormatter xAxisFormatter = new LabelFormatter(mChart, labels);
        XAxis xAxis = mChart.getXAxis();
        xAxis.setCenterAxisLabels(true);
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setDrawGridLines(false);
        xAxis.setGranularity(1f); // only intervals of 1 day
        xAxis.setTextColor(Color.BLACK);
        xAxis.setTextSize(12);
        xAxis.setAxisLineColor(Color.WHITE);
        xAxis.setAxisMinimum(1f);
        xAxis.setValueFormatter(xAxisFormatter);

        YAxis leftAxis = mChart.getAxisLeft();
        leftAxis.setTextColor(Color.BLACK);
        leftAxis.setTextSize(12);
        leftAxis.setAxisLineColor(Color.WHITE);
        leftAxis.setDrawGridLines(false);
        leftAxis.setGranularity(2);
        leftAxis.setLabelCount(8, true);
        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);

        mChart.getAxisRight().setEnabled(false);
        mChart.getLegend().setEnabled(false);

        float[] valOne = {10, 20, 30, 40, 50};
        float[] valTwo = {60, 50, 40, 30, 20};
        float[] valThree = {20, 10, 30, 60, 40};
        float[] valFour = {40, 10, 60, 30, 10};
        float[] valFive = {60, 50, 40, 30, 50};

        ArrayList<BarEntry> barOne = new ArrayList<>();
        ArrayList<BarEntry> barTwo = new ArrayList<>();
        ArrayList<BarEntry> barThree = new ArrayList<>();
        ArrayList<BarEntry> barFour = new ArrayList<>();
        ArrayList<BarEntry> barFive = new ArrayList<>();
        for (int i = 0; i < valOne.length; i++) {
            barOne.add(new BarEntry(i, valOne[i]));
            barTwo.add(new BarEntry(i, valTwo[i]));
            barThree.add(new BarEntry(i, valThree[i]));
            barFour.add(new BarEntry(i, valFour[i]));
            barFive.add(new BarEntry(i, valFive[i]));
        }

        BarDataSet set1 = new BarDataSet(barOne, "barOne");
        set1.setColor(Color.BLUE);
        BarDataSet set2 = new BarDataSet(barTwo, "barTwo");
        set2.setColor(Color.MAGENTA);
        BarDataSet set3 = new BarDataSet(barThree, "barTwo");
        set3.setColor(Color.RED);
        BarDataSet set4 = new BarDataSet(barFour, "barTwo");
        set4.setColor(Color.GREEN);
        BarDataSet set5 = new BarDataSet(barFive, "barTwo");
        set5.setColor(Color.LTGRAY);

        set1.setHighlightEnabled(false);
        set1.setDrawValues(false);
        set2.setHighlightEnabled(false);
        set2.setDrawValues(false);
        set3.setHighlightEnabled(false);
        set3.setDrawValues(false);
        set4.setHighlightEnabled(false);
        set4.setDrawValues(false);
        set5.setHighlightEnabled(false);
        set5.setDrawValues(false);

        ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
        dataSets.add(set1);
        dataSets.add(set2);
        dataSets.add(set3);
        dataSets.add(set4);
        dataSets.add(set5);
        BarData data = new BarData(dataSets);
        float groupSpace = 0.2f;
        float barSpace = 0f;
        float barWidth = 0.16f;
        // (barSpace + barWidth) * 5 + groupSpace = 1
        // multiplied by 5 because there are 5 five bars
        // labels will be centered as long as the equation is satisfied
        data.setBarWidth(barWidth);
        // so that the entire chart is shown when scrolled from right to left
        xAxis.setAxisMaximum(labels.length - 1.1f);
        mChart.setData(data);
        mChart.setScaleEnabled(false);
        mChart.setVisibleXRangeMaximum(2f);
        mChart.groupBars(1f, groupSpace, barSpace);
        mChart.invalidate();

    }


    private class LabelFormatter implements IAxisValueFormatter {

        String[] labels;
        BarLineChartBase<?> chart;

        LabelFormatter(BarLineChartBase<?> chart, String[] labels) {
            this.chart = chart;
            this.labels = labels;
        }

        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            return labels[(int) value];
        }
    }
}

只要满足这个方程式，标签就会居中

(barSpace + barWidth) * 5 + groupSpace = 1

乘以5是因为有五个柱状图条

结果