Google时间轴图表显示2行相同的名称 [英] Google Timeline chart to display 2 rows of same names
问题描述
我想显示2行重复的行名称，我正在讨论这个讨论主题：
但我希望'George Washington'显示为2行，而不是
var data = [
['George Washington'，new Date（1779，3，29） ），新日期（1790，2,3）]，
['George Washington'，新日期（1789,3,29），新日期（1797,2,3）]，
[约翰·亚当斯的新日期（1797,2,3），新日期（1801,2,3）]，
['托马斯杰弗逊'，新日期（1801,2,3），新日期（1809年2月3日） 2，3）]，
];
解决方案显示在： http://jsfiddle.net/9GbNP/33/ 并不完全是我想要的，因为它把'乔治华盛顿'视为1条目。在我的情况下，它是2个条目。
在看到'WhiteHat'的回答后，我发现我的情况更复杂。更多描述：
$ pre $ var $ data $ [
[1，'George Washington'，new Date（1779，3，新日期（1790,2,3）]，
[2，'George Washington'，新日期（1789,3,29），新日期（1797,2,3）]，
[3，'约翰亚当斯'，新日期（1797,2,3），新日期（1801,2,3）]，
[3，'约翰亚当斯'，新日期（1797年2月3日） ），新日期（1801,2,3）]，
[4，'Thomas Jefferson'，新日期（1801,2,3），新日期（1809,2,3）]，
]。
每行都有隐藏字段，即第1列。我期望的是：
$ b $ 1）'George Washington'以两行显示，因为每一行都是唯一的。
$ b p> 2）'John Adams'将显示在1行（它有2个小节），因为它是我的例子中的1个项目。
如果使用：
时间轴：{
groupByRowLabel：false
}
该选项与2种情况冲突。
它应该按隐藏字段列0分组，而不是第1栏。
'groupByRowLabel'是否支持隐藏列？我想这就是问题所在。
使用以下 / interactive / docs / gallery / timeline＃configuration-optionsrel =nofollow noreferrer>配置选项 ... 时间轴：{
groupByRowLabel：false
}
如果设置为
false，则为每个dataTable条目创建一行。默认情况下，将具有相同行标签的酒吧收集到一行中。
以下工作片段...
google.charts.load（'current' ，{package：['timeline']}）。然后（function（）{var data = [['George Washington'，new Date（1779，3，29），new Date（1790，2,3）]， '乔治华盛顿'，新日期（1789,3,29），新日期（1797,2,3）]，['约翰亚当斯'，新日期（1797,2,3），新日期（1801,2,3） ）]，['Thomas Jefferson'，new Date（1801，2，3），new Date（1809，2，3）]]; var container = document.getElementById（'visualization'）; var chart = new google。 visual.Timeline（container）; var dataTable = new google.visualization.DataTable（）; dataTable.addColumn（{type：'string'，id：'Name'}）; da taTable.addColumn（{type：'date'，id：'Start'}）; dataTable.addColumn（{type：'date'，id：'End'}）; dataTable.addRows（数据）; var options = {height：400，timeline：{groupByRowLabel：false}} chart.draw（dataTable，options）;}）;
b
编辑
没有任何标准配置选项可以处理这两种情况。 b
您需要手动更改图表上的标签，
（'ready' event）
和工具提示（'onmouseover' event）
请参阅以下工作片段...
google.charts.load（'current'，{packages：['timeline'] }）。然后（函数（）{var data = [['0 | George Washington'，new Date（1779，3，29），new Date（1790，2，3）]，['1 | George Washington' ，3,29），新日期（1797,2,3）]，['John Adams'，新日期（1797,2,3），新日期（1801,2,3）]，['John Adams'，新日期（1797,2,3），新日期（1801,2,3）]，['Thomas Jefferson'，新日期（1801,2,3），新日期（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（数据）; 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（图表，'onmouseover'，函数（道具）{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）;}）;
I want to display 2 rows with duplicated row name, am following this thread of discussion:
Google Timeline overlapping timesheets
but I want 'George Washington' to be display in 2 rows, not in same row.
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)],
];
The solution showing in: http://jsfiddle.net/9GbNP/33/ is not exactly what I wanted, because it treat 'George Washington' as 1 entry. In my case, it is 2 entries.
After seeing 'WhiteHat' answer, which worked for above case, I realized my case is more complicated. More descriptions:
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)],
];
Each row is had hidden field, which is 1st column. What I expect:
1) 'George Washington' to be displayed in 2 rows, as each is unique.
2) 'John Adams' to be displayed in 1 row (it has 2 bars), as it's 1 item in my case.
If using:
timeline: {
groupByRowLabel: false
}
the option is conflicting with 2 case.
It should be grouped by hidden field column 0, not by column 1.
Does 'groupByRowLabel' support hidden column? I guess that's the question.
use the following configuration option...
timeline: {
groupByRowLabel: false
}
If set to
false, creates one row for every dataTable entry. The default is to collect bars with the same row label into one row.
see following working snippet...
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>
EDIT
there aren't any standard config options to handle both situations
you would need to manually change the label,
on the chart ('ready' event)
and the tooltip ('onmouseover' event)
see following working snippet...
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行相同的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
