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.

Highcharts – ¿Cómo puedo utilizar el separador de períodos en el eje x?

01 Aug, 2023 Programación

Estoy utilizando highchart para estadísticas con un eje x de tipo “categorías” y quiero que el eje x se separe por rangos.

Quiero agregar este pequeño separador como en las fotos:
Lo que quiero lograr

Esto es lo que tengo actualmente:
Lo que tengo

Aquí está el código que estoy utilizando, para la primera foto utilizo la accesibilidad con “rangeDescription”:

accessibility: {
rangeDescription: ‘Rango: 2010 a 2017’
}

Pero aquí quiero usar “xAxis: {type: ‘category’}”

Highcharts.chart('container', {
chart: {
renderTo: 'container'
},
title: {
text: 'Crecimiento del empleo solar por sector, 2010-2016'
},
subtitle: {
text: 'Fuente: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Número de empleados'
}
},
xAxis: {
categories: [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
series: [{
name: 'Instalación',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
name: 'Manufactura',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
name: 'Ventas y Distribución',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
name: 'Desarrollo de Proyectos',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
name: 'Otros',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener el separador deseado en el eje x al usar xaxis: {type: 'category'}, puedes utilizar la función tickPositioner. Esta función te permite definir posiciones de marca personalizadas en el eje.

    Aquí está el código actualizado que incluye la función tickPositioner para agregar el separador:

    Highcharts.chart('container', {
  chart: {
    renderTo: 'container'
  },

  title: {
    text: 'Crecimiento del Empleo Solar por Sector, 2010-2016'
  },

  subtitle: {
    text: 'Fuente: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Número de Empleados'
    }
  },

  xAxis: {
    categories: [2010,2011,2012,2013,2014,2015,2016,2017],
    tickPositioner: function () {
      var positions = [],
          increment = 1;

      for (var i = this.dataMin; i <= this.dataMax; i += increment) {
        positions.push(i);

        if (i === 2017) {
          positions.push(i + 0.5);
        }
      }

      return positions;
    }
  },

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
    }
  },

  series: [{
    name: 'Instalación',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Fabricación',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Ventas y Distribución',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Desarrollo de Proyectos',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Otros',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

    En la función tickPositioner, definimos un array de positions donde queremos que se coloquen las marcas. Recorremos los valores dataMin y dataMax del eje y agregamos las posiciones de las marcas utilizando una variable increment.

    También agregamos una declaración condicional para verificar si la posición actual de la marca está al final del eje x (2017) y agregamos una posición intermedia (2017,5) para crear el separador.

    Esto debería darte el resultado deseado con un separador en el eje x.

Comments are closed.