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

有两种方法可以解决这个问题 - 这两种方法都涉及使用导出插件提供的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属性，并将其值设置为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;
    }
  }
});

Demo of method #2

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

1 个答案: