chart. js "преобразовать" css повторяющийся линейный градиент в диаграмму. js background - PullRequest
Новая
       20

chart. js "преобразовать" css повторяющийся линейный градиент в диаграмму. js background

0 голосов
/ 28 февраля 2020

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

Вот скриншот. Если вы посмотрите внимательно, вы можете увидеть действия с красной полосой на временной шкале, эта легенда называется «HLD». Но на графике полосы не работают (ни стили в круговой диаграмме, ни легенда не имеют стиля).

enter image description here

Я использую javascript to pu sh цвета фона для каждого действия в массив, который затем передается в качестве опции backgroundColor на диаграмму. js, поэтому цвета всегда совпадают между временной шкалой и диаграммой. Для действий с градиентами я установил фоновый цвет на прозрачный, чтобы я мог проверить его специально. 

    labels.forEach(itemname => {
        if ($('.timeline-item.'+itemname).css('background-color') != 'rgba(0, 0, 0, 0)') {
            bgcolors.push($('.timeline-item.'+itemname).css('background-color'));
        } else {
            bgcolors.push($('.timeline-item.'+itemname).css('background-image'));
        };
    });

Вот так выглядит массив bgcolors после выполнения этого: 

0: "rgb(255, 0, 0)"
​1: "rgb(211, 211, 211)"
​2: "rgb(144, 238, 144)"
​3: "rgb(128, 128, 128)"
​4: "rgb(0, 128, 0)"
​5: "repeating-linear-gradient(45deg, rgb(0, 128, 0) 1px, rgb(0, 128, 0) 5px, rgb(255, 0, 0) 5px, rgb(255, 0, 0) 7px)"
​6: "rgb(255, 165, 0)"
​7: "rgb(60, 179, 113)"
​8: "rgb(128, 0, 128)"
​9: "rgb(0, 0, 0)"
​10: "rgb(128, 128, 128)"
​11: "rgb(0, 128, 0)"
​12: "repeating-linear-gradient(45deg, rgb(0, 128, 0) 1px, rgb(0, 128, 0) 5px, rgb(255, 0, 0) 5px, rgb(255, 0, 0) 7px)"
​13: "rgb(255, 228, 225)"
​14: "rgb(169, 169, 169)"

В идеале был бы какой-то способ сделать диаграмму. js понять входные данные с линейным градиентом, но я понятия не имею, как go об этом.

Любая помощь будет принята с благодарностью.

...