将标签添加到方形Highcharts Gant中

问题描述 投票：0回答：1

我正试图在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>
javascript css highcharts
1个回答
0
投票

您可以通过启用dataLabels并使用dataLabels.formatter或dataLabels.format来设置将要呈现的内容来实现它。

码：

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,
    plotOptions: {
    	gantt: {
      	dataLabels: {
        	enabled: true,
          formatter: function() {
          	console.log(this);
            return this.y;
          }
        }
      }
    },
    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>

演示：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.