如何在amchart導出功能中導出百分比值

Question

我正在使用AmCharts繪制餅圖，並且正在使用導出插件將數據導出為文件。 我正在顯示不同國家/地區的銷售額百分比，並且在將數據導出到CSV或XLSX文件時也希望顯示此百分比，但我不能這樣做。

這是我的代碼

var chart = AmCharts.makeChart("chartdivtaxes", {
  type: "pie",
  startDuration: 0,
  theme: "light",
  addClassNames: true,
  labelText: "[[percents]]",
  innerRadius: "30%",
  labelFunction: function(value, valueText, valueAxis) {
    valueText = parseFloat(valueText);
    var percentageText = valueText
      .toFixed(1)
      .replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
    return percentageText + "%";
  },

  defs: {
    filter: [
      {
        id: "shadow",
        width: "200%",
        height: "200%",
        feOffset: {
          result: "offOut",
          in: "SourceAlpha",
          dx: 0,
          dy: 0
        },
        feGaussianBlur: {
          result: "blurOut",
          in: "offOut",
          stdDeviation: 5
        },
        feBlend: {
          in: "SourceGraphic",
          in2: "blurOut",
          mode: "normal"
        }
      }
    ]
  },

  dataProvider: [
    {
      countryName: "India",
      country: "sale in india:",
      litres: "800.00"
    },
    {
      countryName: "africa",
      country: "sale in africa:",
      litres: "800.00"
    },
    {
      countryName: "UK",
      country: "sale in UK:",
      litres: "800.00"
    },
    {
      countryName: "US",
      country: "sale in US:",
      litres: "800.00"
    }
  ],
  valueField: "litres",
  titleField: "country",
  balloon: {
    fixedPosition: false,
    color: "#ffffff",
    fillAlpha: 0.9,
    fillColor: "#00000"
  },
  export: {
    enabled: true,
    divId: "exportLevy",
    columnNames: {
      litres: "TotalSale",
      countryName: "Name"
    },
    menu: [
      {
        class: "export-main",
        label: "Export",
        menu: [
          {
            format: "XLSX"
          },
          {
            format: "CSV"
          }
        ]
      }
    ],

    exportFields: ["countryName", "litres", "percents"]
  }
});

Answer 1

有兩種解決方法-兩者都涉及使用export插件提供的processData回調。

1）使用processData在數據中添加一個percent屬性，並使用toCSV或toXLSX手動觸發下載。 請注意，您將需要引發一個異常，以防止插件多次觸發下載：

var chart = AmCharts.makeChart("...", {
  // ...
  export: {
    // ...
    processData: function(data, cfg) {
      //only for CSV and XLSX export. Wrap in an ignore call to prevent infinite loop
      if ((cfg.format === "CSV" || cfg.format === "XLSX") && !cfg.ignoreThatRequest) {
        var sum = data.reduce(function(accumulator, currentDataValue) {
          return accumulator + parseFloat(currentDataValue.TotalSale);
        }, 0);

        data.forEach(function(currentDataValue) {
          currentDataValue.percents =
            (parseFloat(currentDataValue.TotalSale) / sum * 100).toFixed(1) + "%";
        });
        //will map to this.toCSV or this.toXLSX
        this["to" + cfg.format]({
            data: JSON.parse(JSON.stringify(data)),
            ignoreThatRequest: true, //set ignore flag as processData will execute again when this is called
            exportFields: ["Name", "TotalSale", "percents"]
          },
          function(output) {
            this.download(output, cfg.mimeType, cfg.fileName + "." + cfg.extension);
          }
        );
        throw "Invoked – Use custom handler (stop multiple download)"; //throw an exception to stop the multi-download attempt
      }

      return data;
    }
  }
});

方法＃1的演示

2）或者，在您的dataProvider中添加一個虛擬的percents屬性，將其值設置為null，並在導出圖表之前使用processData進行填充。 這比較簡單，不需要異常解決方法即可防止多次下載：

var chart = AmCharts.makeChart("...", {
  // ...
  export: {
  // ...
    processData: function(data, cfg) {
        var sum = data.reduce(function(accumulator, currentDataValue) {
          return accumulator + parseFloat(currentDataValue.TotalSale);
        }, 0);

        data.forEach(function(currentDataValue) {
          currentDataValue.percents =
            (parseFloat(currentDataValue.TotalSale) / sum * 100).toFixed(1) + "%";
        }); 
      return data;
    }
  }
});

方法＃2的演示