Javascript WebDataRock数据透视表配置示例

Question

我无法使用" hierarchy“参数进行演示，即使我指定了参数值，它也会将条件应用于所有的层级链。

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

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

同样引用自starter demo的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

Answer 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。