怎么在amChart V3导出功能中导出百分比值

本教程将介绍如何在amChart V3导出功能中导出百分比值的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

我正在使用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导出功能中导出百分比值的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。