在鼠标上方突出显示许多条
在鼠标上方突出显示许多条
提问于 2016-06-05 20:36:22
我目前正在做一些数据可视化的工作。对于可视化，我使用嵌入在仪表板中的(它实现了在x轴上缩放的功能)。时间线代表玩家在排名中的位置(第一、第二和第三位)。我试图实现的是-当我在玩家的条目上悬停鼠标时，我想在时间线上突出显示他/她的其他条目。使用谷歌的例子，总统，副总裁和国务卿-当我徘徊在托马斯杰斐逊酒吧，当他是国务卿时，我希望他的时间，副总裁，并突出显示在图表上。我提供jsfiddle作为参考- https://jsfiddle.net/21aor2ab/。
我有一个关于使用'onmouseover‘事件的想法，但是我在仪表板中正确设置这个事件时遇到了问题--简单地使用google.visualization.events.addListener(dashChart, 'onmouseover', function(){something over here});是不可行的。
如果有人能给我一个解决方案，或者至少指出正确的方向，我会很高兴的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-06 13:10:31
当将图表事件分配给图表包装器时.
您必须等待包装器上的'ready'事件，
然后监听wrapper.getChart()上的事件
参见下面的例子..。
至于突出显示多个条目，
在这里，我尝试在其他行上trigger onmouseover，
事件被触发，但行没有突出显示。
我想用setSelection代替，但是对于时间图.
在任何给定时刻，只能选择一个实体。
只有其他选项是直接修改svg。
但不推荐
您需要记录所有的颜色，包括高亮颜色，
或者尝试提供你自己的
此示例突出显示所有Thomas Jefferson行。
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>
Stack Overflow用户
发布于 2016-06-06 21:25:52
通过使用jQuery进行一些调整，我就能够实现我的目标。只是张贴这个供将来参考或可能的谷歌‘s
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 () {
var original_rect_color;
var new_rect_color;
google.visualization.events.addListener(dashChart.getChart(), 'onmouseover', function (e) {
var original_rect = $("div#dashboard div#chart g rect").filter(function(){return $(this).attr('style') == 'display: none;'})[0];
var temp_original_color = $(original_rect).attr('fill');
if(temp_original_color!=original_rect_color)
{
$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == new_rect_color}).each(function(){
$(this).attr('fill',original_rect_color);
});
}
original_rect_color = temp_original_color;
var original_rect_x = $(original_rect).attr('x');
var original_rect_y = $(original_rect).attr('y');
new_rect_color = $($("div#dashboard div#chart g rect").filter(function(){return $(this).attr('x') == original_rect_x && $(this).attr('y') == original_rect_y})[1]).attr('fill');
$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == original_rect_color}).each(function(){
$(this).attr('fill',new_rect_color);
});
});
google.visualization.events.addListener(dashChart.getChart(), 'onmouseout', function (e) {
$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == new_rect_color}).each(function(){
$(this).attr('fill',original_rect_color);
});
});
});
dashboard.bind(dashControl, dashChart);
dashboard.draw(dataTable);
},
packages:['controls', 'corechart', 'timeline']
});<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37646505
复制相关文章
相似问题
腾讯云开发者
