将列的总标签添加到堆叠图表（xy图表）

Question

我正在根据示例https://www.amcharts.com/demos/100-stacked-column-chart/编写我的第一个amcharts4堆积图，但是我在将总标签添加到每列上方时遇到了问题（总和就像简单的值之和，而不是百分比）。

https://imgur.com/a/OgpfXm8

Answer 1

曾经有totalText可以用来在amchart3：https://stackoverflow.com/a/47722320/2410655中实现所需的功能，但是我不知道它是否可以在{{1}中使用}。

要解决此问题，我的想法是让2个amchart4彼此相对，并使用CategoryAxis之一来显示每个类别的总数。

数据更改

您需要为每个类别的总计添加一个数据字段。您可以计算出该值，然后手动或使用JavaScript循环将其添加到数据中：

CategoryAxis

添加另一个相反的类别xAxis

此处显示总计的技巧是使另一个类别轴位于相反的位置，并使用let data = [ { category: "One", value1: 1, value2: 5, value3: 3, total: 9 }, { category: "Two", value1: 2, value2: 5, value3: 3, total: 10 }, { category: "Three", value1: 3, value2: 5, value3: 4, total: 12 }, { category: "Four", value1: 4, value2: 5, value3: 6, total: 15 }, { category: "Five", value1: 3, value2: 5, value3: 4, total: 12 }, { category: "Six", value1: 2, value2: 13, value3: 1, total: 16 } ]; 更改其标签以显示总计：

adapter

我试图让另一个类别轴直接显示let chart = am4core.createFromConfig({ data: data, ..., xAxes: [{ type: "CategoryAxis", dataFields: { category: "category" }, ... }, { type: "CategoryAxis", dataFields: { category: "category" }, renderer: { ..., opposite: true, labels: { adapter: { text: function(label, target, key) { return "Total: {total}"; } } } } }], ... }, "chart", am4charts.XYChart); ，例如：

total

之所以失败，是因为类别轴自动合并重复项（例如，类别“三个”和“五个”中的总计12个）并导致数字丢失。

结果

演示： http://jsfiddle.net/davidliang2008/aq9Laaew/297155/

Answer 2

执行此操作的方法是在最后一个堆叠的序列上创建一个LabelBullet，将其放置在图表之外，例如dy = -20。

要使其在图表外可见，请设置chart.maskBullets = false，否则它将被裁剪。

要显示总计，请确保让相关轴提前计算它们，例如通过valueAxis.calculateTotals = true;（仅适用于堆叠系列）。然后在标签的text上使用.total placeholder，在下面的演示中为labelBullet.label.text = {valueY.total};。

示例代码：

// Enable .total and .totalPercent placeholders for stacked series
valueAxis.calculateTotals = true;

// Allow labels to show beyond chart area
chart.maskBullets = false;

// Create a LabelBullet for the top, stacked series
var labelBullet = series3.bullets.push(new am4charts.LabelBullet());
var label = labelBullet.label;
label.text = "{valueY.total}";
label.dy = -20;

下面是我们的100% Stacked Column Chart的分支，上面的代码为

：

https://codepen.io/team/amcharts/pen/c06396113836bb29024713d8bac5c883

截屏：

在此fork中，为方便起见，我禁用了滚动条。如果启用它，请记住也要向上移动它，例如chart.scrollbarX.dy = -25;。否则它将覆盖LabelBullet。