使用 MPAndroidChart 绘制时间序列图

Question

我想在 Android 中绘制时间序列数据。 我有一个温度传感器，每 10 秒报告一次数据。我正在使用 API 从云中获取这些数据。 在数据中，我有一个温度值及其时间戳。 我想显示 1 个月的数据，用户可以缩放图表直到时间戳（直到秒或分钟）。

我尝试使用 MPAndroidChart 进行绘图。我在 X 轴上取了时间戳，在 Y 轴上取了值。 MPAndroidChart 只允许浮点值，并且我有长类型的时间戳。 因此，我将第一个起始时间戳记为 0，并通过从中减去这个基本时间戳来计算其他时间戳。 我在读完这个问题后就这样做了。 https://github.com/PhilJay/MPAndroidChart/issues/2891

我用过这个问题。 这是我的代码片段。

private void showChart(ArrayList<TempData> tempData, long baseTimestamp) {

    // Prepare Bar Entries
    ArrayList<BarEntry> barEntries = new ArrayList<>();

    for (int i = 0; i < tempData.size(); i++) {

        long timestamp = tempData.getTimestamp(); // Here timestamp & baseTimestamp both are in seconds.
        timestamp = timestamp - baseTimestamp;
        Log.d(TAG, "Adding entry with timestamp : " + timestamp);
        BarEntry barEntry = new BarEntry(timestamp, tempData.get(i).getValue());
        barEntries.add(barEntry);
    }

    // Initialise xAxis
    XAxis xAxis = barChart.getXAxis();
    xAxis.enableGridDashedLine(10f, 10f, 0f);
    xAxis.setTextColor(Color.BLACK);
    xAxis.setTextSize(14);
    xAxis.setDrawAxisLine(true);
    xAxis.setAxisLineColor(Color.BLACK);
    xAxis.setDrawGridLines(true);
    xAxis.setGranularity(1f);
    xAxis.setGranularityEnabled(true);
    xAxis.setAxisMinimum(0 + 0.5f); //to center the bars inside the vertical grid lines we need + 0.5 step
    xAxis.setAxisMaximum(barEntries.size() + 0.5f); //to center the bars inside the vertical grid lines we need + 0.5 step
    // xAxis.setLabelCount(xAxisLabel.size(), true); //draw x labels for 13 vertical grid lines
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setXOffset(0f); //labels x offset in dps
    xAxis.setYOffset(0f); //labels y offset in dps
    xAxis.setCenterAxisLabels(true);
    xAxis.setValueFormatter(new TimestampXAxisFormatter(baseTimestamp));
    // xAxis.setLabelCount(4);

    // Initialize Y-Right-Axis
    YAxis rightAxis = barChart.getAxisRight();
    rightAxis.setTextColor(Color.BLACK);
    rightAxis.setTextSize(14);
    rightAxis.setDrawAxisLine(true);
    rightAxis.setAxisLineColor(Color.BLACK);
    rightAxis.setDrawGridLines(true);
    rightAxis.setGranularity(1f);
    rightAxis.setGranularityEnabled(true);
    rightAxis.setAxisMinimum(0);
    rightAxis.setAxisMaximum(1000f);
    rightAxis.setLabelCount(4, true); //draw y labels (Y-Values) for 4 horizontal grid lines starting from 0 to 1000f
    rightAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);

    //initialize Y-Left-Axis
    YAxis leftAxis = barChart.getAxisLeft();
    leftAxis.setAxisMinimum(0);
    leftAxis.setDrawAxisLine(true);
    leftAxis.setLabelCount(0, true);
    leftAxis.setValueFormatter(new ValueFormatter() {
        @Override
        public String getFormattedValue(float value) {
            return "";
        }
    });

    // set the BarDataSet
    BarDataSet barDataSet = new BarDataSet(barEntries, "Time Series");
    barDataSet.setColor(Color.RED);
    barDataSet.setFormSize(15f);
    barDataSet.setDrawValues(false);
    barDataSet.setValueTextSize(12f);

    // set the BarData to chart
    BarData data = new BarData(barDataSet);
    barChart.setData(data);
    barChart.setScaleEnabled(false);
    barChart.getLegend().setEnabled(false);
    barChart.setDrawBarShadow(false);
    barChart.getDescription().setEnabled(false);
    barChart.setPinchZoom(false);
    barChart.setDrawGridBackground(true);
    barChart.invalidate();
}

class TimestampXAxisFormatter extends IndexAxisValueFormatter {

    long baseTimestamp;

    TimestampXAxisFormatter(long baseTime) {
        baseTimestamp = baseTime;
    }

    @Override
    public String getFormattedValue(float value) {

        // Add base timestamp
        long timestamp = (long) value;
        timestamp = timestamp + baseTimestamp;

        Log.d(TAG, "getFormattedValue, value : " + value);
        Log.e(TAG, "getFormattedValue, Timestamp : " + timestamp);

        // Convert from seconds back to milliseconds to format time  to show to the user
        String dateTimeInStr = new SimpleDateFormat("HH:mm:ss").format(new Date(timestamp * 1000));
        return dateTimeInStr;
    }
}

我期待 TimestampXAxisFormatter 的“getFormattedValue”方法中的时间戳（用于添加 BarEntry 的时间戳差异）。 但我得到了 0.0、2.0、4.0、6.0 等。 由于我无法在“getFormattedValue”方法中接收时间戳，这里有什么错误？

请任何人帮助我找出问题并绘制 1 个月的数据，用户将能够缩放到几秒钟。

提前致谢。

Answer 1

你想要在x轴上显示的值，首先添加到数组列表中，如下所示

final ArrayList<String> xAxisLabel = new ArrayList<>();
    xAxisLabel.add("J"); //this label will be mapped to the 1st index of the valuesList
    xAxisLabel.add("F");
    xAxisLabel.add("M");
    xAxisLabel.add("A");
    xAxisLabel.add("M");
    xAxisLabel.add("J");
    xAxisLabel.add("J");
    xAxisLabel.add("A");
    xAxisLabel.add("S");
    xAxisLabel.add("O");
    xAxisLabel.add("N");
    xAxisLabel.add("D");
    xAxisLabel.add(""); //empty label for the last vertical grid line on Y-Right Axis

这里我制作了一个年份图。
然后，当我们初始化 X 轴时，我们可以使用 .setValueFormatter() 函数设置值，如下所示：-

XAxis xAxis = mBarChart.getXAxis();
xAxis.setValueFormatter(new ValueFormatter() {
        @Override
        public String getFormattedValue(float value) {
            return xAxisLabel.get((int) value);
        }

在您的情况下，您尝试将值转换为 中的时间戳>getFormattedValue()

public String getFormattedValue(float value) {

        // Add base timestamp
        long timestamp = (long) value;

是 1.0,2.0。等等，这就是你没有获得你想要的价值的原因。

现在，当您想每 10 秒显示一次数据时，方法如下 -
为了每 10 秒显示一次数据，我们需要相应地添加 xLabel:-

ArrayList<Long> xAxisLabel = new ArrayList<>();

    //1h = 3600 seconds
    //1d = 86400 seconds
    //1w = 604800 seconds
    int seconds = 3600;
    //the loop here is incremented by 10 seconds (i+=10)
    for(int i = 0; i < seconds; i+=10){
        String time = DateFormat.format("dd-MM-yyyy HH:mm:ss", cal).toString();
        long timeStamp = cal.getTimeInMillis();
        valuesList.add((double)i);
        xAxisLabel.add(timeStamp);
        cal.add(Calendar.SECOND, 10);
    }

然后使用下面的代码在 XAxis 中设置它:-

XAxis xAxis = mBarChart.getXAxis();
xAxis.setValueFormatter(new ValueFormatter() {
        @Override
        public String getFormattedValue(float value) {
            if (value >= 0)
            {
                int xIndex = (int)value;
                if (value > xAxisLabel.size()-1 && value <= xAxisLabel.size())
                    return "";
                if (xIndex < xAxisLabel.size())
                {
                    Long timeStamp = xAxisLabel.get(xIndex);
                    //here convert the timestamp to the appropriate String value
                    Calendar cal = Calendar.getInstance();
                    cal.setTimeInMillis(timeStamp);
                    String time = DateFormat.format("dd-MM-yyyy HH:mm:ss", cal).toString();
                    return String.valueOf(time);
                }
                return "";
            }
            return "";
        }
    });