如何在Android Plot中实现温度时间序列轴的可缩放边界缩放

嘿，我之前也碰到过类似的问题——Android Plot的轴边界API确实只认数值类型，但咱们可以把时间转换成数值（比如时间戳）来绕开这个限制，完美实现时间轴的缩放功能。下面是一步步的具体方案：

本质就是把时间转换成数值型的时间戳作为轴的底层数据，再通过自定义格式化器把数值转回友好的时间字符串显示给用户，这样就能利用Android Plot原生的缩放API了。

1. 把时间数据转成时间戳（数值型） #

不管你是从服务器拉取的时间字符串，还是本地生成的时间，都先转成long型的时间戳（从1970年1月1日开始的毫秒数）。比如用SimpleDateFormat解析：

SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss", Locale.getDefault());
try {
    Date date = sdf.parse("2024-05-20 14:30:00");
    long timestamp = date.getTime(); // 这就是可以给Android Plot用的数值型时间
} catch (ParseException e) {
    e.printStackTrace();
}

把所有时间点都转成时间戳，和对应的温度值一起存入数据列表。

2. 自定义时间轴格式化器 #

虽然底层用的是时间戳，但用户看到的得是正常的时间格式。咱们写一个自定义的Format类，把数值（时间戳）转成友好的字符串：

class TimeAxisFormatter extends Format {
    // 可以根据时间跨度动态调整格式，比如跨度大就显示日期+时间，跨度小只显示时分秒
    private SimpleDateFormat displayFormat = new SimpleDateFormat("HH:mm:ss", Locale.getDefault());

    @Override
    public StringBuffer format(Object obj, StringBuffer toAppendTo, FieldPosition pos) {
        if (obj instanceof Number) {
            long timestamp = ((Number) obj).longValue();
            Date date = new Date(timestamp);
            toAppendTo.append(displayFormat.format(date));
        }
        return toAppendTo;
    }

    @Override
    public Object parseObject(String source, ParsePosition pos) {
        // 缩放功能暂时不需要解析用户输入，返回null即可
        return null;
    }

    // 可选：动态切换格式的方法，比如当缩放跨度变大时调用
    public void setDisplayFormat(SimpleDateFormat format) {
        this.displayFormat = format;
    }
}

然后把这个格式化器绑定到X轴：

XYPlot plot = findViewById(R.id.temperature_plot);
plot.getGraph().getLineLabelStyle(XYGraphWidget.Edge.BOTTOM).setFormat(new TimeAxisFormatter());

3. 开启并配置缩放功能 #

Android Plot原生支持缩放，只需要开启对应的开关：

// 开启横轴（时间轴）缩放
plot.setDomainZoomable(true);
// 开启纵轴（温度轴）缩放（可选）
plot.setRangeZoomable(true);
// 开启拖动平移（可选，方便用户查看不同时间段）
plot.setDomainPannable(true);

如果需要手动设置缩放边界（比如按钮控制显示最近1小时的数据），直接用时间戳数值调用边界设置方法：

// 计算最近1小时的时间戳范围
long currentTimestamp = System.currentTimeMillis();
long oneHourAgo = currentTimestamp - 3600 * 1000;
// 设置横轴边界
plot.setDomainBoundaries(oneHourAgo, currentTimestamp, BoundaryMode.FIXED);

4. 绑定时间戳+温度数据到图表 #

确保你的XYSeries用时间戳作为X值，温度作为Y值：

ArrayList<Number> xTimestamps = new ArrayList<>();
ArrayList<Number> yTemperatures = new ArrayList<>();
// 填充数据：xTimestamps存时间戳，yTemperatures存对应温度
XYSeries temperatureSeries = new SimpleXYSeries(xTimestamps, yTemperatures, "温度变化");
// 添加系列到图表
plot.addSeries(temperatureSeries, new LineAndPointFormatter(Color.RED, Color.BLUE, Color.GRAY, null));

额外注意点 #

• 时间戳单位要统一：全程用毫秒或者全程用秒，别混着来，不然缩放比例会出错。
• 动态调整时间格式：如果用户缩放后时间跨度变大（比如从几分钟变成几天），可以在TimeAxisFormatter里切换成yyyy-MM-dd HH:mm的格式，让显示更合理。
• 监听缩放事件：如果需要在缩放时做额外逻辑（比如更新标题），可以给PanZoom设置监听器：

  plot.getPanZoom().setPanZoomListener(new PanZoomListener() {
      @Override
      public void onPanZoom(PanZoom.State state) {
          // 缩放或平移完成后触发，这里可以获取当前轴的边界值
          double lowerBound = plot.getDomainBoundaries().getMin();
          double upperBound = plot.getDomainBoundaries().getMax();
          // 做你需要的逻辑处理
      }
  });
  

内容的提问来源于stack exchange，提问作者Martin Massol