在 Google 甘特图的矩形元素内嵌套跨度文本

Question

我有一个谷歌甘特图，我试图将文本添加到条形内部（如下所示），但似乎我将它们添加到主容器中，而不是 rect 元素内部。我试图在 rect 节点上追加子节点，但这会导致它嵌套不正确并且永远不会出现。附上我的图表，上面有测试值和它的外观，我觉得我超级接近，不胜感激！

这是我的代码 sn-p（来自另一个用户的解决方案）：

      google.visualization.events.addOneTimeListener(chart, 'ready', function () {


    var rectangles = container.getElementsByTagName('rect');
    var adjustY = 10;
    var adjustX = 15;
    for(var i=0; i<rectangles.length; i++){
        if (rectangles[i].getAttribute('x') !== '0') {
            var barLabel = container.appendChild(document.createElement('span'));
            barLabel.innerHTML = 'test';
            barLabel.style.color = '#000000';
            barLabel.style.position = 'absolute';
            barLabel.style.overflow = 'hidden';
            barLabel.style.width = (parseInt(rectangles[i].getAttribute('width') - adjustX)) + 'px';
            barLabel.style.top = (parseInt(rectangles[i].getAttribute('y')) + adjustY) + 'px';
            barLabel.style.left = (parseInt(rectangles[i].getAttribute('x')) + adjustX) + 'px';
        }
    }

Answer 1

首先，<rect> 元素是 svg 元素，它们不应该有子元素。
您可以将<text> 元素（而不是<span>）附加到<rect> 元素的父元素<g>，
但这并没有太大帮助，因为您仍然需要设置 x、y 坐标。
另外，当创建一个 svg 元素时，你必须使用它的命名空间，使用 --> createElementNS

document.createElementNS(svgNS, 'text'); 

这就是什么都没出现的原因

---

将<span> 附加到图表容器就可以了。
但是，您的标签位置不正确的原因，
是因为您必须考虑容器在页面上的位置。

如果它在页面上的 0, 0 处，您的代码就可以工作。
但由于它上面有元素，你的 y 坐标是关闭的。

解析，获取容器的边界框，
并将容器的顶部位置添加到标签的 y 坐标。

var containerBounds = container.getBoundingClientRect();

...

barLabel.style.top = (parseFloat(rectangles[i].getAttribute('y')) + adjustY + containerBounds.top) + 'px';

---

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages:['gantt']
}).then(function () {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['2014Spring', 'Spring 2014', 'spring',
     new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
    ['2014Summer', 'Summer 2014', 'summer',
     new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
    ['2014Autumn', 'Autumn 2014', 'autumn',
     new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
    ['2014Winter', 'Winter 2014', 'winter',
     new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
    ['2015Spring', 'Spring 2015', 'spring',
     new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
    ['2015Summer', 'Summer 2015', 'summer',
     new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
    ['2015Autumn', 'Autumn 2015', 'autumn',
     new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
    ['2015Winter', 'Winter 2015', 'winter',
     new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
    ['Football', 'Football Season', 'sports',
     new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
    ['Baseball', 'Baseball Season', 'sports',
     new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
    ['Basketball', 'Basketball Season', 'sports',
     new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
    ['Hockey', 'Hockey Season', 'sports',
     new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
  ]);

  var options = {
    height: 400,
    gantt: {
      trackHeight: 30
    }
  };

  var container = document.getElementById('chart_div');
  var containerBounds = container.getBoundingClientRect();
  var chart = new google.visualization.Gantt(container);

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {

    var rectangles = container.getElementsByTagName('rect');
    var adjustY = 0;
    var adjustX = 15;
    for(var i=0; i<rectangles.length; i++){
      if (rectangles[i].getAttribute('x') !== '0') {
        var barLabel = container.appendChild(document.createElement('span'));
        barLabel.innerHTML = 'test';
        barLabel.style.color = '#ffffff';
        barLabel.style.fontWeight = 'bold';
        barLabel.style.position = 'absolute';
        barLabel.style.overflow = 'hidden';
        barLabel.style.width = (parseFloat(rectangles[i].getAttribute('width') - adjustX)) + 'px';
        barLabel.style.top = (parseFloat(rectangles[i].getAttribute('y')) + adjustY + containerBounds.top) + 'px';
        barLabel.style.left = (parseFloat(rectangles[i].getAttribute('x')) + adjustX + containerBounds.left) + 'px';
      }
    }

  });

  chart.draw(data, options);

  function daysToMilliseconds(days) {
    return days * 24 * 60 * 60 * 1000;
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<h1>TEST CUSTOMER 1</h1>
<div id="chart_div"></div>