На стороне сервера c# и на стороне клиента javascript с json загрузкой диаграммы Ганта Highcharts Индикатор выполнения задачи, необходимо изменить подсказку и имя метки

Question

JsFiddle of Gantchart Индикатор выполнения задачи

См. Изображение

Как настроить Имя метки , а также измените подсказку .

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

        series: [{
            name: prj,
            ** javascript array **

            data: dta,
            ** javascript array **

        }]

    });
}

В ходе выполнения задачи показано, как отобразить имя LABEL и как добавить «Общий процент подзадач» в всплывающая подсказка рядом с Feature 1.1.2

Answer 1

• В ходе выполнения задачи показ имени LABEL

Вы можете изменить значение dataLabel с помощью обратного вызова форматтера.

  series: [{
    name: 'Project 1',
    data: [{
      name: 'Start prototype',
      start: Date.UTC(2019, 10, 18),
      end: Date.UTC(2020, 04, 13),
      completed: 283.33,
    }],
    dataLabels: {
      formatter() {
        return this.point.name
      }
    }
  }]

• как добавить «Процент общих подзадач» во всплывающую подсказку рядом с Элементом 1.1.2

Чтобы настроить подсказку или добавить любую новое значение использовать обратный вызов форматтера.

  tooltip: {
    formatter() {
      let output = `<span style="font-size: 10px">${this.point.series.name}</span><br>
      <span><b>${this.key} + some custom value</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
    }
  },

Демонстрация: https://jsfiddle.net/BlackLabel/9g1rvhb2/

---

API: https://api.highcharts.com/gantt/tooltip.formatter

API: https://api.highcharts.com/highcharts/tooltip.dateTimeLabelFormats.day

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