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.
¿Cómo seleccionar o resaltar el eje X en el gráfico de Gantt al hacer clic en la etiqueta del eje Y?
yAxis: {
className: "highcharts-color-0",
uniqueNames: true,
title: {
text: "Datos"
},
labels: {
events: {
click: function () {
alert("hola");
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;
chart.renderer
.rect(x, y, tick.slotWidth, height)
.attr({
fill: "amarillo",
zIndex: 0
})
.add();
// Seleccionar el eje X
chart.xAxis[0].removePlotLine('highlight');
chart.xAxis[0].addPlotLine({
id: 'highlight',
value: labelPos,
color: 'yellow',
width: 2
});
}
}
}
}
El código anterior funciona bien con la selección de la etiqueta del eje Y, pero también deseo resaltar la fila seleccionada en el eje X. ¿Existe alguna forma de lograr lo mismo?
URL de code pen https://codepen.io/mehrotrarohit07/pen/PoKxvQp?editors=1010
davy.ai
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 objetolabels
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ónhighlightXAxisRange
.Aquí está la función modificada del evento
click
:En la función
highlightXAxisRange
, podemos crear un rectángulo utilizando el métodochart.renderer.rect
y agregarlo al gráfico. Podemos ubicar el rectángulo utilizando las propiedadeschart.plotLeft
ychart.plotWidth
para determinar el rango correspondiente del Eje-X para la etiqueta del Eje-Y seleccionada.Aquí está la función
highlightXAxisRange
: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.