Question

我想显示带有重复行名的2行，遵循以下讨论主题：

但是我希望'乔治华盛顿'显示在两行中，而不是在同一行中。

var data=[
  [1, 'George Washington', new Date(1779, 3, 29), new Date(1790, 2, 3)],
  [2, 'George Washington', new Date(1789, 3, 29), new Date(1797, 2, 3)],
  [3, 'John Adams', new Date(1797, 2, 3), new Date(1801, 2, 3)],
  [3, 'John Adams', new Date(1797, 2, 3), new Date(1801, 2, 3)],
  [4, 'Thomas Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3)],
];

显示在http://jsfiddle.net/9GbNP/33/中的解决方案并不完全是我想要的，因为它将“乔治华盛顿”视为一个条目。就我而言，它是2个条目。

在看到“WhiteHat”的答案后，我认为我的案子更复杂。更多说明：

timeline: {
  groupByRowLabel: false
}

每行都有隐藏字段，即第1列。我的期望：

1）'乔治华盛顿'将以2行显示，因为每一行都是独一无二的。

2）'John Adams'将以1行显示（它有2个小节），因为在我的情况下它是1个项目。

如果使用：

mySaveAs = app.trustPropagatorFunction(function(doc,path) {
app.beginPriv();
doc.saveAs(path);
app.endPriv();
})


myTrustedSpecialTaskFunc = app.trustedFunction(function(doc,path) {
// Privileged and/or non-privileged code above
app.beginPriv();
mySaveAs(doc,path);
app.endPriv();
// Privileged and/or non-privileged code below
});

该选项与2个案例相冲突。

应按隐藏字段列0分组，而不是按列1分组。

'groupByRowLabel'是否支持隐藏列？我猜这就是问题所在。

Answer 1

使用以下configuration option ...

timeline: {
  groupByRowLabel: false
}

如果设置为false，则为每个dataTable条目创建一行。默认设置是将具有相同行标签的栏收集到一行中。

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

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {

  var data = [
    ['George Washington', new Date(1779, 3, 29), new Date(1790, 2, 3)],
    ['George Washington', new Date(1789, 3, 29), new Date(1797, 2, 3)],
    ['John Adams', new Date(1797, 2, 3), new Date(1801, 2, 3)],
    ['Thomas Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3)],
  ];

  var container = document.getElementById('visualization');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'Name'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows(data);

  var options = {
    height: 400,
    timeline: {
      groupByRowLabel: false
    }
  }

  chart.draw(dataTable, options);

});

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

编辑

没有任何标准配置选项来处理这两种情况

您需要手动更改标签，
在图表上（'ready'事件）
和工具提示（'onmouseover'事件）

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

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var data=[
    ['0|George Washington', new Date(1779, 3, 29), new Date(1790, 2, 3)],
    ['1|George Washington', new Date(1789, 3, 29), new Date(1797, 2, 3)],
    ['John Adams', new Date(1797, 2, 3), new Date(1801, 2, 3)],
    ['John Adams', new Date(1797, 2, 3), new Date(1801, 2, 3)],
    ['Thomas Jefferson', new Date(1801, 2, 3), new Date(1809, 2, 3)]
  ];

  var container = document.getElementById('visualization');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({
    type: 'string',
    id: 'Name'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows(data);

  var options = {
    height: 400
  }

  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
      if (label.textContent.indexOf('|') > -1) {
        label.textContent = label.textContent.split('|')[1];
      }
    });
  });

  google.visualization.events.addListener(chart, 'onmouseover', function (props) {
    var tooltipLabel = container.getElementsByTagName('span');
    if (tooltipLabel.length > 0) {
      if (tooltipLabel[0].innerHTML.indexOf('|') > -1) {
        tooltipLabel[0].innerHTML = tooltipLabel[0].innerHTML.split('|')[1];
      }
    }
  });

  chart.draw(dataTable, options);
});

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

Google时间轴图表显示2行相同的名称

1 个答案: