Amcharts Multi axys convertido a x,y sólo

Question

Necesito generar un informe que cuente los hilos de emisión en mi sistema por categoría que use amcharts 4 y el siguiente código: 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; } Necesito unir los 4 barras izquierdas en un bar. Pero, necesito ordenarlo de 0 al valor más alto de todo mi json. Miré a los docs de amcharts y un intento de apilar las barras pero estropea el orden número. ¿Alguien puede ayudarme, por favor?

codecraftsman · Accepted Answer

Si no necesitas ejes apilados, ¿por qué no usas el mismo eje para todas las 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;
}

Respondida el Dec 18, 2020 a las 00:52 - por codecraftsman

Gpt · Answer

Para unir las 4 barras izquierdas en un solo bar y ordenarlas de 0 al valor más alto en tu gráfico de AmCharts, puedes hacer lo siguiente:

En lugar de crear 4 series separadas para "Baixo", "Médio", "Alto" y "Critico", puedes fusionar estos valores y crear una sola serie para todas las categorías.

Necesitarás modificar la forma en que se agregan los datos al gráfico y cómo se configuran las visualizaciones de las barras.

Aquí hay una propuesta de cómo podrías modificar tu código:

javascript
// Add data
chart.data = [{
    "date" : "2020-01",
    "Baixo" : 1596,
    "Médio" : 2902,
    "Alto" : 8702,
    "Critico" : 5695
},
// Añade el resto de tus datos aquí
];

// Crear una serie para todas las categorías
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "date";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";

// Fusionar los valores de todas las categorías en un solo valor para cada fecha
chart.data.forEach(function(item) {
  item.value = item.Baixo + item.Médio + item.Alto + item.Critico;
});

// Ordenar los datos por el nuevo valor combinado
chart.data.sort((a, b) => a.value - b.value);

// Ordenar las categorías en la visualización
series.columns.template.adapter.add("fill", function(fill, target) {
  if (chart.data.indexOf(target.dataItem.dataContext) < chart.data.length / 2) {
    return am4core.color("FF0000"); // Color para la primer mitad de las barras  } else {
    return am4core.color("00FF00"); // Color para la segunda mitad de las barras  }
});

En este código, se crea una sola serie de barras para mostrar el valor combinado de todas las categorías. Luego, se calcula y ordena este valor combinado para cada fecha. Finalmente, se ordenan y se manipulan los colores de las barras según su posición en la serie.

Espero que esta solución te sea útil. ¡Déjame saber si necesitas más ayuda!

Respondida el Dec 19, 2020 a las 00:52 - por Gpt

Gemini · Answer

Convertir el gráfico de varios ejes a un solo eje Para convertir el gráfico de múltiples ejes en un solo eje, debes seguir estos pasos: Quita los ejes y series adicionales. Solo debes conservar el eje x (eje de fecha) y la primera serie (serie  Baixo ). Ajusta el ancho de la serie  Baixo  para que ocupe todo el espacio disponible. Oculta los otros ejes y series estableciendo su propiedad `visible` en `false`. Agrupar las barras izquierdas en una sola barra Para agrupar las barras izquierdas en una sola barra, debes crear una serie adicional que sume los valores de las barras izquierdas. Ordenar la barra agrupada de 0 al valor más alto Para ordenar la barra agrupada de 0 al valor más alto, debes utilizar la propiedad sortOrder de la serie. Aquí tienes el código actualizado que implementa los cambios mencionados: javascript 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 (Baixo) var series1 = chart.series.push(new am4charts.LineSeries()); series1.dataFields.valueY =  Baixo ; series1.dataFields.dateX =  date ; series1.strokeWidth = 2; series1.name =  Baixo ; series1.tooltipText =  {name}: [bold]{valueY}[/] ; series1.tensionX = 0.8; series1.showOnInit = true; // Create series (Otros) var series2 = chart.series.push(new am4charts.LineSeries()); series2.dataFields.valueY =  Otros ; series2.dataFields.dateX =  date ; series2.strokeWidth = 2; series2.name =  Otros ; series2.tooltipText =  {name}: [bold]{valueY}[/] ; series2.tensionX = 0.8; series2.showOnInit = true; // Calcular valores  Otros  for (var i = 0; i < chart.data.length; i++) { chart.data[i].Otros = chart.data[i].Médio + chart.data[i].Alto + chart.data[i].Critico; } // Ordenar barra  Otros  de 0 al valor más alto series2.sortOrder =  asc ; series2.dataFields.valueY.sortOrder =  asc ; // Ocultar otras series chart.series.each(function(series) { if (series != series1 && series != series2) { series.visible = false; } }); // Add legend chart.legend = new am4charts.Legend(); // Add cursor chart.cursor = new am4charts.XYCursor(); }); // end am4core.ready() Ten en cuenta que el código agrega una serie adicional llamada  Otros  que suma los valores de las series  Médio ,  Alto  y  Critico . Esta serie se ordena de forma ascendente y se oculta. El resultado es un gráfico con una sola barra que representa los valores de la serie  Baixo , y el eje y se escala de 0 al valor más alto de todos los datos.

Amcharts Multi axys convertido a x,y sólo

3 Respuestas: