Oracle APEX中使用Chart.js 2.7传递数据数组时图表无法渲染求助

我之前在Oracle APEX里用Chart.js也遇到过几乎一模一样的问题，核心原因是你从P79_开头的页面项拿到的是字符串格式的数组（比如"[12000,15000,18000]"），而不是Chart.js能直接识别的JavaScript数组。下面是具体的解决步骤：

1. 修正数组解析逻辑 #

你当前的代码var BUDGET1 =[document.getElementById("P79_BUDGET1_AC").value]会把字符串数组包裹成一个嵌套数组（比如变成["[100,200,300]"]），Chart.js根本无法解析这种格式。正确的做法是用JSON.parse()把字符串转成真正的JS数组：

// 解析页面项的字符串值为数组
var BUDGET1 = JSON.parse(document.getElementById("P79_BUDGET1_AC").value);
var BUDGET2 = JSON.parse(document.getElementById("P79_BUDGET2_AC").value);

2. 增加错误校验（可选但推荐） #

为了避免页面项值格式错误导致解析失败，建议加上try-catch和数组校验：

var BUDGET1 = [];
try {
  const budgetStr = document.getElementById("P79_BUDGET1_AC").value;
  BUDGET1 = JSON.parse(budgetStr);
  // 确保解析结果是数组
  if (!Array.isArray(BUDGET1)) {
    BUDGET1 = [];
    console.error("P79_BUDGET1_AC的值不是合法数组格式");
  }
} catch (err) {
  console.error("解析P79_BUDGET1_AC失败:", err);
}

// 同理处理BUDGET2
var BUDGET2 = [];
try {
  const budgetStr = document.getElementById("P79_BUDGET2_AC").value;
  BUDGET2 = JSON.parse(budgetStr);
  if (!Array.isArray(BUDGET2)) {
    BUDGET2 = [];
    console.error("P79_BUDGET2_AC的值不是合法数组格式");
  }
} catch (err) {
  console.error("解析P79_BUDGET2_AC失败:", err);
}

3. 确保Chart初始化时机正确 #

要在页面项完成赋值后再执行Chart初始化代码，最稳妥的方式是：

• 把代码放在APEX的Dynamic Action中，触发条件选择「Page Load」
• 或者用jQuery的$(document).ready()包裹（APEX默认集成了jQuery）：

$(document).ready(function() {
  // 先解析数组
  var BUDGET1 = JSON.parse(document.getElementById("P79_BUDGET1_AC").value);
  var BUDGET2 = JSON.parse(document.getElementById("P79_BUDGET2_AC").value);

  // 初始化Chart示例
  const ctx = document.getElementById('your-chart-id').getContext('2d');
  new Chart(ctx, {
    type: 'bar', // 替换成你需要的图表类型
    data: {
      labels: ['Q1', 'Q2', 'Q3', 'Q4'], // 替换成你的标签数组
      datasets: [
        {
          label: 'Budget 1',
          data: BUDGET1,
          backgroundColor: 'rgba(255, 99, 132, 0.2)'
        },
        {
          label: 'Budget 2',
          data: BUDGET2,
          backgroundColor: 'rgba(54, 162, 235, 0.2)'
        }
      ]
    }
  });
});

4. 验证页面项的输出格式 #

确保你的即席查询返回的是合法的JSON数组字符串，比如[10000, 20000, 30000]，不要带多余的引号或者转义字符（比如不要返回"[10000,20000]"，这会导致解析嵌套）。同时确认页面项的「Display As」设置为「Hidden」或「Text Field」，确保值能正确传递到前端。

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