Highcharts疊加柱上的「圓」漸變顯示爲柱面

Question

是否可以在Highcharts中創建此效果？我試圖定義一個線性漸變，但不能解決停止問題以獲得與此類似的圓柱效應，我還試圖讓一個3d列出現四捨五入，但找不到任何方法來做到這一點：

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

小提琴：Highcharts column with gradients 小提琴：Highcharts 3d Column

感謝

Answer 1

你需要三個站。

使用您的示例，添加第三個中間停靠點。所以，相反的：

stops: [ 
    [0, 'rgb(247, 111, 111)'], 
    [1, 'rgb(220, 54, 54)'] 
] 

這樣做：

stops: [ 
    [0, 'rgb(220, 54, 54)'], 
    [0.5, 'rgb(247, 111, 111)'], 
    [1, 'rgb(220, 54, 54)'] 
] 

更新小提琴：

• http://jsfiddle.net/jlbriggs/sjqo3bze/

輸出：

調整顏色以適合當然。

或者，你知道，堅果！沒有必要將其限制在三個站：

stops: [ 
    [0, 'rgb(128,0,0)'], 
    [0.1, 'rgb(204,0,0)'], 
    [0.25, 'rgb(245,128,128)'], 
    [0.5, 'rgb(230,75,75)'], 
    [0.75, 'rgb(220,50,50)'], 
    [0.9, 'rgb(230,75,75)'], 
    [1, 'rgb(128,0,0)'] 
] 

小提琴：

• http://jsfiddle.net/jlbriggs/sjqo3bze/1/

輸出：