Ярлыки данных индикатора выполнения задачи диаграммы Ганта Highcharts для многоцветного выполнения одной задачи

Question

Пожалуйста, обратитесь к изображению. Мне нужно указывать имя метки данных на каждом цвете прогресса.

  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
                            }
                        }


                        }]

                      });
            }

Я добавил свойство datalabels в series.data, но это не отображается на выходе. Можете сообщить нам, как добавить название метки данных на каждый цвет выполнения задачи. Изображение прилагается. Это диаграмма Ганта с высокими диаграммами. Код прилагается, пожалуйста, ознакомьтесь с кодом

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 на некоторое фиксированное значение, потому что я не уверен, должен ли ваш график быть отзывчивым или нет. В случае адаптивного графика я рекомендую использовать рендер обратный вызов https://api.highcharts.com/highcharts/chart.events.render для расчета позиции меток данных после каждого изменения размера.

---

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

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