＆＃39;轮＆＃39; 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/

输出：