Highcharts solidgauge: как отключить градиентную заливку?

Я пытаюсь использовать Highcharts новый solidgauge плагин.

http://jsfiddle.net/4zVU8/2/

исходный код предоставлен highchart

Датчик принимает три параметра STEP для отображения другого цвета в зависимости от данных. Проблема в том, что он отображает цвет градиентом, а я хотел

1) Зеленый цвет до 20%

2) желтый до 80% и

3) когда значение пересекает 80% шкалы, цвет должен быть красным.

Является ли это возможным?


javascript jquery highcharts gauge
person siddhant Kumar    schedule 01.05.2014    source источник
comment
Вы обновляете значение динамически? Почему бы просто не установить цвет в параметрах на основе вашего значения?   -  person Mark    schedule 01.05.2014
comment
значения являются динамическими, как и стоп-цвета. Однако пользователь может захотеть видеть красный цвет только тогда, когда значение пересекает 90%, а не темно-бордовый цвет, когда значение приближается к 70% в градиенте.   -  person siddhant Kumar    schedule 02.05.2014
comment
Вы имеете в виду, что цвет формы анимации от A до B является градиентом? Потому что он кажется твердым после анимации.   -  person Sebastian Bochan    schedule 02.05.2014
comment
то, что я искал, это то, что цвет остается зеленым от 0 до 20, желтый до 80 и красный после этого. Однако на самом деле он меняется от темно-зеленого до светло-зеленого, желтого, золотого, темно-бордового и затем красного.   -  person siddhant Kumar    schedule 02.05.2014

Ответы (2)


arrow_upward
3
arrow_downward

Чтобы получить сплошной цвет, установите minColor и maxColor параметры на одно и то же значение. Чтобы установить цвет на основе значения, просто сравните параметры:

var guageValue = 60;

var gaugeOptions = {

  ...

yAxis: {
    minColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'),
    maxColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'),
    lineWidth: 0,

    ....

РЕДАКТИРОВАНИЕ ДЛЯ КОММЕНТАРИЙ

Ну, сделать это динамически в соответствии с API должно быть так же просто, как:

var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
var color = newGuageValue >= 80 ? '#FF0000' : (newGuageValue >= 60 ? '#FFFF00' : '#00FF00');
chart.yAxis[0].update({minColor:color, maxColor:color});
point.update(newGuageValue);

Но это нарушает диаграмму (и я считаю, что это ошибка в библиотеке).

Итак, лучшее, что я могу придумать, это напрямую обратиться к внутренностям:

var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
var color = newGuageValue >= 80 ? [255,0,0,1] : (newGuageValue >= 60 ? [255,255,0,1] : [0,255,0,1]);
chart.yAxis[0].stops[0].color.rgba = color;
chart.yAxis[0].stops[1].color.rgba = color;
point.update(newGuageValue);

Вот демонстрация скрипки.

person Mark    schedule 02.05.2014
comment
Хотя это работает со статическими данными, я не могу заставить его работать с динамическими данными. У меня есть setinterval, который извлекает данные каждые несколько секунд в минуту, и изменение chart.yAxis.maxColor = newVal >= 80 ? '#FF0000' : (newVal >= 60 ? '#FFFF00' : '#00FF00');, похоже, не работает. - person siddhant Kumar; 02.05.2014
comment
@siddhantKumar, см. ответ ниже. Похоже, это работает и было бы предпочтительнее моего. - person Mark; 06.05.2014
comment
Это все субъективно. Я не могу создавать массивы для каждого цветового диапазона. так что ваше решение соответствует моей потребности. еще раз спасибо. - person siddhant Kumar; 07.05.2014

arrow_upward
9
arrow_downward

Вы можете установить остановки, например: http://jsfiddle.net/4zVU8/5/

        stops: [
            [0.0, '#55BF3B'], // green
            [0.2, '#55BF3B'], // green
            [0.21, '#DDDF0D'], // yellow
            [0.80, '#DDDF0D'], // yellow
            [0.81, '#DF5353'], // red
            [1, '#DF5353'] // red
        ]

Итак, сразу после окончания цвета установите новый цвет.

person Paweł Fus    schedule 05.05.2014
comment
Не уверен, как я пропустил это, гораздо лучшее решение, чем мое! - person Mark; 06.05.2014
comment
Это по-прежнему дает постепенно меняющийся цвет градиента, как я могу изменить его на категоризированную цветовую тему - person Anton; 29.12.2016
comment
Я не уверен, что вы имеете в виду. Вы хотите удалить изменение цвета во время анимации? Это анимация по умолчанию в Highcharts. Вы можете обернуть series.drawPoints, чтобы изменить способ его анимации, но для этого потребуется некоторое кодирование. Вот простой пример, как удалить анимацию цвета: jsfiddle.net/4zVU8/64 (цвет теперь изменяется на новый цвет сразу после установки нового значения перед анимацией). - person Paweł Fus; 30.12.2016
comment
Однако значение 0,805 (161 км/ч) по-прежнему оранжевое. - person István Békési; 30.09.2020
comment
Остановки могут быть точно такими же: jsfiddle.net/BlackLabel/bwd29xos - person Paweł Fus; 30.09.2020