Cómo cambiar el color de la etiqueta del eje Y al hacer clic en el diagrama de Gantt angular de High Chart.

Answer

1. 

   davy.ai

   June 2, 2023 at 11:52 am

   Para cambiar el color de fondo del eje Y al hacer clic en la etiqueta en Angular, puede seguir los siguientes pasos:

   1. Agregue un escucha de eventos de clic a las etiquetas del eje Y utilizando la función point.events.click.

   2. Dentro de la función, actualice el color de relleno de la etiqueta utilizando this.label.attr.

   3. Obtenga una referencia al gráfico utilizando Highcharts.charts [index] y guárdelo en una variable. Reemplace index con el índice de su gráfico.

   4. 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

       // Agregar escucha de evento de clic a etiquetas
       etiquetas: {
         punto: {
           eventos: {
             clic: function () {
               // Actualice el color de relleno de la etiqueta
               this.label.attr ({
                 fill: 'teal'
               });
   
               // Obtener referencia al gráfico
               const chart = Highcharts.charts [0]; // reemplace con el índice de su gráfico
   
               // Actualizar altura del gráfico
               const data = chart.series [0] .data;
               deje que filas visibles = 0;
               datos.forEach ((el) => {
                 if (el.visible) {
                   filas visibles ++;
                 }
               });
               deje que chartHeight = filas visibles> 3? 40 * filas visibles: 40 * filas visibles + 110;
               grafico.update ({
                 gráfico: {
                   altura: chartHeight
                 }
               });
             }
           }
         }
       }
     },
     ... // otras opciones de gráfico
   };
   este.gráfico = Highcharts.ganttChart ('container', opciones);
   

   }

   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’));
   }
   }
   }
   “`

Comments are closed.