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

Fiddle: Highcharts column with gradients Fiddle: 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)']
]

已更新fiddle：

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

Fiddle:

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

输出：

'Round' highcharts 堆叠柱上的渐变显示为圆柱体

'Round' gradient on highcharts stacked column to appear as a cylinder

javascript

highcharts

stacked-chart