Highcharts甘特图：任务进度指示器需要显示各种状态的单个任务，例如完成，进行中等，并使用不同的颜色

Question

参考图像

var markers = JSON.parse('<%=ConvertDataTabletoString("GetTaskWorkPercentage","2",null,1,10) %>');
var Arrayset = [];
var starts1 = [];
var ends1 = [];
var val1 = [];
var val2 = [];

if (markers != null) {
    if (markers.length > 0) {
        var prj = document.getElementById("param1").value;
        for (var i = 0; i < markers.length; i++) {

            var syearval = parseInt(markers[i].ActualStart.substr(0, 4));
            var smonthval = parseInt(markers[i].ActualStart.substr(5, 2)) - 1;
            var sdateval = parseInt(markers[i].ActualStart.substr(8, 2));

            var eyearval = parseInt(markers[i].ActualEnd.substr(0, 4));
            var emonthval = parseInt(markers[i].ActualEnd.substr(5, 2)) - 1;
            var edateval = parseInt(markers[i].ActualEnd.substr(8, 2));
            val1 = [Date.UTC(syearval, smonthval, sdateval)];
            val2 = [Date.UTC(eyearval, emonthval, edateval)];
            starts1.push(val1[0]);
            ends1.push(val2[0]);
            Arrayset.push({
                name: markers[i].Task,
                completed: markers[i].Percentages,
                start: starts1[i],
                end: ends1[i]
            });
        }

        MainLoadChart(Arrayset);
    }
}

function MainLoadChart(array) {
    var dta = array;
    Highcharts.ganttChart('container8', {

        title: {
            text: 'Task Progress Indicator Status'
        },

          tooltip: {
                        formatter()
                        {
                            //let output = `<span style="font-size: 10px">${this.point.series.name}</span><br>
                            let output = ` <span style="font-size: 20px;color:green">${prj}</span><br>
                                      <span><b>${this.key}(Overall Subtask Percentage):${this.point.completed}% </b></span><br>
                                     <span>Start: ${Highcharts.dateFormat('%A, %e. %b, %Y', this.x)}</span><br>
                     <span>End: ${Highcharts.dateFormat('%A, %e. %b, %Y', this.x2)}</span>`
                            return output
                        }
                    },

        series: [{
        data: dta,

         dataLabels: {
                            formatter() {
                                //return this.point.completed;
                                let output1 = ` <span style="font-size: 10px">${this.point.completed}%</span>`

                                return output1
                            }

        }]

    });
}

当前，我显示了整个子任务的输出。我需要在单个任务中显示具有不同（多种）颜色和样式的各种状态（例如completed，inprogress，hold，returned）的进度（总体）。因此，值不应像datalabel值那样重叠或隐藏。

Answer 1

您应该能够通过使用yAxis.categories并将数据分配给这一类别来实现。

演示：https://jsfiddle.net/BlackLabel/19L48qy5/

...
yAxis: {
    categories: ['Prototyping'],
},
series: [{
    name: 'Project 1',
    data: [{
        name: 'test1',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 25),
        y: 0
    }, {
            color: 'red',
        name: 'test2',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 22),
        y: 0
    }, {
            color: 'green',
        name: 'test3',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 20),
        y: 0
    }]
}]
...

API：https://api.highcharts.com/gantt/yAxis.categories