如何在堆疊的 Amchart 列頂部顯示百分比

Question

我正在使用堆疊 amcharts 。 例如在Amchart 中的一個

現在我想在每列的頂部顯示總體百分比。 如何添加百分比

Answer 1

您可以通過將圖表的labelText字符串設置為"[[percents]]%" labelText "[[percents]]%"來顯示百分比而不是列的值。 該文檔列出了所有可以使用的[[shortcodes]] 。

  "graphs": [{
    // ...
    "labelText": "[[percents]]%",
    // ...
  }, 
  // repeat for each graph object
  ]

演示

編輯

如果您需要顯示類別總價值相對於所有數據總和的百分比，您可以通過在dataProvider提供類別總計和所有列的總和來解決此問題，創建一個不可見的折線圖，使用列總計並使用labelFunction顯示計算的百分比

以下是您的數據外觀示例：

  "dataProvider": [{
    "year": 2003,
    "europe": 2.5,
    "namerica": 2.5,
    "asia": 2.1,
    "lamerica": 0.3,
    "meast": 0.2,
    "africa": 0.1,
    "columnTotal": 7.7, // total for this column
    "dataTotal": 24.7  // calculated total of the data in all categories
  }, 
  // repeat for each data point
]

這是圖形設置：

"graphs": [
    // other graphs omitted
  {
    "showBalloon": false, //ensures that no balloon is displayed
    "visibleInLegend": false, //ensures that this graph is not displayed in the legend
    "lineAlpha": 0, //hides the line
    "labelText": "[[value]]", //required for the labelFunction
    "labelFunction": function(graphDataItem, valueText) { //calculates the percent and displays the label
      return ((graphDataItem.dataContext.columnTotal / graphDataItem.dataContext.dataTotal) * 100).toFixed(2) + "%";
    },
    "valueField": "columnTotal"
  }
]

演示