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

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

введите здесь описание изображения

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

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

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

javascript highcharts
person Mike Sweeney    schedule 27.02.2012    source источник

Ответы (2)


arrow_upward
27
arrow_downward

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

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

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

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

Пример на jsfiddle

Снимок экрана:

введите здесь описание изображения

Редактировать. Поскольку на гистограмме ось x идет сверху вниз, вы должны установить x1 равным 0, а x2 равным 1, вместо изменения y1 и y2.

person eolsson    schedule 28.02.2012

arrow_upward
3
arrow_downward

Добавить Setoptions в график

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

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

person Sreenath Plakkat    schedule 28.02.2012