JavaScript Tabulator自定义CSS格式化器：正负值居中条形图及分组缩放

核心思路 #

Tabulator的单元格格式化函数本身无法直接获取分组极值，但可以通过预计算分组极值+格式化器读取极值的方式实现需求，具体步骤如下：

1. 预计算分组极值 #

利用Tabulator的groupComplete回调，在分组生成/更新时，遍历当前分组的所有行数据，计算目标列的最大、最小值，并将极值存储到分组对象的自定义属性中：

var table = new Tabulator("#example-table", {
    groupBy: "category", // 替换为你的分组字段
    groupComplete: function(group) {
        // 获取当前分组的所有行数据
        const groupRows = group.getRows();
        // 提取目标列的所有数值（替换"targetField"为你的列字段名）
        const values = groupRows.map(row => row.getData().targetField);
        // 计算分组内的极值
        const maxVal = Math.max(...values);
        const minVal = Math.min(...values);
        // 将极值存入分组对象的自定义属性
        group._groupExtremes = { max: maxVal, min: minVal };
    },
    // 其他表格配置项...
});

2. 编写自定义条形图格式化器 #

在格式化函数中，通过当前单元格的行对象获取所属分组，读取预存的分组极值；无分组时则使用全局预计算的极值，再根据数值正负计算条形图的偏移、宽度和颜色：

function centeredBarFormatter(cell, formatterParams) {
    const value = cell.getValue();
    const row = cell.getRow();
    const group = row.getParentGroup();
    let extremes;

    // 区分分组/全局场景，获取对应极值
    if (group) {
        extremes = group._groupExtremes;
    } else {
        extremes = formatterParams.globalExtremes;
    }

    // 计算条形图的宽度比例（以绝对值最大的极值为基准）
    const absMax = Math.max(Math.abs(extremes.max), Math.abs(extremes.min));
    const widthPercent = (Math.abs(value) / absMax) * 100;
    // 配置正负对应的对齐方式、颜色和偏移
    const [align, transform, color] = value >= 0 
        ? ["left", "0", "#2ecc71"] 
        : ["right", "-100%", "#e74c3c"];

    // 返回带样式的DOM结构
    return `
        <div style="width:100%; height:100%; position:relative; text-align:center; display:flex; align-items:center; justify-content:center;">
            <span style="position:relative; z-index:1;">${value}</span>
            <div style="position:absolute; top:0; ${align}:50%; width:${widthPercent}%; height:100%; background:${color}; opacity:0.6; transform:translateX(${transform});"></div>
        </div>
    `;
}

3. 配置列并传入全局极值 #

在列配置中指定自定义格式化器，并传入提前计算好的全局极值（全局极值可在表格初始化前遍历数据得出，或通过dataLoaded回调动态计算）：

{
    title: "数值条形图",
    field: "targetField", // 替换为你的列字段名
    formatter: centeredBarFormatter,
    formatterParams: {
        // 替换为实际计算的全局最大、最小值
        globalExtremes: { max: 120, min: -90 }
    },
    width: 200
}

补充说明 #

• groupComplete会在分组创建、数据刷新、分组结构变化时自动触发，确保极值始终与当前分组数据同步；
• 如果需要动态计算全局极值，可以在表格初始化前遍历原始数据，或使用dataLoaded回调：

  dataLoaded: function(data) {
      const values = data.map(item => item.targetField);
      const globalExtremes = {
          max: Math.max(...values),
          min: Math.min(...values)
      };
      // 更新列的formatterParams
      table.updateColumnDefinition("targetField", {
          formatterParams: { globalExtremes }
      });
  }
  

内容的提问来源于stack exchange，提问作者Jakub.Novotny