在梯度問題的Highcharts中造型欄顏色

我想用梯度顏色在highcharts中的酒吧。我有什麼是着色他們，但問題是，梯度是通過其他數據組，而不是每一個人吧蔓延，這裏是我的意思的例子：在梯度問題的Highcharts中造型欄顏色

enter image description here

如果您發現，梯度正在酒吧間傳播，而不是爲每個酒吧創建一個新的。

要漸變他們，我使用的是：

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

來源

2012-02-27 Mike Sweeney

有在highcharts的當前版本指定梯度的兩種方式。以前，您只能選擇使用帶有四個座標的陣列，如linearGradient: [x1, y1, x2, y2]。這將使梯度座標適用於像素，因此適用於所有酒吧（如你的例子）。

新選項是使用而非配置對象：

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

這裏的座標是0和1，其對應於每個單獨的條之間的數字。所以，如果你改變了你曾經是一個配置選項的數組（並且使用標準座標），你將會在每個小節中獲得漸變。

實施例上jsfiddle

截圖：

enter image description here

編輯： 而作爲一個條形圖具有x軸從頂部到底應該讓X1是0和x2爲1，而不是改變y1和y2。

來源

2012-02-28 08:52:43 eolsson

添加Setoptions在圖表

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

試試這個in fiddle

來源

2012-02-28 06:10:52

在梯度問題的Highcharts中造型欄顏色

回答

相關問題