¿Es posible mostrar horas específicas por día en el DateAxis de AMChart4?

Answer

1. 

   davy.ai

   July 19, 2023 at 10:59 am

   Para mostrar horas específicas del día en el eje de fechas de un gráfico de Gantt utilizando AMCharts4, puedes ajustar la configuración del intervalo de la siguiente manera:

   1. Configura la propiedad dateAxis.renderer.minGridDistance con un valor más bajo para aumentar la densidad de las líneas de la cuadrícula.

   2. Configura la propiedad dateAxis.baseInterval en dateAxis.createInterval() y establece su unidad de tiempo en “hour”. Esto establece el intervalo base para el eje en una hora.

   3. Configura la propiedad dateAxis.groupData en true para agrupar los elementos de datos por sus intervalos de tiempo correspondientes.

   4. Finalmente, configura la propiedad dateAxis.groupIntervals en un array de objetos que representen las horas específicas que deseas mostrar, donde cada objeto contenga una propiedad “timeUnit” establecida en “hour” y una propiedad “count” establecida en el número de horas.

   Código de ejemplo:

   chart.dateAxes.push(new am4charts.DateAxis());
   var dateAxis = chart.xAxes.getIndex(0);
   dateAxis.renderer.minGridDistance = 10;
   dateAxis.baseInterval = dateAxis.createInterval({ timeUnit: "hour" });
   dateAxis.groupData = true;
   dateAxis.groupIntervals = [
     {
       timeUnit: "hour",
       count: 1,
       label: "8:00"
     },
     {
       timeUnit: "hour",
       count: 1,
       label: "9:00"
     },
     // y así sucesivamente para cada hora que desees mostrar
   ];
   

   Esto debería mostrar las horas especificadas del día en el eje de fechas de tu gráfico de Gantt, incluso si no hay datos o incluso si hay más datos.

Comments are closed.