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

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

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

有没有办法：

a）正确堆叠系列

b）完全隐藏空系列，包括其在类别轴上的空间？

谢谢

Answer 1

我们的堆叠数据指南中的这个注释与您所看到的现象有关：

Note about stacked data

请注意，图表不支持堆叠数据中存在间隙的系列。

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

然而，如果我们删除数据中的“间隙”并使非洲系列成为新集群中的第一个堆栈，您会发现为了这个数据集的目的，事情再次起作用：

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中创建的自定义图例。