So exportieren Sie den Prozentwert in Amchart-Exportfunktionalität

Question

Ich zeichne ein Kreisdiagramm mit AmCharts und verwende das Export-Plugin, um die Daten als Datei zu exportieren. Ich zeige eine prozentuale Aufteilung des Verkaufs in verschiedenen Ländern an und möchte diesen Prozentsatz auch anzeigen, wenn ich meine Daten in eine CSV- oder XLSX-Datei exportiere, aber ich kann dies nicht tun.

Hier ist mein Code

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

Es gibt zwei Möglichkeiten, wie Sie zu diesem gehen kann - die beide die processData Rückruf durch den Export-Plugin angeboten beinhalten werden.

1) Verwenden Sie processData, um eine Prozenteigenschaft in Ihren Daten hinzuzufügen und manuell einen Download mit toCSV oder toXLSX auszulösen. Beachten Sie, dass Sie eine Ausnahme auslösen, müssen Sie das Plugin, um zu verhindern Auslösung der Download mehrere Male:

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) Alternativ können Sie eine Dummy-percents Eigenschaft in Ihrem Datenprovider mit seinen Mehrwert auf null gesetzt und verwenden Sie processData, um es vor dem Export des Diagramms zu füllen. Das ist einfacher und keine Ausnahme Abhilfe erforderlich, um mehrere Downloads zu verhindern:

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