java - 如何在图形 MPAndroidChart 上显示数据集？

Question

我想在图表上将金额和日期显示为月份值。为此，我搜索了图书馆 MPAndroid Chart .

但我不知道如何添加数据集并将日期转换为月份。

我想显示这样的图表:

我有一个包含金额和日期的订单对象列表。

我试过这段代码:

    totalOrdersList = new ArrayList<>();
        mChart = (BarChart) view.findViewById(R.id.chart);
       // mChart.setOnChartValueSelectedListener(Dashboard2Fragment.this);
        // mChart.setHighlightEnabled(false);

        mChart.setDrawBarShadow(false);

        mChart.setDrawValueAboveBar(true);
        mChart.setBackgroundColor(ContextCompat.getColor(getActivity(),R.color.lightGrey));

        mChart.getDescription().setEnabled(false);

        // if more than 60 entries are displayed in the chart, no values will be
        // drawn
        mChart.setMaxVisibleValueCount(60);

        // scaling can now only be done on x- and y-axis separately
        mChart.setPinchZoom(false);

        // draw shadows for each bar that show the maximum value
        // mChart.setDrawBarShadow(true);

        mChart.setDrawGridBackground(false);

        XAxis xl = mChart.getXAxis();
        xl.setPosition(XAxis.XAxisPosition.BOTTOM);
        xl.setDrawAxisLine(true);
        xl.setDrawGridLines(false);
        xl.setGranularity(10f);


        YAxis yl = mChart.getAxisLeft();
        yl.setDrawAxisLine(true);
        yl.setDrawGridLines(true);
        yl.setAxisMinimum(0f); // this replaces setStartAtZero(true)
//        yl.setInverted(true);

        YAxis yr = mChart.getAxisRight();
        yr.setDrawAxisLine(true);
        yr.setDrawGridLines(false);
        yr.setAxisMinimum(0f); // this replaces setStartAtZero(true)
//        yr.setInverted(true);

     //   setData();
        mChart.setFitBars(true);
        mChart.animateY(2500);


        Legend l = mChart.getLegend();
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        l.setDrawInside(false);
        l.setFormSize(8f);
        l.setXEntrySpace(4f);




     private void setData() {

        mChart.setScaleEnabled(false);

        int i=0;

        barEntries = new ArrayList<>();

        ArrayList<String> amountArray = new ArrayList<>();
        ArrayList<String> dateArray = new ArrayList<>();

        for(Order order : totalOrdersList)
        {

            amountArray.add(order.getAmount());
            dateArray.add(order.getDate());

        }

        for (String amount : amountArray)
        {
            barEntries.add(new BarEntry(1,Float.parseFloat(amount)));
        }

        BarDataSet completed = new BarDataSet(barEntries, "Amount");

        completed.setValues(barEntries);

        completed.setValueTextColor(Color.WHITE);

        completed.setValueTextSize(12f);

        Legend legend = new Legend();


        legend = mChart.getLegend();

        legend.setEnabled(true);

        mChart.setEnabled(false);
        mChart.setPinchZoom(false);

        mChart.setHighlightPerTapEnabled(false);
        mChart.setDrawValueAboveBar(true);
        mChart.setDoubleTapToZoomEnabled(false);
        mChart.setHighlightPerDragEnabled(false);
        mChart.setDragDecelerationEnabled(false);


        XAxis xl = mChart.getXAxis();
        xl.setPosition(XAxis.XAxisPosition.BOTTOM);
        xl.setDrawAxisLine(true);
        xl.setDrawGridLines(false);
        xl.setDrawLabels(true);
        xl.setTextColor(Color.WHITE);

        mChart.setDrawGridBackground(false);

        YAxis yl = mChart.getAxisLeft();
        yl.setDrawAxisLine(true);
        yl.setDrawGridLines(false);
        yl.setDrawLabels(true);


        YAxis yll = mChart.getAxisRight();
        yll.setDrawAxisLine(false);
        yll.setAxisLineColor(Color.WHITE);
        yll.setDrawGridLines(false);
        yll.setDrawLabels(false);

        ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
        dataSets.add(completed);

        BarData data = new BarData(dataSets);

        mChart.setData(data);

        mChart.invalidate();


    }

但得到这样的图表:

怎么了？？

Answer 1

问题:

您正在将所有 barEntries 设置为相同的索引

for (String amount : amountArray)
    {
        barEntries.add(new BarEntry(1, Float.parseFloat(amount)));
    }

你需要改变它如下:

int index = 0;

for (String amount : amountArray)
    {
        barEntries.add(new BarEntry(index, Float.parseFloat(amount)));
        index++;
    }

编辑:

现在要在 X 轴上显示日期，thread 中提到了一个很好的例子.您可以创建另一个 long 的 arrayList 来存储您的日期(以毫秒为单位)。

private List<Long> timestampList = new ArrayList<>();

for (String dateString : dateArray) {
        try {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MMMM-dd");
            Date date = sdf.parse(dateString);

            long startDate = date.getTime();

            Log.d("timestamp:", String.valueOf(startDate));

            timestampList.add(startDate);

        } catch (ParseException e) {
            e.printStackTrace();
        }
    }

现在要显示月中的这些毫秒数，您必须使用 IAxisValueFormatter用于格式化 X 轴值的界面。您可以使用类似下面的内容来格式化您的值:

 //Interface to get custom values for X-axis
    IAxisValueFormatter formatter = new IAxisValueFormatter() {
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
            Calendar calendar = Calendar.getInstance();
            calendar.setTimeInMillis(timestampList.get((int) value));
            int month = calendar.get(Calendar.MONTH);
            calendar.set(Calendar.MONTH, month);
            return new SimpleDateFormat("MMM").format(calendar.getTime());            }
    };

最后要为 X 轴设置值，您可以调用

xl.setGranularity(1f); //So that the X-Axis values become 0, 1, 2, and so on...to query the timestampList() index
xl.setValueFormatter(formatter);

getFormattedValue 将为每个 X 轴值调用，然后您可以相应地获取月份。