Как раскрасить фон задания кендо ганта в 3 разных процентах

Question

В диаграмме Кендо Ганта мы можем иметь 2 разных цвета фона в процентах. можем ли мы реализовать 3 разных фона? https://demos.telerik.com/kendo-ui/gantt/index

Answer 1

Привет, вы можете добиться этого для событий кендо DataBound. Пример: ниже я прикрепил образец снимка экрана

1. Фактический Фактический

2. В процессе В процессе

3. Завершено Завершено

На основе выше трех статусов мы можем изменить цвета задач.

Вы может l oop все строки после загрузки данных, вы можете задать цвет в зависимости от завершенного процента. Если задача была перевыполнена, значит мы окрашиваем 100% в красный цвет.

function onDataBound(e) {
    var ganttList = e.sender.list;
    if (ganttList.dataSource) { 
        var gantt = this;
        gantt.element.find(".k-task-complete").each(function (e) {
            var dataItem = gantt.dataSource.getByUid($(this).parent().get(0).dataset.uid);
            if (!dataItem.isOverRun) {
                var completePercentWidth = dataItem.pc + "%";
                this.style.backgroundColor = "#2a9e2a";
                this.style.width = completePercentWidth;
            } else if (dataItem.isOverRun) {
                this.style.backgroundColor = "#e64b4b";
                this.style.width = "100%";
            }
        });

        var gantt = this;
        gantt.element.find(".k-task-summary-complete").each(function (e) {
            var dataItem = gantt.dataSource.getByUid($(this).parent().parent().get(0).dataset.uid);
            if (!dataItem.isOverRun) {
                var completePercentWidth = dataItem.pc + "%";
                this.style.backgroundColor = "#2a9e2a";
                this.style.width = completePercentWidth;
            } else if (dataItem.isOverRun) {
                this.style.backgroundColor = "#e64b4b";
                this.style.width = "100%";
            }
        });
    }        
}