如何在Oracle APEX中修改图表X轴范围

完全可以通过 JavaScript 实现将 X 轴范围限定为当天及前一天的需求，以下是具体实现步骤和代码：

核心实现逻辑 #

Oracle APEX 图表基于 Oracle JET 组件，我们可以通过 JS 获取图表实例，动态修改 X 轴的min和max属性锁定时间范围；Y 轴若需固定 0-100 也可同步设置。

具体操作步骤 #

1. 给目标图表设置静态 ID（比如tempChart）：在图表属性的「高级」标签下找到「静态 ID」字段填写。
2. 在页面的「执行当页面加载时」或图表的「JavaScript 初始化代码」中添加以下代码：

// 计算时间范围：前一天00:00到当天23:59:59
const yesterdayStart = new Date();
yesterdayStart.setDate(yesterdayStart.getDate() - 1);
yesterdayStart.setHours(0, 0, 0, 0);

const todayEnd = new Date();
todayEnd.setHours(23, 59, 59, 999);

// 获取图表实例
const chart = apex.region("tempChart").widget().interactiveChart("getChart");

// 修改X轴时间范围
chart.axes[0].min = yesterdayStart;
chart.axes[0].max = todayEnd;

// 强制锁定Y轴温度范围为0-100（可选，若已有固定设置可省略）
chart.axes[1].min = 0;
chart.axes[1].max = 100;

// 刷新图表生效
chart.refresh();

关键细节说明 #

• 时间计算：代码自动计算前一天零点到当天午夜的时间范围，无需手动指定日期。
• 图表实例获取：apex.region("静态ID")是 APEX 获取区域实例的标准方法，需确保静态 ID 与图表设置完全一致。
• 轴索引：axes[0]对应 X 轴（时间轴），axes[1]对应 Y 轴（温度轴），若图表轴顺序不同需调整索引。
• 数据格式匹配：确保数据源中的时间字段为标准 Date 类型，若存储为字符串需先转换为 Date 对象。

调试验证 #

保存页面后运行，若图表未更新，可打开浏览器开发者工具（F12）查看控制台报错信息，检查静态 ID 是否正确、时间字段格式是否匹配。

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