javascript - 服务器端c#和客户端javascript，带有json加载Highcharts甘特图任务进度指示器，需要更改工具提示和标签名称

Question

Gantchart 的 JsFiddle Taskprogress Indicator

引用图片

如何配置标签名称并更改工具提示。

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

        }]

    });
}

在任务进度中如何显示标签名称以及如何在功能 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