"Круглый" градиент на сложенном столбце старших графиков в виде цилиндра

Question

Возможно ли создать этот эффект в Highcharts? Я попытался определить линейный градиент, но не смог обработать упоры, чтобы получить эффект круглого цилиндра, похожий на этот, я также попытался сделать трехмерный столбец округленным, но не смог найти способ сделать это:

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 с градиентами Скрипка: столбец Highcharts 3d

Спасибо

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/

Выход: