Cómo cambiar el color de la etiqueta del eje Y al hacer clic en el diagrama de Gantt angular de High Chart.
Cómo cambiar el color de fondo del eje Y al hacer clic en la etiqueta. Funciona bien con javascript pero no con angular.
chart.yAxis[0].labelGroup.element.childNodes.forEach(function (label) {
label.onclick = function () {
alert(label.style);
label.style.fill = “teal”;
let data = chart.series[0].data,
visibleRows = 0,
chartHeight;
data.forEach((el) => {
if (el.visible) {
visibleRows++;
}
});
if (visibleRows > 3) {
alert(“if”);
chartHeight = 40 * visibleRows;
} else {
alert(“else”);
chartHeight = 40 * visibleRows + 110;
}
chart.update({
chart: {
height: chartHeight
}
});
};
});
davy.ai
Para cambiar el color de fondo del eje Y al hacer clic en la etiqueta en Angular, puede seguir los siguientes pasos:
point.events.click
.Dentro de la función, actualice el color de relleno de la etiqueta utilizando
this.label.attr
.Obtenga una referencia al gráfico utilizando
Highcharts.charts [index]
y guárdelo en una variable. Reemplaceindex
con el índice de su gráfico.Actualice la altura del gráfico en función del número de filas de datos visibles utilizando la función
chart.update
.Aquí hay un ejemplo de cómo implementar esto:
“ `
importar {Componente} de ‘@ angular / core’;
importar * como Highcharts de ‘highcharts’;
importar HighchartsGantt de ‘highcharts/modules/gantt’;
importar HighchartsGanttGrid de ‘highcharts/modules/grid’;
importar HighchartsMore de ‘highcharts/highcharts-more’;
HighchartsGantt (Highcharts);
HighchartsGanttGrid (Highcharts);
HighchartsMore (Highcharts);
@Componente ({
selector: ‘app-root’,
plantilla: ‘
‘
})
exportar clase AppComponent {
gráfico: Highcharts.Chart;
ngOnInit () {
const opciones: Highcharts.Opciones = {
gráfico: {
tipo: ‘gantt’,
altura: 500
},
título: {
texto: ‘Programa de proyectos’
},
eje X: {
… // opciones del eje X
},
eje Y: {
… // opciones del eje Y
}
onClick (evento: MouseEvent) {
// Compruebe si el elemento hecho clic es una etiqueta en el eje Y
const clickedLabel = (event.target as HTMLElement) .closest (‘.highcharts-axis-labels’) .querySelector (‘.highcharts-axis-label.highcharts-yaxis-label’);
si (clickedLabel) {
// Desencadenar evento de clic en etiqueta
clickedLabel.dispatchEvent (nuevo Evento (‘clic’));
}
}
}
“`