Отрегулируйте насыщенность уровня солнечных лучей - Highcharts - PullRequest
0 голосов
/ 27 сентября 2018

Я создал диаграмму солнечных лучей с Highcharts.Я хотел бы, чтобы был способ выделить уровень, в идеале, отрегулировав насыщенность цвета, не затрагивая цвет исходящих уровней.

Что я пробовал до сих пор:

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

color (API docs) мой пример кода
color может использоваться для изменения цвета данного уровня, это не совсем соответствует критериямчто я хотел, так как он меняет каждый раздел на уровне одного цвета.Это также заставляет дочерние уровни наследовать новый цвет, как видно из примера.Установка colorByPoint также не устраняет эту проблему, так как дочерний уровень будет циклически проходить через все цвета, а не совпадать с цветами, установленными в родительском уровне 1.

Чего я пытаюсь достичь:

goal

1 Ответ

0 голосов
/ 28 сентября 2018

Вы можете использовать внутренний метод Highcharts brighten для осветления цветов.Ниже вы можете найти пример того, как добиться желаемого результата в вашем случае:

    chart: {
        height: "600px",
        events: {
            load: function() {
                Highcharts.each(this.series[0].points, function(p) {
                    if (p.id[0] === '1' || p.id[0] === '3') {
                        p.graphic.attr({
                            fill: Highcharts.color(p.color).brighten(0.3).get()
                        });
                    }
                })
            }
        }
    },

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/de3mp4tq/

...