如何将 amcharts 4 用于与教程略有不同的多组和堆积柱形图

Question

I was trying to adapt a grouped and stacked column chart based on amcharts 4 demo and ended up with this fiddle: https://jsfiddle.net/ricardocostabrrj/odmbk9L6/8/ but I couldn't achieve what I really need.

Code is below:

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");

In my case, I'd like to have a chart with this same format, but for 3 different products, grouped by year and each stacking 1st and 2nd Half sales. Something like this (sorry for the drawing):

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

Data - not sure of the format is ok - would look like this:

    "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
    }
}];

Any ideas about how o build such chart? Thanks!

Answer 1

So it looks like you're combining the stacked and clustered column chart.

You need to set the first set of data in your series to stacked = false . The all remaining data that you want to stack on top to stacked = true . This is how they do it as described here: https://www.amcharts.com/demos/stacked-clustered-column-chart/

I just added a third parameter (as described in the link above), of stacked then passed that value and set it in the createSeries function.

Here's an adaptation of what you had, but I fudged the numbers. https://jsfiddle.net/eabtvduq/