图4错误堆叠

Question

我的目标是将一个聚集图和一个堆叠的图表与图4组合在一起。每个堆栈都可以包含正负值。

我使用的是这个示例堆叠和聚集列图，但我修改了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>

​

这就是我得到的结果

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

通过在堆栈之间添加空序列，我设法得到了预期的行为；但是，这样就留下了一个空白，我无法删除。不满意的解决办法

有没有办法：

( a)正确地堆叠系列

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

谢谢

Answer 1

我找到了适合我的需要的正确解决办法:用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);

这样，我就可以获得预期结果，而不必重新订购该系列。

主要缺点是在图例中创建了一个空元素。在我的例子中，这并不重要，因为我使用了在外部div中创建的自定义图例。

Answer 2

我们关于堆叠数据的指南中的这一说明与您所看到的现象相关：

关于堆叠数据的注意事项

请注意，图表不支持数据空白的序列叠加。

通过将序列的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