amcharts 4 错误堆叠

Question

我的目标是将聚类图和堆叠图与 amcharts 4 相结合。每个堆栈可以包含正值和负值。

我正在使用这个例子Stacked and Clustered Column Chart，但我修改了chart.data中的数据。

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [ {
  "year": "2003",
  "europe": -2.5,
  "namerica": -2.5,
  "asia": 2.1,
  "lamerica": 1.2,
  "meast": 0.2,
  "africa": -1
}, {
  "year": "2004",
  "europe": 2.6,
  "namerica": 2.7,
  "asia": 2.2,
  "lamerica": 1.3,
  "meast": 0.3,
  "africa": 0.1
}, {
  "year": "2005",
  "europe": 2.8,
  "namerica": 2.9,
  "asia": 2.4,
  "lamerica": 1.4,
  "meast": 0.3,
  "africa": 0.1
} ];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

var  valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Expenditure (M)";

// Create series
function createSeries(field, name, stacked) {
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "year";
  series.name = name;
  series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
  series.stacked = stacked;
  series.columns.template.width = am4core.percent(95);
}

createSeries("europe", "Europe", false);
createSeries("namerica", "North America", true);
createSeries("asia", "Asia", false);
createSeries("lamerica", "Lating America", true);
createSeries("meast", "Middle East", true);
createSeries("africa", "Africa", true);

// Add legend
chart.legend = new am4charts.Legend();

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

This is the result I got

如您所见，第一个元素的堆叠是错误的，因为我堆叠在最后一个负元素上，而不是在当前堆叠上。

我设法通过在堆栈之间添加空系列来获得预期的行为；但后来我留下了一个空白 space 我无法删除。 unsatisfying workaround

有没有办法：

a) 正确堆叠系列

b) 完全隐藏一个空系列，包括其在类别轴上的 space？

谢谢

Answer 1

我们关于堆叠数据的指南中的这条注释与您看到的现象相关：

Note about stacked data

Please note, that the chart does not support stacking of series with gaps in data.

通过将系列的 stacked 属性设置为 false，我们是说我们希望另一组堆积柱从该系列开始。非洲系列是第二个集群中的第三个堆栈，但第一个在第一个类别中具有负值 (2003)。我不确定如何显示它，例如当其他一切都为正时，负值如何在堆栈中占据其份额，尤其是当它堆叠在正值之上时？

然而，如果我们删除数据中的 "gap" 并使非洲系列成为新集群中的第一个堆栈，您会发现出于此数据集的目的，事情再次起作用：

createSeries("europe", "Europe", false);
createSeries("namerica", "North America", true);
createSeries("africa", "Africa", false); // Switched this with Asia
createSeries("asia", "Asia", true);
createSeries("lamerica", "Latin America", true);
createSeries("meast", "Middle East", true);

截图：

演示：

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

Answer 2

我找到了满足我需要的正确解决方法：插入带有 stacked=false 的空系列以分隔堆栈，但为所有其他系列放置 stacked=true：

createSeries("europe", "Europe", true);
createSeries("namerica", "North America", true);
// empty series to separate stacks //
   var series = chart.series.push(new am4charts.ColumnSeries());
   series.dataFields.valueY = '';
   series.dataFields.categoryX = '';
////
createSeries("asia", "Asia", true);
createSeries("lamerica", "Lating America", true);
createSeries("meast", "Middle East", true);
createSeries("africa", "Africa", true);

这样我就得到了 expected result 而无需重新订购系列

主要缺点是在图例中创建了一个空元素。就我而言，这无关紧要，因为我使用了在外部 div.

中创建的自定义图例

amcharts 4 错误堆叠

amcharts 4 wrong stacking

javascript

bar-chart

amcharts