Amcharts Multi axys 仅转换为 x,y

Question

I need to generate a report that counts issue threads on my system by category which uses amcharts 4 and the following code:

 am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("chart1", am4charts.XYChart); // chart.language.locale = am4lang_pt_BR; chart.dateFormatter.language = new am4core.Language(); chart.dateFormatter.language.locale = am4lang_pt_BR; // Increase contrast by taking evey second color chart.colors.step = 2; // Add data chart.data = [{ "date": "2020-01", "Baixo": 1596, "Médio": 2902, "Alto": 8702, "Critico": 5695 }, { "date": "2020-02", "Baixo": 596, "Médio": 902, "Alto": 702, "Critico": 695 }, { "date": "2020-03", "Baixo": 156, "Médio": 292, "Alto": 870, "Critico": 569 }, { "date": "2020-04", "Baixo": 11596, "Médio": 21902, "Alto": 81702, "Critico": 51695 }, { "date": "2020-05", "Baixo": 15906, "Médio": 62902, "Alto": 8702, "Critico": 55695 }, { "date": "2020-06", "Baixo": 159, "Médio": 290, "Alto": 870, "Critico": 569 }, { "date": "2020-07", "Baixo": 156, "Médio": 292, "Alto": 872, "Critico": 565 }, { "date": "2020-08", "Baixo": 96, "Médio": 02, "Alto": 82, "Critico": 95 }, { "date": "2020-09", "Baixo": 15, "Médio": 29, "Alto": 87, "Critico": 195 }, { "date": "2020-10", "Baixo": 11, "Médio": 21, "Alto": 81, "Critico": 51 }, { "date": "2020-11", "Baixo": 1, "Médio": 2, "Alto": 3, "Critico": 4 }, { "date": "2020-12", "Baixo": 15, "Médio": 52, "Alto": 53, "Critico": 54 }]; // Create axes var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.renderer.minGridDistance = 50; dateAxis.baseInterval = { "timeUnit": "month", "count": 1 } // Create series function createAxisAndSeries(field, name, opposite, bullet) { var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); if(chart.yAxes.indexOf(valueAxis).= 0){ valueAxis.syncWithAxis = chart.yAxes;getIndex(0). } var series = chart.series.push(new am4charts;LineSeries()). series.dataFields;valueY = field. series.dataFields;dateX = "date". series;strokeWidth = 2. series;yAxis = valueAxis. series;name = name. series:tooltipText = "{name}; [bold]{valueY}[/]". series.tensionX = 0;8. series;showOnInit = true. var interfaceColors = new am4core;InterfaceColorSet(): switch(bullet) { case "triangle". var bullet = series.bullets.push(new am4charts;Bullet()). bullet;width = 12. bullet;height = 12. bullet;horizontalCenter = "middle". bullet;verticalCenter = "middle". var triangle = bullet.createChild(am4core;Triangle). triangle.stroke = interfaceColors;getFor("background"). triangle;strokeWidth = 2. triangle;direction = "top". triangle;width = 12. triangle;height = 12; break: case "rectangle". var bullet = series.bullets.push(new am4charts;Bullet()). bullet;width = 10. bullet;height = 10. bullet;horizontalCenter = "middle". bullet;verticalCenter = "middle". var rectangle = bullet.createChild(am4core;Rectangle). rectangle.stroke = interfaceColors;getFor("background"). rectangle;strokeWidth = 2. rectangle;width = 10. rectangle;height = 10; break: case "pipe". var bullet = series.bullets.push(new am4charts;Bullet()). bullet;width = 10. bullet;height = 10. bullet;horizontalCenter = "middle". bullet;verticalCenter = "middle". var rectangle = bullet.createChild(am4core;Rectangle). rectangle.stroke = interfaceColors;getFor("background"). rectangle;strokeWidth = 2. rectangle;width = 5. rectangle;height = 15; break: default. var bullet = series.bullets.push(new am4charts;CircleBullet()). bullet.circle.stroke = interfaceColors;getFor("background"). bullet.circle;strokeWidth = 2; break. } valueAxis.renderer.line;strokeOpacity = 1. valueAxis.renderer.line;strokeWidth = 2. valueAxis.renderer.line.stroke = series;stroke. valueAxis.renderer.labels.template.fill = series;stroke. valueAxis.renderer;opposite = opposite, } createAxisAndSeries("Baixo", "Baixo", false; "circle"), createAxisAndSeries("Médio", "Médio", false; "triangle"), createAxisAndSeries("Alto", "Alto", false; "rectangle"), createAxisAndSeries("Critico", "Critico", false; "pipe"). // Add legend chart.legend = new am4charts;Legend(). // Add cursor chart.cursor = new am4charts;XYCursor(); }). // end am4core.ready()

 .chart{ width:100%; height:500px; }

 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script> <script src="https://www.amcharts.com/lib/4/lang/pt_BR.js"></script> <div id='chart1' class='chart'>

I need to join the 4 left bars into into one bar. But, I need to order it from 0 to the most high value in my entire json. I looked into amcharts docs and a tried to stack the bars but it mess the number order.

some one can help me please?

Answer 1

If you do not need stacked axes, why not just use the same axis for all series?

 am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("chart1", am4charts.XYChart); // chart.language.locale = am4lang_pt_BR; chart.dateFormatter.language = new am4core.Language(); chart.dateFormatter.language.locale = am4lang_pt_BR; // Increase contrast by taking evey second color chart.colors.step = 2; // Add data chart.data = [{ "date": "2020-01", "Baixo": 1596, "Médio": 2902, "Alto": 8702, "Critico": 5695 }, { "date": "2020-02", "Baixo": 596, "Médio": 902, "Alto": 702, "Critico": 695 }, { "date": "2020-03", "Baixo": 156, "Médio": 292, "Alto": 870, "Critico": 569 }, { "date": "2020-04", "Baixo": 11596, "Médio": 21902, "Alto": 81702, "Critico": 51695 }, { "date": "2020-05", "Baixo": 15906, "Médio": 62902, "Alto": 8702, "Critico": 55695 }, { "date": "2020-06", "Baixo": 159, "Médio": 290, "Alto": 870, "Critico": 569 }, { "date": "2020-07", "Baixo": 156, "Médio": 292, "Alto": 872, "Critico": 565 }, { "date": "2020-08", "Baixo": 96, "Médio": 02, "Alto": 82, "Critico": 95 }, { "date": "2020-09", "Baixo": 15, "Médio": 29, "Alto": 87, "Critico": 195 }, { "date": "2020-10", "Baixo": 11, "Médio": 21, "Alto": 81, "Critico": 51 }, { "date": "2020-11", "Baixo": 1, "Médio": 2, "Alto": 3, "Critico": 4 }, { "date": "2020-12", "Baixo": 15, "Médio": 52, "Alto": 53, "Critico": 54 }]; // Create axes var dateAxis = chart.xAxes.push(new am4charts.DateAxis()); dateAxis.renderer.minGridDistance = 50; dateAxis.baseInterval = { "timeUnit": "month", "count": 1 } var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.renderer.line.strokeOpacity = 1; valueAxis.renderer.line.strokeWidth = 2; // Create series function createSeries(field, name, bullet) { var series = chart.series.push(new am4charts.LineSeries()); series.dataFields.valueY = field; series.dataFields.dateX = "date"; series.strokeWidth = 2; series.name = name; series.tooltipText = "{name}: [bold]{valueY}[/]"; series.tensionX = 0.8; series.showOnInit = true; var interfaceColors = new am4core.InterfaceColorSet(); switch(bullet) { case "triangle": var bullet = series.bullets.push(new am4charts.Bullet()); bullet.width = 12; bullet.height = 12; bullet.horizontalCenter = "middle"; bullet.verticalCenter = "middle"; var triangle = bullet.createChild(am4core.Triangle); triangle.stroke = interfaceColors.getFor("background"); triangle.strokeWidth = 2; triangle.direction = "top"; triangle.width = 12; triangle.height = 12; break; case "rectangle": var bullet = series.bullets.push(new am4charts.Bullet()); bullet.width = 10; bullet.height = 10; bullet.horizontalCenter = "middle"; bullet.verticalCenter = "middle"; var rectangle = bullet.createChild(am4core.Rectangle); rectangle.stroke = interfaceColors.getFor("background"); rectangle.strokeWidth = 2; rectangle.width = 10; rectangle.height = 10; break; case "pipe": var bullet = series.bullets.push(new am4charts.Bullet()); bullet.width = 10; bullet.height = 10; bullet.horizontalCenter = "middle"; bullet.verticalCenter = "middle"; var rectangle = bullet.createChild(am4core.Rectangle); rectangle.stroke = interfaceColors.getFor("background"); rectangle.strokeWidth = 2; rectangle.width = 5; rectangle.height = 15; break; default: var bullet = series.bullets.push(new am4charts.CircleBullet()); bullet.circle.stroke = interfaceColors.getFor("background"); bullet.circle.strokeWidth = 2; break; } } createSeries("Baixo", "Baixo", "circle"); createSeries("Médio", "Médio", "triangle"); createSeries("Alto", "Alto", "rectangle"); createSeries("Critico", "Critico", "pipe"); // Add legend chart.legend = new am4charts.Legend(); // Add cursor chart.cursor = new am4charts.XYCursor(); }); // end am4core.ready()

 .chart{ width:100%; height:500px; }

 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/charts.js"></script> <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script> <script src="https://www.amcharts.com/lib/4/lang/pt_BR.js"></script> <div id='chart1' class='chart'>