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中提到了一个很好的例子。您可以创建另一个arrayList long来存储您的日期（以毫秒为单位）。

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);
将为每个X轴值调用
getFormattedValue，然后您可以相应地获得月份。

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

1 个答案: