Как использовать amcharts 4 для нескольких групп и столбчатую диаграмму с накоплением, немного отличающуюся от учебников - PullRequest
Новая
       10

Как использовать amcharts 4 для нескольких групп и столбчатую диаграмму с накоплением, немного отличающуюся от учебников

0 голосов
/ 29 октября 2019

Я пытался адаптировать сгруппированную и сложенную столбцовую диаграмму на основе демо-версии amcharts 4, и в итоге получил следующую скрипку: https://jsfiddle.net/ricardocostabrrj/odmbk9L6/8/, но я не смог достичь того, что мне действительно нужно.

Кодниже: 

am4core.useTheme(am4themes_animated);
// Themes end

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


// Add data
chart.data = [{
  "year": "2018",
  "H1": 5.5,
  "H2": 5.5
}, {
  "year": "2019",
  "H1": 2.1,
  "H2": 6.7
}, {
  "year": "2020",
  "H1": 4.1,
  "H2": 3.7
}];

// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.location = 0;


var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;

// Create series
function createSeries(field, name) {

  // Set up series
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.name = name;
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "year";
  series.sequencedInterpolation = true;

  // Make it stacked
  series.stacked = true;

  // Configure columns
  series.columns.template.width = am4core.percent(60);
  series.columns.template.tooltipText = "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";

  // Add label
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.label.text = "{valueY}";
  labelBullet.locationY = 0.5;

  return series;
}

createSeries("H1", "1st Half");
createSeries("H2", "2nd Half");

В моем случае я хотел бы иметь диаграмму с тем же форматом, но для 3-х различных продуктов, сгруппированных по годам, и каждый из которых складывает продажи в 1-й и 2-й половине. Примерно так (извините за рисунок):

https://i.stack.imgur.com/oYuVv.png

Данные - не уверен, что формат в порядке - будет выглядеть так: 

    "year": "2018",
    "Half: "H1",
    "ProdA": 5.5,
    "ProdB": 3.1,
    "ProdC": 1.9
    },{
    "year": "2018",
    "Half: "H2",
    "ProdA": 3.5,
    "ProdB": 3.1,
    "ProdC": 1.9
    }, {
    "year": "2019",
    "Half: "H1",
    "ProdA": 2.5,
    "ProdB": 1.1,
    "ProdC": 2.3
    }, {
    "year": "2019",
    "Half: "H2",
    "ProdA": 7.0,
    "ProdB": 1.0,
    "ProdC": 4.5
    }, {
    "year": "2020",
    "Half: "H1",
    "ProdA": 9.1,
    "ProdB": 2.8,
    "ProdC": 3.1
    },{
    "year": "2020",
    "Half: "H2",
    "ProdA": 10.4,
    "ProdB": 2.1,
    "ProdC": 1.2
    }
}];

Любойидеи о том, как построить такую ​​диаграмму? Спасибо!

1 Ответ

0 голосов
/ 29 октября 2019

Похоже, вы объединяете столбчатую диаграмму с накоплением и кластеризацией.

Вам необходимо установить для первого набора данных в серии значение stacked = false. Все остальные данные, которые вы хотите поместить поверх stacked = true. Вот как они это делают, как описано здесь: https://www.amcharts.com/demos/stacked-clustered-column-chart/

Я просто добавил третий параметр (как описано в ссылке выше), stacked, затем передал это значение и установил его в createSeriesфункция.

Вот адаптация того, что у вас было, но я обманул цифры. https://jsfiddle.net/eabtvduq/

...