javascript - 谷歌图表 : Timeline move rowLabel text in another div

Question

图表中时间轴 rowLabel 的正确 svg 元素是什么？

我试图将行标签(行名称)放在图表左侧的 div 中，并删除实际的行标签。 我可以轻松删除行标签:

timeline: { groupByRowLabel: true, showrowLabels: false}

但是我找不到一种方法将实际标签移到单独 div 中的左侧，以便巨大的水平滚动将使行标签卡住在左侧。

function afterDraw() {

//trying to move the rowlabelhere

 var header = document.getElementById('rowlabel');
header.innerHTML = '';
 var svg = document.getElementsByTagName('svg')[0];
 var g = svg.getElementsByTagName('g')[0];
 var gtext = g.getElementsByTagName('text')[0];
 var svgNew = header.appendChild(svg.cloneNode());
 var gNew = svgNew.appendChild(gtext.cloneNode(true));
 var height = parseFloat(gNew.getElementsByTagName('text')[0].getAttribute('y')) - 25;
 gNew.setAttribute('transform','translate(60,-'+height+')');
 }

这是一个存在问题的代码笔:

https://codepen.io/anon/pen/bZmKpo

Answer 1

您可以按照您的描述删除标签，
然后使用 group()从数据表中提取标签的方法，
并将它们添加到图表左侧的容器中。

为了以正确的顺序获得标签，
我们可以根据标签和开始日期进行分组，
然后按开始日期排序。

var group = google.visualization.data.group(
  data,
  [0, 1],
  [{
    column: 0,
    type: 'number',
    label: data.getColumnLabel(0),
    aggregation: google.visualization.data.count
  }]
);
group.sort([{column: 1}]);

但这会导致某些标签重复，
所以我们可以使用数组来过滤掉它们，
当我们将它们添加到容器中时。

var rowLabels = [];
var rowElements = [];
var labels = document.getElementById('labels');
for (var i = 0; i < group.getNumberOfRows(); i++) {
  var team = group.getValue(i, 0);
  if (rowLabels.indexOf(team) === -1) {
    rowLabels.push(team);
    var label = labels.appendChild(document.createElement('div'));
    label.className = 'label';
    label.innerHTML = team;
    rowElements.push(label);
  }
}

然后在'ready'事件中，我们可以调整标签高度，
以匹配图表行。

var rows = container.getElementsByTagName('rect');
var rowIndex = -1;
Array.prototype.forEach.call(rows, function(rect) {
  if (rect.getAttribute('x') === '0') {
    rowIndex++;
    if (rowIndex < rowElements.length) {
      var rowHeight = (parseFloat(rect.getAttribute('height')) - 1) + 'px';
      rowElements[rowIndex].style.height = rowHeight;
      rowElements[rowIndex].style.lineHeight = rowHeight;
    }
  }
});

请参阅以下工作片段...
(在全页模式下查看代码片段以查看完整效果)

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var data = new google.visualization.DataTable({
    cols: [
      {id: 'team', label: 'Team', type: 'string'},
      {id: 'start', label: 'Season Start Date', type: 'date'},
      {id: 'end', label: 'Season End Date', type: 'date'}
    ],
    rows: [
      {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
      {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
      {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
      {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
      {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
      {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
      {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
    ]
  });

  var group = google.visualization.data.group(
    data,
    [0, 1],
    [{
      column: 0,
      type: 'number',
      label: data.getColumnLabel(0),
      aggregation: google.visualization.data.count
    }]
  );
  group.sort([{column: 1}]);

  var rowLabels = [];
  var rowElements = [];
  var labels = document.getElementById('labels');
  for (var i = 0; i < group.getNumberOfRows(); i++) {
    var team = group.getValue(i, 0);
    if (rowLabels.indexOf(team) === -1) {
      rowLabels.push(team);
      var label = labels.appendChild(document.createElement('div'));
      label.className = 'label';
      label.innerHTML = team;
      rowElements.push(label);
    }
  }

  var options = {
    height: 650,
    timeline: {
      groupByRowLabel: true,
      showRowLabels: false
    },
    width: 1000
  };

  var container = document.getElementById('chart');
  var chart = new google.visualization.Timeline(container);
  google.visualization.events.addListener(chart, 'ready', afterDraw);
  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });

  function afterDraw() {
    var header = document.getElementById('header');
    header.innerHTML = '';
    var svg = document.getElementsByTagName('svg')[0];
    var g = svg.getElementsByTagName('g')[1];
    var svgNew = header.appendChild(svg.cloneNode());
    var gNew = svgNew.appendChild(g.cloneNode(true));
    var height = parseFloat(gNew.getElementsByTagName('text')[0].getAttribute('y')) - 25;
    gNew.setAttribute('transform','translate(0,-'+height+')');
    g.parentNode.removeChild(g);

    var rows = container.getElementsByTagName('rect');
    var rowIndex = -1;
    Array.prototype.forEach.call(rows, function(rect) {
      if (rect.getAttribute('x') === '0') {
        rowIndex++;
        if (rowIndex < rowElements.length) {
          var rowHeight = (parseFloat(rect.getAttribute('height')) - 1) + 'px';
          rowElements[rowIndex].style.height = rowHeight;
          rowElements[rowIndex].style.lineHeight = rowHeight;
        }
      }
    });
  }
});

#header {
  height: 56px;
}

#labels {
  border: 1px solid #b7b7b7;
  margin-top: 56px;
}

.label {
  border-top: 1px solid #b7b7b7;
  font-family: Arial;
  font-size: 13px;
  text-align: right;
  padding-left: 8px;
  padding-right: 8px;
}

.label:first-child {
  border: none;
}

.label:nth-child(even) {
	background-color: #e6e6e6;
}

.label:nth-child(odd) {
	background-color: #ffffff;
}

.scroll {
  width: 800px;
  overflow-x: scroll;
}

.inline {
  display: inline-block;
  vertical-align: top;
}

.nowrap {
  white-space: nowrap;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="nowrap">
  <div class="inline" id="labels"></div>
  <div class="inline scroll">
    <div id="header"></div>
    <div id="chart"></div>
  </div>
</div>