将进度条添加到 webdatarocks 表中的 td

问题描述

如果我们可以在 td.conf 文件中添加进度条，我在 webdaTarocks 文档中没有找到任何帮助。有什么办法可以对这样的表执行此操作：

var pivot = new WebDaTarocks({
        container: "#wdr-component",toolbar: true,width: "100%",height: 600,report: {
            "dataSource": {
                "dataSourceType": "csv","filename": "https://cdn.webdaTarocks.com/data/data.csv"
            },options: {
                      grid: {
                          type: 'classic',}
                  },"slice": {
                "reportFilters": [{
                    "uniqueName": "Color"
                },{
                    "uniqueName": "Destination"
                }],"rows": [{
                    "uniqueName": "Category","filter": {
                        "members": ["Category.Clothing","Category.Cars"],"negation": true
                    }
                },{
                    "uniqueName": "Business Type"
                }],"columns": [{
                    "uniqueName": "Measures"
                },{
                    "uniqueName": "Country","filter": {
                        "members": ["Country.United Kingdom","Country.Germany"],"negation": true
                    }
                }],"measures": [{
                    "uniqueName": "Price","aggregation": "sum","format": "currency"
                },{
                    "uniqueName": "discount","active": false,"format": "currency"
                }],"formats": [{
                    "name": "","maxDecimalPlaces": 2
                },{
                    "name": "currency","thousandsSeparator": " ","decimalSeparator": ".","currencySymbol": "$","currencySymbolAlign": "left","nullValue": "","textAlign": "right","isPercent": false
                }],"expands": {
                    "rows": [{
                        "tuple": ["Category.Accessories"]
                    },{
                        "tuple": ["Category.Bikes"]
                    }]
                }
            }
        }
    }

);

function setCustomizefunction() {
    pivot.customizeCell(customizeCellFunction);
}

/* Insert icons to the cells */

function customizeCellFunction(cell,data) {
    if (data.type == "value" && !data.isDrillThrough && data.isGrandTotalColumn) {
        if (data.value < 50000) {
            cell.text = "<img src='https://www.webdaTarocks.com/wd_uploads/2019/02/icons8-decline-64-1.png' class='centered'>";
        } else if (data.value >= 50000) {
            cell.text = "<img src='https://www.webdaTarocks.com/wd_uploads/2019/02/icons8-account-64.png' class='centered'>";
        }
    }
}

<link href="https://cdn.webdaTarocks.com/latest/webdaTarocks.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.webdaTarocks.com/latest/webdaTarocks.toolbar.min.js"></script>
<script src="https://cdn.webdaTarocks.com/latest/webdaTarocks.js"></script>

<div id="wdr-component"></div>

例如，我希望能够添加：

在澳大利亚的单元格内，并在每个单元格中添加进度条。有没有办法让我使用 WebDaTarocks 做到这一点。

解决方法

是的，可以自定义单元格内容并添加进度条。 以下是如何使用 customizeCell 实现这一目标的示例：

var pivot = new WebDataRocks({
  container: "#wdr-component",toolbar: true,width: "100%",height: 600,customizeCell: customizeCellFunction,report: {
    dataSource: {
      dataSourceType: "csv",filename: "https://cdn.webdatarocks.com/data/data.csv"
    },slice: {
      reportFilters: [
        {
          uniqueName: "Color"
        },{
          uniqueName: "Destination"
        }
      ],rows: [
        {
          uniqueName: "Category",filter: {
            members: ["Category.Clothing","Category.Cars"],negation: true
          }
        },{
          uniqueName: "Business Type"
        }
      ],columns: [
        {
          uniqueName: "Measures"
        },{
          uniqueName: "Country",filter: {
            members: ["Country.United Kingdom","Country.Germany"],negation: true
          }
        }
      ],measures: [
        {
          uniqueName: "Price",aggregation: "percentofrow",format: "percentage"
        },{
          uniqueName: "Discount",aggregation: "sum",active: false
        }
      ],expands: {
        rows: [
          {
            tuple: ["Category.Accessories"]
          },{
            tuple: ["Category.Bikes"]
          }
        ]
      }
    },options: {
      grid: {
        type: "classic"
      }
    },formats: [
      {
        name: "percentage",thousandsSeparator: " ",decimalSeparator: ".",decimalPlaces: 2,currencySymbol: "",currencySymbolAlign: "left",nullValue: "",textAlign: "right"
      }
    ]
  }
});

function customizeCellFunction(cell,data) {
  if (
    data &&
    data.hierarchy &&
    data.hierarchy.uniqueName == "Price" &&
    data.type == "value"
  ) {
    cell.text = `<div class="tooltip" title="Value: ${
      data.value ? data.label : "empty"
    }"><div class="w3-container">
        <div class="w3-light-grey">
            <div class="w3-container w3-light-green w3-center" style="width:${
            data.value && data.value > 100 ? "100%" : cell.text
          }">${data.label}</div>
        </div>
      </div></div>`;
  }
}

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div id="wdr-component"></div>