来自演示入门示例的 Javascript WebDataRock 数据透视表配置答案

【问题标题】：Javascript WebDataRock pivot-table configuration from a demo starter example来自演示入门示例的 Javascript WebDataRock 数据透视表配置
【发布时间】：2020-12-14 22:07:38
【问题描述】：

我无法使用“层次结构”参数使这个演示工作，即使我指定了参数值，它也会将条件应用于所有层次结构链。

"conditions": [{
            "formula": "#value > 1",                      
            "hierarchy": "Country",
            "measure": "Discount",
            "format": { 
                "backgroundColor": "#C5E1A5",
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
    }]

入门演示：https://www.webdatarocks.com/doc/conditional-formatting/

CodePen 示例也从入门演示中引用：https://codepen.io/webdatarocks/pen/oMvYGd

您可以将 CodePen JS 代码替换为以下代码，以直接获得分层渲染。

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    height: 395,
    report: {
        "slice": {
            "rows": [
                {
                    "uniqueName": "Country"
                },
                {
                    "uniqueName": "Category"
                }
            ],
            "columns":[
            { "uniqueName": "Color" }
            ],
        "measures": [
                {
                    "uniqueName": "Discount",
                    "aggregation": "sum"
                }
            ] ,
        },
        "conditions": [{
            "formula": "#value > 1",                       
            "hierarchy": "Country",
            "measure": "Discount",
            "format": { 
                "backgroundColor": "#C5E1A5",
                "color": "#000000",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
        }],
        "dataSource": {
        "filename": "https://cdn.webdatarocks.com/data/data.csv"
        }
    }
});

这里是相关的github问题，https://github.com/WebDataRocks/web-pivot-table/issues/2

【问题讨论】：

标签： javascript npm pivot-table webdatarocks

【解决方案1】：

你是对的。 "hierarchy" 参数好像没有效果。

另一种解决方案是使用customizeCell 挂钩应用格式：https://www.webdatarocks.com/doc/customizecell/。

例如：

JS：

var pivot = new WebDataRocks({
  container: "#wdr-component",
  toolbar: true,
  height: 395,
  customizeCell: customizeCellFunction,
  report: {
    slice: {
      rows: [
        {
          uniqueName: "Country"
        },
        {
          uniqueName: "Category"
        }
      ],
      columns: [{ uniqueName: "Color" }],
      measures: [
        {
          uniqueName: "Discount",
          aggregation: "sum"
        }
      ]
    },
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv"
    }
  }
});

function customizeCellFunction(cellBuilder, cellData) {
  if (cellData && cellData.type === "value" && cellData.measure && cellData.measure.uniqueName === "Discount" && cellData.value > 1 ) {
    if (
      cellData.rows &&
      cellData.rows.length > 0 &&
      cellData.rows[cellData.rows.length - 1].hierarchyUniqueName === "Country"
    ) {
      cellBuilder.addClass("green");
    }
  }
}

CSS：

.green {
  background-color: #c5e1a5 !important;
  color: #000000 !important;
  font-family: Arial !important;
  font-size: 12px !important;
}

这是一个 CodePen 示例用于说明：https://codepen.io/VD_A/pen/vYXgqbY。

【讨论】：