在 Google 甘特图的 rect 元素中嵌套跨度文本

Question

I have a google gantt chart that im trying to add text to inside the bars (as seen below) however it seems im adding them to the master container as oppose to inside the rect element. I have attempted to appendchild on the rect node but this causes it to nest improperly as well and never shows up. Attached is my chart with the test values and how it looks , I feel im super close, help is appreciated!

Here is my code snippet (which derives from another users solution):

      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

first, <rect> elements are svg elements, and they shouldn't really have children.
you could append a <text> element (rather than <span> ) to the <rect> element's parent <g> ,
but that wouldn't really help much, because you would still have to set the x, y coordinates.
also, when creating an svg element, you have to use its namespace, using --> createElementNS

document.createElementNS(svgNS, 'text'); 

which is the reason nothing appeared

---

appending a <span> to the chart container is fine.
however, the reason your labels are not positioned properly,
is because you have to account for the container's position on the page.

if it were at 0, 0 on the page, your code would work.
but since it has elements above, your y coordinate is off.

to resolve, get the bounding box of the container,
and add the top position of the container to your label's y coordinate.

var containerBounds = container.getBoundingClientRect();

...

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

---

see following working snippet...

 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>