Highchart: Mostrar el porcentaje en cada columna del gráfico de columnas
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}]
}
];
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óndataLabels
del objetocolumn
. 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:
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ónformatter
, 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.