mpandroidchart - 在 MPAndroid 图表中对数据集进行分组

Question

我有两个数据集。我想用 mpandroidchart 制作图表。

这是我的 json 格式的数据集:

const bar_chart_point_ver = {
  "datasets": [{
      "name": "set1",
      "setColor": ["#004D40", "#004D40", "#004D40", "#004D40", "#e74c3c",
        "#f1c40f", "#3498db"
      ],
      "points": [{
          "x": "eli",
          "y": "24"
        }, {
          "x": "mah",
          "y": "38"
        }, {
          "x": "sa",
          "y": "77"
        }, {
          "x": "ni",
          "y": "17"
        }

      ]
    },
    {
      "name": "set2",
      "setColor": ["#3498db"],
      "points": [{
          "x": "eli",
          "y": "12"
        }, {
          "x": "mah",
          "y": "24"
        }, {
          "x": "sa",
          "y": "125"
        }, {
          "x": "ni",
          "y": "7"
        }

      ]
    }
  ]
};

我想要一个分组图表。例如，在我的数据集中，“eli”的值为 12 和 24，我希望这些值彼此相邻。目前我的输出是:

这是我的 Java 代码:

//float groupSpace = 0.06f;
float groupSpace = 0.01 f;
float barSpace = 0.02 f; // x2 dataset
//float barWidth = 0.45f; // x2 dataset
float barWidth = 0.1 f; // x2 dataset
// (0.02 + 0.45) * 2 + 0.06 = 1.00 -> interval per "group"
data.setBarWidth(barWidth); // set the width of each bar
// mChart.setData(data);
mChart.groupBars(0 f, groupSpace, barSpace); // perform the "explicit" 
grouping
mChart.invalidate(); // refresh
// mChart.getBarData().setBarWidth(barWidth);
//mChart.getXAxis().setAxisMinValue(startYear);
mChart.getXAxis().setAxisMaximum(i - 1);
//mChart.groupBars(0, groupSpace, barSpace);
mChart.setFitBars(true);

mChart.invalidate();
// mChart.groupBars(0, groupSpace, barSpace);

Answer 1

您给的 barSpace 大于 0.. 这就是同一组的条之间存在间距的原因。您可以检查以下实现:

XML

<com.github.mikephil.charting.charts.BarChart
        android:id="@+id/bar_chart"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

事件

@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};

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

        BarDataSet set1 = new BarDataSet(barOne, "barOne");
        set1.setColor(Color.BLUE);
        BarDataSet set2 = new BarDataSet(barTwo, "barTwo");
        set2.setColor(Color.MAGENTA);

        set1.setHighlightEnabled(false);
        set2.setHighlightEnabled(false);
        set1.setDrawValues(false);
        set2.setDrawValues(false);

        ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
        dataSets.add(set1);
        dataSets.add(set2);
        BarData data = new BarData(dataSets);
        float groupSpace = 0.4f;
        float barSpace = 0f;
        float barWidth = 0.3f;
        // (barSpace + barWidth) * 2 + groupSpace = 1
        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(4f);
        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];
        }
    }

结果