Nuxt3(Vue组合式API)中WebDataRocks自定义单元格获取cell_json问题

第一步：调整透视表配置，保留原始cell_json数据 #

WebDataRocks默认会对measure字段执行聚合操作（比如计数、求和），直接用原有配置会破坏cell_json的对象结构，导致拿不到完整数据。需要给cell_json对应的measure添加aggregation: "none"，禁用聚合以保留原始对象：

const pivotReport = {
  dataSource: {
    data: [
      // 你的数据源内容保持不变
    ],
    dataSourceType: "json",
  },
  slice: {
    rows: [
      { uniqueName: "employee_title" },
    ],
    columns: [
      { uniqueName: "Measures" },
      { uniqueName: "day_title" },
    ],
    measures: [
      {
        uniqueName: "cell_json",
        aggregation: "none", // 关键配置：禁用聚合，保留原始对象结构
        caption: "工时类型" // 可选：给列设置显示标题
      },
    ],
  },
};

第二步：修改customizeCell函数，获取数据并实现需求 #

配置调整后，就能通过data.rawValue拿到完整的cell_json对象，接下来按需求设置单元格内容和背景色：

onMounted(() => {
  pivotInstance = new $webdatarocks({
    container: pivotContainer.value,
    customizeCell: customizeCellFunction,
  });
  // 加载配置好的报表
  pivotInstance.load(pivotReport);
});

function customizeCellFunction(cell, data) {
  // 只处理`cell_json`对应的数值单元格，避免修改行/列标题等无关单元格
  if (data.type === "value" && data.measure?.uniqueName === "cell_json") {
    const cellJson = data.rawValue;
    // 处理`cell_json`为null的情况
    if (!cellJson) {
      cell.text = "";
      return;
    }
    // 设置单元格显示内容为`vr_worksheet_time_type_code`
    cell.text = cellJson.vr_worksheet_time_type_code;
    // 非工作时间时设置绿色背景
    if (!cellJson.vr_worksheet_time_type_is_worktime) {
      cell.background = "#7ccd7c"; // 色值可根据需求自行调整
    }
  }
}

关键注意点 #

• aggregation: "none"是核心：没有这个配置，WebDataRocks会把cell_json当成普通数值做聚合，原始对象结构会被破坏。
• data.rawValue：聚合设为none后，该属性会返回数据源中原始的cell_json对象，而非聚合处理后的结果。
• 类型判断：通过data.type和data.measure.uniqueName锁定目标单元格，避免误修改其他区域。

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