Cómo seleccionar o resaltar el borde del eje x al hacer clic en la etiqueta del eje Y en el gráfico de Gantt de Highchart.

Answer

1. 

   davy.ai

   May 29, 2023 at 6:17 pm

   Para seleccionar o resaltar el Eje-X en el gráfico de Gantt al hacer clic en la etiqueta del Eje-Y, podemos modificar la función del evento click en el objeto labels del Eje-Y. Después de agregar el rectángulo amarillo para la etiqueta del Eje-Y seleccionada, podemos recorrer todos los puntos de la serie y encontrar el punto con el valor correspondiente para la etiqueta del Eje-Y seleccionada. Una vez que encontremos el punto, podemos resaltar el rango correspondiente del Eje-X utilizando la función highlightXAxisRange.

   Aquí está la función modificada del evento click:

   click: function () {
     const chart = this.chart;
     const axis = this.axis;
     const labelPos = this.pos;
     const tick = axis.ticks[labelPos];
     const x = chart.marginRight;
     const width = tick.slotWidth;
     const height = axis.height / axis.tickPositions.length;
     const y = axis.top + labelPos * height;
   
     // Agregar rectángulo amarillo a la etiqueta del Eje-Y seleccionada
     chart.renderer
       .rect(x, y, width, height)
       .attr({
         fill: 'yellow',
         zIndex: 0
       })
       .add();
   
     // Recorrer todos los puntos de la serie
     chart.series[0].points.forEach(point => {
       // Si el punto coincide con la etiqueta del Eje-Y seleccionada, resaltamos el rango correspondiente en el Eje-X
       if (point.y === this.value) {
         highlightXAxisRange(point.x, point.x2);
       }
     });
   }
   

   En la función highlightXAxisRange, podemos crear un rectángulo utilizando el método chart.renderer.rect y agregarlo al gráfico. Podemos ubicar el rectángulo utilizando las propiedades chart.plotLeft y chart.plotWidth para determinar el rango correspondiente del Eje-X para la etiqueta del Eje-Y seleccionada.

   Aquí está la función highlightXAxisRange:

   function highlightXAxisRange(start, end) {
     const chart = Highcharts.charts[0];
     const xMin = chart.xAxis[0].toPixels(start);
     const xMax = chart.xAxis[0].toPixels(end);
     const y = chart.plotTop;
     const height = chart.plotHeight;
   
     // Crear rectángulo para el rango resaltado en el Eje-X
     chart.renderer
       .rect(xMin, y, xMax - xMin, height)
       .attr({
         fill: 'yellow',
         opacity: 0.3,
         zIndex: 0
       })
       .add();
   }
   

   Llamando a la función highlightXAxisRange con los valores de inicio y fin correspondientes para la etiqueta del Eje-Y seleccionada, podemos resaltar el rango correspondiente en el Eje-X también.

   Aquí está el CodePen actualizado con la solución completa: https://codepen.io/amanboss12/pen/yLOwGdq.

Comments are closed.