javascript - 如何以 3 个不同的百分比为剑道甘特图任务的背景着色

Question

在剑道甘特图中，我们可以有 2 种不同的背景颜色百分比。我们可以实现 3 种不同的背景吗？ https://demos.telerik.com/kendo-ui/gantt/index

Answer 1

嗨，您可以为 kendo DataBound 事件实现此目的。例如：我在下面附上了示例截图

1. 实际 实际

2. 进行 中 进行中

3. 已完成 已 完成

基于以上三种状态，我们可以更改任务颜色。

您可以在数据加载后循环所有行，您可以根据完成百分比给出颜色。如果任务超限意味着我们将 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%";
            }
        });
    }        
}