Highcharts甘特图任务进度指示器数据标记，用于单个任务进度中的多色

Question

请参考图像。我需要在进度的每种颜色上显示datalabels名称。

  var markers = JSON.parse('<%=ConvertDataTabletoString("uspTaskProgress1","",null,1,10) %>');
            var colors = ['skyblue', 'orange', 'red','blue'];
            var statusprogress = ['Overall Subtask Percentage'];
            var Arrayset = [];
            var starts1 = [];
            var ends1 = [];
            var val1 = [];
            var val2 = [];
            var categories = [];

            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({ color:colors[i],name: markers[i].Task, start: starts1[i], end: ends1[i], completed: markers[i].OverallSubtaskPercentage, y:0});
                    }
                    for (var j = 0; j < markers.length; j++) {
                        categories.push(markers[j].Task);
                    }


                     MainLoadChart(Arrayset, categories);

                }
            }

 function MainLoadChart(array,categories) {
                var dta = array;

                Highcharts.ganttChart('container8', {

                    chart: {
                        type: 'xrange'
                    },

                    xAxis: {
                        type: 'datetime'
                    },
                    yAxis: {

                        categories: categories,
                    },

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

                    tooltip: {
                        formatter() {

                            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() {

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


                        }]

                      });
            }

我在series.data中添加了datalabels属性，但未在输出中显示。可以让我们知道如何在任务进度的每种颜色上添加数据标签名称。图片已附上。这是一张高图的甘特图。已附加代码，请对代码进行审核

Answer 1

您可以设置dataLabels选项，例如格式化程序，以设置数据配置中每个点应显示的数据标签。

喜欢这个：

    data: [{
        name: 'test1',
        start: Date.UTC(2014, 10, 18),
        end: Date.UTC(2014, 10, 25),
        completed: 0.25,
        y: 0,
        dataLabels: {
            enabled: true,
          x: 150,
          formatter() {
            return 'test1'
          }
        }
    }, ...]

演示：https://jsfiddle.net/BlackLabel/am0w5Lkr/

在上面的演示中，我将x设置为某个固定值，因为我不确定您的图表是否应该响应。对于响应式图表，我建议在每次调整大小后使用render回调https://api.highcharts.com/highcharts/chart.events.render计算datalabels的位置。

---

API：https://api.highcharts.com/highcharts/series.line.dataLabels.x

API：https://api.highcharts.com/highcharts/series.line.dataLabels.formatter