Стилирование цветов панели в Highcharts с проблемой градиента

Question

Я пытаюсь раскрасить столбики в верхних графиках с помощью градиента. У меня есть их раскраска, но проблема в том, что градиент распространяется по другим группам данных, а не по каждой отдельной полосе, вот пример того, что я имею в виду:

Если вы заметили, градиент распределяется между столбиками, а не создается новый для каждого.

Для градиента я использую:

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

Answer 1

Существует два способа задания градиентов в текущей версии старших графиков. Ранее у вас была возможность использовать только массив с четырьмя координатами, например linearGradient: [x1, y1, x2, y2]. Это сделает координаты градиента применимыми к пикселям и, следовательно, будет использоваться для всех полос (как в вашем примере).

Новая опция - вместо этого использовать объект конфигурации:

linearGradient: {
     x1: 0,
     y1: 0,
     x2: 1,
     y2: 0
}

Координаты здесь - это числа от 0 до 1, которые соответствуют каждому отдельному столбцу. Таким образом, если вы измените массив, который вы использовали в качестве параметра конфигурации (и используете нормализованные координаты), вы получите градиенты в каждом баре.

Пример использования jsfiddle

Скриншот:

Edit: И поскольку гистограмма имеет ось X, идущую сверху вниз, вы должны позволить x1 быть 0 и x2 быть 1, вместо того, чтобы изменять y1 и y2.

Answer 2

Добавить разделы на графике

 Highcharts.setOptions({
            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',     '#FF9655',              '#FFF263', '#6AF9C4']
          });

Попробуйте это в скрипке