Amcharts 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

Я нашел правильный обходной путь для своих нужд: вставьте пустую серию с накоплением = false, чтобы отделить стеки, но поставьте сложенную = 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 series значение 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