如何在pivotable.js中正确展示表头及其对应字段值

你不需要必须拆分数据，pivottable.js本身支持同时展示多个数值字段，是你当前的配置不对导致无法正常展示。

你现在用的List Unique Values聚合器只适合提取同分组下的唯一值，同时你没有把三个需要展示的数值字段都传入vals参数，所以无法同时渲染多个指标及其表头。

方案1：无需修改数据，仅调整配置即可实现需求 #

你直接把三个数值字段传入vals数组，再调整聚合器为适配数值的类型即可。如果需要把指标名称作为单独的列/行展示，直接将内置的「值」维度加入cols或rows配置即可，渲染时会自动把字段名作为表头。
修改后的参考代码如下：

$(this.shadowRoot).find("#databanktable").pivotUI(
    [data.header, ...data.data],
    {
        cols: [...this.tableColumns, "值"], // 新增：把指标名称作为列的最后一级，自动展示字段名
        rows: this.tableRows,
        // 传入所有需要展示的数值字段
        vals: ["measc02_1", "measc01_1", "membc02_1"],
        rendererOptions: {
            table: {
                colTotals: false,
                rowTotals: false,
            },
        },
        showUI: false,
        aggregatorName: "Sum", // 数值聚合可按需替换为First/Max等，若要展示原始值且每个分组只有一条数据可改用"First"
        rendererName: "Table",
    },true);

方案2：拆分数据为长表（更灵活的进阶方案） #

如果你后续需要对指标做筛选、自定义分组、跨指标计算等操作，就可以选择把每条数据拆为3条的方案，也就是宽表转长表的unpivot操作。这种方式适配性更强，适合复杂的透视分析场景。

两种方案都可以实现你的需求，你可以根据自己的业务复杂度选择即可。

内容的提问来源于stack exchange，提问作者Rune V. Søndergaard