Google Charts Timeline - 如何在 Bar 内部强制使用 Bar 标签答案

【问题标题】：Google Charts Timeline - How to Force Bar Labels INSIDE of BarGoogle Charts Timeline - 如何在 Bar 内部强制使用 Bar 标签
【发布时间】：2016-09-09 15:53:40
【问题描述】：

我正在使用 Google 的图表库来生成类似甘特图的图表（使用时间轴）。我遇到的一个问题是图书馆的自动barLabel 放置。应该截断长字符串以放置在标签内与将完整字符串放置在标签outside之间是非常不一致的。

问题

如何强制文本始终位于栏内？

示例：

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

因为没有“alwaysInside”的选项，

你可以用timeline.showBarLabels: false隐藏标签，

然后在图表为'ready'时手动添加

<rect> 元素的顺序应与dataTable 中的行顺序相同

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

google.charts.load('current', {
  callback: drawChart,
  packages:['timeline']
});

function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Row label' });
  dataTable.addColumn({ type: 'string', id: 'Bar Label' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'Row 1', 'Bar 1', new Date(2016, 7, 1, 0, 30), new Date(2016, 7, 1, 0, 35) ],
    [ 'Row 1', 'Bar 2', new Date(2016, 7, 1, 1, 15), new Date(2016, 7, 1, 1, 45) ],
    [ 'Row 1', 'Bar 3', new Date(2016, 7, 1, 1, 50), new Date(2016, 7, 1, 2, 15) ]
  ]);

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    var index = 0;
    var adjustXY = 10;
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function (rect) {
      if (rect.getAttribute('x') !== '0') {
        var barLabel = container.appendChild(document.createElement('span'));
        barLabel.innerHTML = dataTable.getValue(index, 1);
        barLabel.style.color = '#ffffff';
        barLabel.style.position = 'absolute';
        barLabel.style.top = (parseInt(rect.getAttribute('y')) + adjustXY) + 'px';
        barLabel.style.left = (parseInt(rect.getAttribute('x')) + adjustXY) + 'px';
        index++;
      }
    });
  });

  chart.draw(dataTable, {
    timeline: {
      showBarLabels: false
    }
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline"></div>

【讨论】：

几乎成功了！请参阅下面的答案。感谢您的所有帮助！
这可行，但是当您将鼠标悬停在文本上时，文本标签会阻止单元格的工具提示出现。
barLabel.style.pointerEvents = 'none';解决上述问题

【解决方案2】：

解决办法：

需要对@WhiteHat 的回复稍作调整，但就是这样！

google.visualization.events.addOneTimeListener(chart, 'ready', function () {
        var rectangles = container.getElementsByTagName('rect');
        var adjustY = 25;
        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 = dataTable.getValue(i, 1);
                barLabel.style.color = '#000';
                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';
            }
        }

    });

chart.draw(dataTable, {
    timeline: {
       showBarLabels: false
    }
});

【讨论】：

这可行，但是当您将鼠标悬停在文本上时，文本标签会阻止单元格的工具提示出现。
barLabel.style.pointerEvents = 'none';解决上述问题

【解决方案3】：

我为神秘文本设置了 '' 和 'of '' 属性，将其转换为根据条形大小调整的摘录。

文本是从左边出来还是从右边出来。

注意！！元素“g”是其中包含条形的“rect”和“text”的元素

contenido[5]

把这段代码放在

之后

dataTable.addRows();

希望对你有帮助?

google.visualization.events.addListener(chart, 'onmouseout', function() {
        var index = 0;
        var rects = []
        var contenido = container.getElementsByTagName('g');
        var xlat = 0
        var long = 0
        console.log("CONTENIDO",contenido);
        Array.prototype.forEach.call(contenido[5].getElementsByTagName('rect'), function(valrect) {

            if (valrect.getAttribute('x') !== '0') {
                rects.push(valrect);
            }
        });
        Array.prototype.forEach.call(contenido[5].getElementsByTagName('text'), function(texted) {
            console.log("CAJA", rects[index]);
            console.log("TEXTO", texted)
            console.log("VALOR", texted.innerHTML)
            if (texted.getAttribute('x') !== '0') {
                var cajaWidth = parseInt(rects[index].getAttribute('x')) + parseInt(rects[index].getAttribute('width'))
                if (parseInt(texted.getAttribute('x')) > cajaWidth ) {
                    var myDiv = texted.innerHTML;
                    long = parseInt((rects[index].getAttribute('width') / 8) - 2) ;
                    xlat = parseInt(rects[index].getAttribute('x')) + 10;
                    console.log("X",rects[index].getAttribute('x'));
                    console.log("XLAT", xlat);
                    texted.innerHTML = (myDiv.substring(0,long) + ' ...')
                    texted.setAttribute('x', xlat);
                    texted.setAttribute('style', 'display: block;  width: 120px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;');
                }
                console.log("Condicion: ", parseInt(texted.getAttribute('x') - rects[index].getAttribute('x')))
                if (parseInt(texted.getAttribute('x')) < parseInt(rects[index].getAttribute('x')) ) {
                    var myDiv = texted.innerHTML;
                    long = parseInt((rects[index].getAttribute('width') / 8) - 4) ;
                    xlat = parseInt(rects[index].getAttribute('x')) + parseInt(rects[index].getAttribute('width') - 15);
                    console.log("X",rects[index].getAttribute('x'));
                    console.log("XLAT", xlat);
                    texted.innerHTML = (myDiv.substring(0,long) + ' ...')
                    texted.setAttribute('x', xlat);
                    texted.setAttribute('style', 'display: block;  width: 120px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;');
                }
                index++;
            }
        });
    });
    
   
    google.visualization.events.addOneTimeListener(chart, 'ready', function() {
        var index = 0;
        var rects = []
        var contenido = container.getElementsByTagName('g');
        var xlat = 0
        var long = 0
        console.log("CONTENIDO",contenido);
        Array.prototype.forEach.call(contenido[5].getElementsByTagName('rect'), function(valrect) {

            if (valrect.getAttribute('x') !== '0') {
                rects.push(valrect);
            }
        });
        Array.prototype.forEach.call(contenido[5].getElementsByTagName('text'), function(texted) {
            console.log("CAJA", rects[index]);
            console.log("TEXTO", texted)
            console.log("VALOR", texted.innerHTML)
            if (texted.getAttribute('x') !== '0') {
                var cajaWidth = parseInt(rects[index].getAttribute('x')) + parseInt(rects[index].getAttribute('width'))
                if (parseInt(texted.getAttribute('x')) > cajaWidth ) {
                    var myDiv = texted.innerHTML;
                    long = parseInt((rects[index].getAttribute('width') / 8) - 2) ;
                    xlat = parseInt(rects[index].getAttribute('x')) + 10;
                    console.log("X",rects[index].getAttribute('x'));
                    console.log("XLAT", xlat);
                    texted.innerHTML = (myDiv.substring(0,long) + ' ...')
                    texted.setAttribute('x', xlat);
                    texted.setAttribute('style', 'display: block;  width: 120px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;');
                }
                console.log("Condicion: ", parseInt(texted.getAttribute('x') - rects[index].getAttribute('x')))
                if (parseInt(texted.getAttribute('x')) < parseInt(rects[index].getAttribute('x')) ) {
                    var myDiv = texted.innerHTML;
                    long = parseInt((rects[index].getAttribute('width') / 8) - 4) ;
                    xlat = parseInt(rects[index].getAttribute('x')) + parseInt(rects[index].getAttribute('width') - 15);
                    console.log("X",rects[index].getAttribute('x'));
                    console.log("XLAT", xlat);
                    texted.innerHTML = (myDiv.substring(0,long) + ' ...')
                    texted.setAttribute('x', xlat);
                    texted.setAttribute('style', 'display: block;  width: 120px;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;');
                }
                index++;
            }
        });
    });

【讨论】：