Google Chartsタイムライン - バーのラベルを強制する方法

Question

Googleのチャートライブラリを使用して、タイムラインを使用してガントチャートを生成しています。私が取り組んでいる問題の1つは、図書館の自動barLabelプレースメントです。ラベルの内側に長い文字列を切り詰めて、のラベルの外側にを配置するのではなく、ひどく矛盾しています。

質問

どのように私はいつものバーの内側に座ってテキストを強制することができますか？

例：

Answer 1

dataTable

の行と同じ順序でなければなりません解決策：

少し必須@ 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 2

"alwaysInside" のオプションがないため、

あなたはtimeline.showBarLabels: falseとラベルを隠すことができ、

は、手動ときにそれらを追加グラフは'ready'

です。

<rect>要素は、作業スニペットを次のように表示...

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>