es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Highchart: Mostrar el porcentaje en cada columna del gráfico de columnas

21 Jul, 2023 Programación

Cómo establecer diferentes colores para diferentes etiquetas de datos de todas las columnas de este gráfico de barras. En este código, solo se establece un color naranja para todas las etiquetas de datos de este gráfico.
¿Cómo se pueden aplicar diferentes colores a todas las etiquetas de datos en la parte superior de las columnas?

column: {
    colorByPoint: true,
    borderWidth: 0,
    dataLabels: {
        format: '{point.y:.f}%',
        enabled: true,
        style: {
            fontWeight: 'normal',
            fontSize: '30px',
            color: '#FF6F61',
            fontFamily: 'Sans Serif Regular',
            textOutline: '1px contrast'
        }
    },
    series: {
        pointWidth: 195,
        minPointLength: 50,
        colors: [
            '#800000',
            '#DB7093',
            '#FF7F50',
            '#008080',
            '#006400'
        ]
    }
};
var credits = {
    enabled: false
};
var series = [
    {
        name: 'HSBC',
        data: [{y:50}, {y:10},{y:30}, {y:9}, {y:1}]
    }
];
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para aplicar diferentes colores a todas las etiquetas de datos en la parte superior de las columnas de este gráfico de barras, debemos usar la función formatter en la sección dataLabels del objeto column. Podemos definir esta función para que devuelva código HTML diferente para cada etiqueta, lo que nos permite aplicar diferentes estilos y colores a cada una.

    Aquí tienes un ejemplo de cómo podemos modificar el código existente para aplicar diferentes colores a cada etiqueta:

    columna: {
  colorByPoint: true,
  borderWidth: 0,
  dataLabels: {
    enabled: true,
    formatter: function() {
      // Definir un array de colores
      var colores = ['#800000', '#DB7093', '#FF7F50', '#008080', '#006400'];

      // Obtener el índice del punto actual
      var indice = this.point.index;

      // Establecer el estilo y color de la etiqueta de datos
      var estilo = 'font-weight:normal;font-size:30px;font-family:Sans Serif Regular;text-outline:1px contrast;color:' + colores[indice];

      // Devolver el código HTML para la etiqueta de datos
      return '<span style="' + estilo + '">' + this.y.toFixed(2) + '%</span>';
    }
  },
  series: [{
    pointWidth: 195,
    minPointLength: 50,
    data: [{y:50}, {y:10}, {y:30}, {y:9}, {y:1}]
  }]
}

    En este código modificado, definimos un array de colores (colores) con la misma longitud que el número de puntos de datos. Luego, en la función formatter, obtenemos el índice del punto actual (indice) y lo usamos para seleccionar el color correspondiente del array. Definimos una cadena de estilos (estilo) que incluye el color seleccionado, y luego devolvemos HTML para la etiqueta de datos con el estilo apropiado.

    Con este código, cada etiqueta de datos se coloreará según su índice en el array colores. Puedes modificar los colores en este array para aplicar diferentes colores a cada etiqueta.

Comments are closed.