'Round' Gradient auf Highcharts gestapelten Spalte, um als ein Zylinder zu erscheinen

Question

ist es möglich, diesen Effekt in Highcharts zu erstellen? Ich habe versucht, einen linearen Gradienten zu definieren, konnte aber die Stopps nicht ausarbeiten, um einen runden Zylindereffekt zu erhalten. Ich versuchte auch, eine 3D-Spalte gerundet zu bekommen, aber ich konnte keinen Weg finden:

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

dank

Answer 1

Sie benötigen drei Stationen.

Fügen Sie in Ihrem Beispiel einen dritten Zwischenstopp hinzu. Anstatt also:

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

tun:

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

Aktualisiert Geige:

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

Ausgang:

Passen Sie die Farben natürlich an.

Oder Sie wissen, gehen Sie Nüsse! Keine Notwendigkeit, es zu drei Stationen zu begrenzen:

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/

Ausgang: