谷歌图表时间线突出显示鼠标悬停上的许多条 [英] Google Charts Timeline highlight many bars on mouseover
问题描述
我目前正在研究一些数据可视化。对于可视化，我使用Dashboard中嵌入的Google Charts Timeline（它实现了在x轴上缩放的功能）。时间轴代表球员在排名中的位置（第一，第二和第三位）。我想要实现的是 - 当我将鼠标悬停在玩家的条目上时，我想在时间线上突出显示他/她的其他条目。以总统，副总裁兼国务卿为例，当我在托马斯杰弗森的时候，当他是国务卿时，我想要他的时间担任副总裁，而总统则在图表上突出显示。我提供jsfiddle作为参考 - https://jsfiddle.net/21aor2ab/
我对使用'onmouseover'事件有了一个想法，但是我在使用
google.visualization.events时在仪表板中正确设置此事件方面存在问题。 addListener（dashChart，'onmouseover'，function（）{something over here}）; 不会出于某种原因...
我会很高兴，如果有人可以建议我一个解决方案，或至少指出我的方向正确。
em> chart events to chart wrappers ...您必须等待'准备就绪'事件在包装上，
然后监听 wrapper.getChart（）
$ b
参见下面的示例...
至于突出显示多个条目，
这里我尝试触发 onmou seo 在其他行上，
事件被触发但行没有突出显示
我想过使用 setSelection 代替，但是对于时间轴图表......
只能选择一个实体给定的时刻
只有其他选项会直接修改svg
但不推荐
您会需要记录所有颜色，包括高亮颜色，
或尝试提供您自己的
此示例突出显示所有Thomas Jefferson行 p>
< script src =https://www.gstatic.com/charts/loader.js>< / script>< div id =dashboard> < div id =chartstyle =height：200px;>< / div> < div id =control>< / div>< / div>
I'm currently working on some data visualization. For the visualization I am using Google Charts Timeline embedded within Dashboard (which implements functionality of zooming on x-axis). Timeline is representing players position in ranking (first, second and third place). What I am trying to achieve is - when i hover mouse on player's entry I would like to highlight his/hers other entries in timeline. Using Google's example with President, VP and Secretary of State - when I hover over Thomas Jefferson bar when he was Secretary of State I want his time as VP and as President highlighted on the chart. I am providing jsfiddle as a reference - https://jsfiddle.net/21aor2ab/
I had an idea about using 'onmouseover' event, but I had problem with setting this event properly within dashboard - simply using
google.visualization.events.addListener(dashChart, 'onmouseover', function(){something over here}); won't work for some reason...
I would be happy if anyone could suggest me a solution, or at least point me in the right direction.
when assigning chart events to chart wrappers...
you have to wait for the 'ready' event on the wrapper,
then listen for the event on wrapper.getChart()
see following example...
as for highlighting multiple entries,
here I try to trigger the onmouseover on the other rows,
the event is fired but the rows aren't highlighted
I thought about using setSelection instead, but for a Timeline chart...
only one entity can be selected at any given moment
only other option would be to modify the svg directly
but not recommended
you would need to log all the colors, including the highlight colors,
or try to provide your own
this example highlights all the Thomas Jefferson rows
google.charts.load('current', {
callback: function () {
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
var dashControl = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control',
'options': {
'filterColumnIndex': 3,
'ui': {
'chartType': 'ScatterChart',
'chartOptions': {
'height': 70,
'chartArea': {
width: '80%',
height: '80%'
},
'hAxis': {
'baselineColor': 'none'
}
},
'chartView': {
'columns': [3, 4]
},
minRangeSize: 12*60*60*1000
}
}
});
var dashChart = new google.visualization.ChartWrapper({
'chartType': 'Timeline',
'containerId': 'chart',
'options': {
'chartArea': {
width: '80%',
height: '80%'
},
hAxis: {
format: 'dd.MM HH:mm'
}
},
'view': {
'columns': [0, 1, 2, 3, 4]
}
});
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: "string", id: "", "role": "tooltip", "p" : { "role" : "tooltip" ,'html': true} });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'President', 'George Washington', 'some tooltip content', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'President', 'John Adams', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'President', 'Thomas Jefferson', 'some tooltip content', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
[ 'Vice President', 'John Adams', 'some tooltip content', new Date(1789, 3, 21), new Date(1797, 2, 4)],
[ 'Vice President', 'Thomas Jefferson', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4)],
[ 'Vice President', 'Aaron Burr', 'some tooltip content', new Date(1801, 2, 4), new Date(1805, 2, 4)],
[ 'Vice President', 'George Clinton', 'some tooltip content', new Date(1805, 2, 4), new Date(1812, 3, 20)],
[ 'Secretary of State', 'John Jay', 'some tooltip content', new Date(1789, 8, 25), new Date(1790, 2, 22)],
[ 'Secretary of State', 'Thomas Jefferson', 'some tooltip content', new Date(1790, 2, 22), new Date(1793, 11, 31)],
[ 'Secretary of State', 'Edmund Randolph', 'some tooltip content', new Date(1794, 0, 2), new Date(1795, 7, 20)],
[ 'Secretary of State', 'Timothy Pickering', 'some tooltip content', new Date(1795, 7, 20), new Date(1800, 4, 12)],
[ 'Secretary of State', 'Charles Lee', 'some tooltip content', new Date(1800, 4, 13), new Date(1800, 5, 5)],
[ 'Secretary of State', 'John Marshall', 'some tooltip content', new Date(1800, 5, 13), new Date(1801, 2, 4)],
[ 'Secretary of State', 'Levi Lincoln', 'some tooltip content', new Date(1801, 2, 5), new Date(1801, 4, 1)],
[ 'Secretary of State', 'James Madison', 'some tooltip content', new Date(1801, 4, 2), new Date(1809, 2, 3)]
]);
google.visualization.events.addListener(dashChart, 'ready', function () {
google.visualization.events.addListener(dashChart.getChart(), 'onmouseover', function (e) {
Array.prototype.forEach.call(document.getElementById(dashChart.getContainerId()).getElementsByTagName('rect'), function(bar) {
if (bar.getAttribute('fill') === '#f4b400') {
bar.setAttribute('fill', '#f7cb4d')
}
});
});
google.visualization.events.addListener(dashChart.getChart(), 'onmouseout', function (e) {
Array.prototype.forEach.call(document.getElementById(dashChart.getContainerId()).getElementsByTagName('rect'), function(bar) {
if (bar.getAttribute('fill') === '#f7cb4d') {
bar.setAttribute('fill', '#f4b400')
}
});
});
});
dashboard.bind(dashControl, dashChart);
dashboard.draw(dataTable);
},
packages:['controls', 'corechart', 'timeline']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart" style="height: 200px;"></div>
<div id="control"></div>
</div>
这篇关于谷歌图表时间线突出显示鼠标悬停上的许多条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
