Question

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

问题

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

示例：

Answer 1

因为没有{＆＃34; alwaysInside＆＃34;，

的选项

您可以使用timeline.showBarLabels: false，

隐藏标签

然后在图表'ready'

时手动添加它们

<rect>元素的顺序应与dataTable

中的行的顺序相同

请参阅以下工作代码段...

＆＃13;

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
    }
  });
}

＆＃13;

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

＆＃13;

Answer 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
    }
});

Answer 3

我为神秘文字设置了''和'的属性，将其转换为适合条形尺寸的摘录。

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

注意！！元素“ 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++;
            }
        });
    });

谷歌图表时间表 - 如何强制酒吧标签栏

3 个答案: