将标签添加到方形Highcharts Gant中

Question

我正试图在Gantt Diagram Highcharts的每个方框中添加一个标签，但我不能这样做。如何在每个帧中显示一些值？

标签必须出现在每个框的中心。我动态生成的所有数据

下面我留下我所提出的例子。

如果你能帮助我，非常感谢你...

Highcharts.createElement('link', 
  href: 'https://fonts.googleapis.com/css?family=Unica+One',
  rel: 'stylesheet',
  type: 'text/css'
, null, document.getElementsByTagName('head')[0]);

Highcharts.theme = 
  chart: 
    backgroundColor: 
      linearGradient: 
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 1
      ,
      stops: [
        [0, '#FAFAFA'],
        [1, '#FAFAFA']
      ]
    ,
    style: 
      fontFamily: '\'Unica One\', sans-serif'
    
  
;

// Apply the theme
Highcharts.setOptions(Highcharts.theme);
var today = new Date('2018-02-02');
var day = 1000 * 60 * 60 * 24;
var map = Highcharts.map;
var dateFormat = Highcharts.dateFormat;
var series;
var cars;

today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

function formatear(dato) 

  var fecha = new Date(dato);
  fecha.setUTCHours(0);
  fecha.setUTCMinutes(0);
  fecha.setUTCSeconds(0);
  fecha.setUTCMilliseconds(0);
  fecha = fecha.getTime();

  return fecha;

var js = [
  assigns: '39982-Constanza',
  current: 0,
  pendings: 0,
  finalized: 35,
  asigned: 35,
  deals: [
    pending: '15',
    from: formatear('2018-02-19') - 1 * day,
    to: formatear('2018-02-19') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-20') - 1 * day,
    to: formatear('2018-02-20') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-21') - 1 * day,
    to: formatear('2018-02-21') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-23') - 1 * day,
    to: formatear('2018-02-23') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-26') - 1 * day,
    to: formatear('2018-02-26') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-27') - 1 * day,
    to: formatear('2018-02-27') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-28') - 1 * day,
    to: formatear('2018-02-28') + 0 * day,
    assign: 1
  , ]
, 
  assigns: '52270-Jhon',
  current: 0,
  pendings: 0,
  finalized: 76,
  asigned: 76,
  deals: [
    pending: '15',
    from: formatear('2018-02-07') - 1 * day,
    to: formatear('2018-02-07') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-16') - 1 * day,
    to: formatear('2018-02-16') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-19') - 1 * day,
    to: formatear('2018-02-19') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-21') - 1 * day,
    to: formatear('2018-02-21') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-22') - 1 * day,
    to: formatear('2018-02-22') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-26') - 1 * day,
    to: formatear('2018-02-26') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-27') - 1 * day,
    to: formatear('2018-02-27') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-28') - 1 * day,
    to: formatear('2018-02-28') + 0 * day,
    assign: 1
  , ]
, 
  assigns: '54243-Jane',
  current: 0,
  pendings: 0,
  finalized: 39,
  asigned: 39,
  deals: [
    pending: '15',
    from: formatear('2018-02-06') - 1 * day,
    to: formatear('2018-02-06') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-09') - 1 * day,
    to: formatear('2018-02-09') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-13') - 1 * day,
    to: formatear('2018-02-13') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-16') - 1 * day,
    to: formatear('2018-02-16') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-19') - 1 * day,
    to: formatear('2018-02-19') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-22') - 1 * day,
    to: formatear('2018-02-22') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-27') - 1 * day,
    to: formatear('2018-02-27') + 0 * day,
    assign: 1
  , ]
, 
  assigns: '55011-Juan',
  current: 0,
  pendings: 0,
  finalized: 66,
  asigned: 66,
  deals: [
    pending: '15',
    from: formatear('2018-02-05') - 1 * day,
    to: formatear('2018-02-05') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-06') - 1 * day,
    to: formatear('2018-02-06') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-07') - 1 * day,
    to: formatear('2018-02-07') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-09') - 1 * day,
    to: formatear('2018-02-09') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-11') - 1 * day,
    to: formatear('2018-02-11') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-14') - 1 * day,
    to: formatear('2018-02-14') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-16') - 1 * day,
    to: formatear('2018-02-16') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-22') - 1 * day,
    to: formatear('2018-02-22') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-26') - 1 * day,
    to: formatear('2018-02-26') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-27') - 1 * day,
    to: formatear('2018-02-27') + 0 * day,
    assign: 1
  , 
    pending: '15',
    from: formatear('2018-02-28') - 1 * day,
    to: formatear('2018-02-28') + 0 * day,
    assign: 1
  , ]
, ];

grafica(js);




function grafica(script) 
  //console.log(script);


  var json = script;

  series = json.map(function(item, i) 
    var data = item.deals.map(function(deal) 
      return 
        id: 'deal-' + i,
        pending: deal.pending,
        start: deal.from,
        end: deal.to,
        assign: deal.assign,
        y: i
      ;
    );
    return 
      name: item.assigns,
      data: data,
      current: item.deals[item.current],
      pendings: item.pendings,
      finalized: item.finalized,
      asigned: item.asigned
    ;
  );

  Highcharts.ganttChart('container', 
    series: series,
    title: 
      text: 'Resume'
    ,
    tooltip: 
      pointFormat: '<span>Pendings: point.pending</span><br/><span>From: point.start:%e. %b</span><br/><span>To: point.end:%e. %b</span>'
    ,
    xAxis: 
      currentDateIndicator: true
    ,
    yAxis: 
      type: 'category',
      grid: 
        columns: [
            title: 
              text: 'Person'
            ,
            categories: map(series, function(s) 
              return s.name;
            )
          , 
            title: 
              text: 'Assigns'
            ,
            categories: map(series, function(s) 
              return s.asigned;
            )
          , 
            title: 
              text: 'Ends'
            ,
            categories: map(series, function(s) 
              return s.finalized;
            )
          , 
            title: 
              text: 'From'
            ,
            categories: map(series, function(s) 
              return dateFormat('%e. %b', s.current.from);
            )
          , 
            title: 
              text: 'To'
            ,
            categories: map(series, function(s) 
              return dateFormat('%e. %b', s.current.to);
            )
          ,
          
            title: 
              text: 'Pendings'
            ,
            categories: map(series, function(s) 
              return s.pendings;
            )
          
        ]
      
    
  );

#container 
  max-width: 1200px;
  min-width: 800px;
  height: 400px;
  margin: 1em auto;


.scrolling-container 
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>

<div class="scrolling-container">
  <div id="container"></div>
</div>