Kolory paska stylów w Highcharts z gradientem wydania

Question

Próbuję pokolorować paski w tabelach z gradientem. Co mam jest ich barwienia, ale problemem jest to, gradient rozprzestrzenia się za pośrednictwem innych grup danych, a nie poszczególnych barów, oto przykład tego, co mam na myśli:

Jeśli zauważysz, gradient jest rozprowadzany między prętami, zamiast tworzyć nowe dla każdego z nich.

Aby je gradient, używam:

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

Istnieją dwa sposoby określania gradienty w aktualnej wersji highcharts . Wcześniej miałeś tylko możliwość użycia tablicy o czterech współrzędnych, takich jak linearGradient: [x1, y1, x2, y2]. Powoduje to, że współrzędne gradientowe odnoszą się do pikseli i dlatego będą używane dla wszystkich taktów (jak w twoim przykładzie).

Nowa opcja jest użycie obiektu konfiguracji Zamiast:

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

Tutejsze współrzędne są liczbami od 0 do 1, która odpowiada każdego baru. Tak więc, jeśli zmienisz tablicę, która była opcją konfiguracji (i używasz znormalizowanych współrzędnych), otrzymasz gradienty na każdym pasku.

Przykład na jsfiddle

Zrzut ekranu:

Edit: I jak na wykresie słupkowym mają oś x idąc od góry do dołu, należy pozwolić x1 być 0 i x2 być 1, zamiast zmieniać y1 i y2.

Answer 2

Dodaj setOptions na wykresie

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

Spróbuj in fiddle