如何在堆叠的 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"
  }
]

演示