amchart 내보내기 기능에서 백분율 값을 내보내는 방법

Question

AmCharts를 사용하여 원형 차트를 그리고 내보내는 플러그인을 사용하여 데이터를 파일로 내보내고 있습니다. 다른 국가에서 판매 비율 백분율을 표시하고 CSV 또는 XLSX 파일로 내 데이터를 내보낼 때도이 백분율을 표시하고 싶습니다. 그러나 그렇게 할 수는 없습니다. 수출 플러그인에 의해 제공되는 processData 콜백을 사용하는 것을 포함 둘 -

다음은 이것에 대해 갈 수있는 방법은 두 가지가 있습니다 내 코드

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

입니다.

1) 데이터에 percent 속성을 추가하고 toCSV 또는 toXLSX을 사용하여 수동으로 다운로드를 트리거하려면 processData을 사용하십시오. 당신이 다운로드 여러 번 트리거에서 플러그인을 방지하기 위해 예외를 던질 필요가 있습니다 :

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) 또는 null로 설정 값으로의 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

을