Styling bar colors dans Highcharts avec un problème de dégradé

J'essaie de colorier les barres dans les diagrammes élevés avec un dégradé. Ce que je possède, c'est le colorant, mais le problème est que le dégradé se propage dans les autres groupes de données plutôt que dans chaque barre individuelle, voici un exemple de ce que je veux dire:

Entrez la description de l'image ici

Si vous remarquez, le dégradé se répand entre les barres, plutôt que de créer un nouveau pour chacun.

Pour les dégrader, j'utilise:

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)'] ] },],

Il existe deux façons de spécifier les gradients dans la version actuelle des diagrammes élevés. Auparavant, vous n'aviez que l'option d'utiliser un tableau avec quatre coordonnées comme linearGradient: [x1, y1, x2, y2] . Cela rendrait les coordonnées en dégradé appliquées aux pixels et seraient utilisées pour toutes les barres (comme dans votre exemple).

La nouvelle option consiste à utiliser plutôt un objet de configuration:

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

Les coordonnées ici sont des nombres entre 0 et 1 qui correspond à chaque barre individuelle. Donc, si vous modifiez le tableau que vous aviez une option de configuration (et utilisez des coordonnées normalisées), vous obtiendrez des gradients dans chaque barre.

Exemple sur jsfiddle

Capture d'écran:

Entrez la description de l'image ici

Edit: Et comme un diagramme à barres, l'axe des x va de haut en bas, vous devez laisser x1 être 0 et x2 être 1, au lieu de changer y1 et y2.

Ajouter des setoptions dans le tableau

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

Essayez cela en violon