Colori barra di styling in Highcharts con un problema con gradiente

Question

Sto provando a colorare le barre in diagrammi elevati con un gradiente. Quello che ho è loro colorazione, ma il problema è, il gradiente si sta diffondendo attraverso gli altri gruppi di dati piuttosto che ogni singola barra, ecco un esempio di ciò che intendo:

Se si nota, il gradiente si sta diffondendo tra le barre, invece di crearne uno nuovo per ciascuna.

al gradiente di loro, sto 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

Ci sono due modi per specificare gradienti nella versione corrente di Highcharts . In precedenza hai avuto solo la possibilità di utilizzare un array con quattro coordinate come linearGradient: [x1, y1, x2, y2]. Questo farebbe sì che le coordinate del gradiente si applichino ai pixel e quindi per tutte le barre (come nel tuo esempio).

La nuova opzione è quella di utilizzare un oggetto di configurazione invece:

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

Le coordinate qui sono numeri compresi tra 0 e 1 che corrisponde ad ogni singola barra. Quindi, se cambi l'array che hai usato come opzione di configurazione (e usi le coordinate normalizzate) otterrai delle sfumature in ogni barra.

Esempio su jsfiddle

Screenshot:

Edit: E come un grafico a barre avere l'asse x che va dall'alto verso il basso si dovrebbe lasciare che x1 essere 0 e x2 essere 1, invece di cambiare y1 e y2.

Answer 2

Aggiungere setOptions nella tabella

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

Prova questa in fiddle