如何在amChart V3导出功能中导出百分比值 [英] How to export the percentage value in amchart V3 export functionality

问题描述

我正在使用AmCharts V3绘制饼图，并使用导出插件将数据导出为文件。我正在显示不同国家/地区销售的百分比，并且希望在将数据导出到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"]
  }
});

推荐答案

有两种方法可以解决此问题，这两种方法都涉及使用导出插件提供的processData回调。

1)使用processData在数据中添加百分比属性，并使用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;
    }
  }
});

Demo of method #1

2)或者，在dataProvider中添加一个值设置为空的虚拟percents属性，并在导出图表之前使用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;
    }
  }
});

Demo of method #2

这篇关于如何在amChart V3导出功能中导出百分比值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！