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

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

enter image description here

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

Чтобы их градиент, я использую:

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

Ответы

Ответ 1

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

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

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

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

Пример jsfiddle

Скриншот:

enter image description here

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

Ответ 2

Добавить Setoptions в диаграмме

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

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