es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Múltiples ColumnSeries en Amcharts con ejes apilados horizontalmente no se están llenando en el espacio disponible.

Múltiples ColumnSeries en Amcharts con ejes apilados horizontalmente no se están llenando en el espacio disponible.

16 Jul, 2023 Programación

Estoy intentando crear ejes apilados horizontalmente utilizando múltiples ColumnSeries basados en este ejemplo. https://www.amcharts.com/demos-v4/horizontally-stacked-axes-v4

En lugar de una serie de dos líneas y una serie de columnas, estoy intentando crear las tres como series de columnas. Cuando creo tres series de columnas, el resultado es similar al siguiente:

enter image description here

Por lo tanto, la columna solo llena la tercera parte del espacio disponible para cada una de las series de columnas. Espero que se llene de manera similar a la columna cuando se utilizan una columna y dos series de líneas.

¿Cómo hacer que las tres series de columnas utilicen todo el espacio y estén alineadas de la misma manera?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que las series de tres columnas utilicen todo el espacio y tengan la misma alineación, es necesario ajustar las propiedades clustered y width de cada ColumnSeries de la siguiente manera:

    // Crear la instancia del gráfico
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Agregar los datos
chart.data = [{
  "category": "Categoría 1",
  "value1": 8,
  "value2": 2,
  "value3": 4
}, {
  "category": "Categoría 2",
  "value1": 11,
  "value2": 4,
  "value3": 2
}, {
  "category": "Categoría 3",
  "value1": 7,
  "value2": 6,
  "value3": 3
}, {
  "category": "Categoría 4",
  "value1": 13,
  "value2": 8,
  "value3": 4
}, {
  "category": "Categoría 5",
  "value1": 12,
  "value2": 3,
  "value3": 2
}, {
  "category": "Categoría 6",
  "value1": 16,
  "value2": 10,
  "value3": 5
}];

// Crear los ejes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;

var valueAxis1 = chart.yAxes.push(new am4charts.ValueAxis());

// Crear las series
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.valueY = "value1";
series1.dataFields.categoryX = "category";
series1.name = "Serie 1";
series1.clustered = false;
series1.columns.template.width = am4core.percent(100);
series1.columns.template.fillOpacity = 0.8;
series1.columns.template.strokeWidth = 0;

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "value2";
series2.dataFields.categoryX = "category";
series2.name = "Serie 2";
series2.clustered = false;
series2.columns.template.width = am4core.percent(100);
series2.columns.template.fillOpacity = 0.8;
series2.columns.template.strokeWidth = 0;

var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "value3";
series3.dataFields.categoryX = "category";
series3.name = "Serie 3";
series3.clustered = false;
series3.columns.template.width = am4core.percent(100);
series3.columns.template.fillOpacity = 0.8;
series3.columns.template.strokeWidth = 0;

// Agregar la leyenda
chart.legend = new am4charts.Legend();

    Al establecer clustered en falso, las columnas se posicionan una al lado de la otra en lugar de apilarse. Al establecer width en 100%, las columnas utilizarán todo el espacio disponible. Por último, al establecer fillOpacity en 0.8 y strokeWidth en 0, se eliminan los bordes de las columnas y se vuelven parcialmente transparentes.

Comments are closed.