javascript - ejemplos - Colores de barras de estilo en Highcharts con un problema de degradado

highcharts chart=

Question

Estoy tratando de colorear las barras en gráficos altos con un degradado. Lo que tengo es colorearlos, pero el problema es que el gradiente se está extendiendo a través de los otros grupos de datos en lugar de cada barra individual, aquí hay un ejemplo de lo que quiero decir:

Si observa, el gradiente se está extendiendo entre las barras, en lugar de crear una nueva para cada una.

Para degradarlos, estoy usando:

colors: [
{
linearGradient: [500, 0],
stops: [
[0, ''rgb(247, 111, 111)''],
[1, ''rgb(220, 54, 54)'']
]
},
{
linearGradient: [500, 0],
stops: [
[0, ''rgb(120, 202, 248)''],
[1, ''rgb(46, 150, 208)'']
]
},
{
linearGradient: [500, 0],
stops: [
[0, ''rgb(136, 219, 5)''],
[1, ''rgb(112, 180, 5)'']
]
},],

Answer 1

Añadir opciones en el gráfico

 Highcharts.setOptions({
colors: [''#058DC7'', ''#50B432'', ''#ED561B'', ''#DDDF00'', ''#24CBE5'', ''#64E572'', ''#FF9655'', ''#FFF263'', ''#6AF9C4'']
});

Intenta esto en violín

Answer 2

Hay dos formas de especificar gradientes en la versión actual de highcharts. Anteriormente, solo tenía la opción de usar una matriz con cuatro coordenadas como linearGradient: [x1, y1, x2, y2] . Esto haría que las coordenadas del gradiente se apliquen a los píxeles y, por lo tanto, se utilicen para todas las barras (como en su ejemplo).

La nueva opción es usar un objeto de configuración en su lugar:

linearGradient: {
x1: 0,
y1: 0,
x2: 1,
y2: 0
}

Las coordenadas aquí son números entre 0 y 1 que corresponden a cada barra individual. Por lo tanto, si cambia la matriz que solía ser una opción de configuración (y usa coordenadas normalizadas) obtendrá gradientes en cada barra.

Ejemplo en jsfiddle

Captura de pantalla:

Edición: Y como un gráfico de barras tiene el eje x desde arriba hacia abajo, debe dejar que x1 sea 0 y x2 sea 1, en lugar de cambiar y1 e y2.