Loading [MathJax]/jax/output/CommonHTML/config.js
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >在鼠标上方突出显示许多条

问在鼠标上方突出显示许多条
EN

Stack Overflow用户
提问于 2016-06-05 12:36:22
回答 2查看 1.4K关注 0票数 0

我目前正在做一些数据可视化的工作。对于可视化，我使用嵌入在仪表板中的(它实现了在x轴上缩放的功能)。时间线代表玩家在排名中的位置(第一、第二和第三位)。我试图实现的是-当我在玩家的条目上悬停鼠标时，我想在时间线上突出显示他/她的其他条目。使用谷歌的例子，总统，副总裁和国务卿-当我徘徊在托马斯杰斐逊酒吧，当他是国务卿时，我希望他的时间，副总裁，并突出显示在图表上。我提供jsfiddle作为参考- https://jsfiddle.net/21aor2ab/。

我有一个关于使用'onmouseover‘事件的想法，但是我在仪表板中正确设置这个事件时遇到了问题--简单地使用google.visualization.events.addListener(dashChart, 'onmouseover', function(){something over here});是不可行的。

如果有人能给我一个解决方案，或者至少指出正确的方向，我会很高兴的。

javascript
charts
google-visualization
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-06-06 05:10:31

当将图表事件分配给图表包装器时.

您必须等待包装器上的'ready'事件，

然后监听wrapper.getChart()上的事件

参见下面的例子..。

至于突出显示多个条目，

在这里，我尝试在其他行上trigger onmouseover，

事件被触发，但行没有突出显示。

我想用setSelection代替，但是对于时间图.

在任何给定时刻，只能选择一个实体。

只有其他选项是直接修改svg。

但不推荐

您需要记录所有的颜色，包括高亮颜色，

或者尝试提供你自己的

此示例突出显示所有Thomas Jefferson行。

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
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']
});
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2016-06-06 13:25:52

通过使用jQuery进行一些调整，我就能够实现我的目标。只是张贴这个供将来参考或可能的谷歌‘s

​

代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
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']
});
代码语言：javascript
代码运行次数：0
运行
AI代码解释
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/37646505

复制
相关文章
PopupWindow显示在某个控件上方
其他
PopupWindow有一个显示在在某个上方的方法,但是没有定义一个在控件下方的方法,不知为何.这里提供一个小思路:
夏洛克的猫
2018/10/18
3.8K0
Xshell突出显示集
bashbash 指令
xshell突出显示集（参考mobaxterm，直接拷贝过来不行，应该是xshell对正则表达式的支持不够好）: Underline:
院长技术
2020/09/07
2.7K0
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
vue.js
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现 By:授客 开发环境 win10 element-ui "2.13.1" vue "2.6.10" 需求描述 如下，鼠标移动到左侧标签
授客
2020/06/23
3.7K0
销售需求丨突出显示
其他
这是白茶随机模拟的数据，突出显示的需求可能白茶描述的不太清楚，具体要什么样的效果呢？
PowerBI丨白茶
2021/09/03
4090
销售需求丨突出显示
【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )
cssbackground对象
这里要 在一个 div 盒子上方套一层遮罩 , 遮罩就需要 使用绝对定位将其覆盖到其它元素中 ;
韩曙亮
2023/04/16
2.9K0
【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )
Excel图表技巧16：在图表中突出显示最大值
excelundefined图表微信公众号
要突出显示Excel图表中的值，只需添加一个带有要突出显示的值的额外系列。假设想要突出显示销量最大的产品，添加一个额外的列来计算值，如下图3所示。
fanjy
2021/09/22
3.6K0
AngularJS实现鼠标移入显示,鼠标移出隐藏
angularjs
很简单： <span ng-mouseenter="show = true" ng-mouseleave="show = false"> Mouse over me. </span> <div n
飞奔去旅行
2019/06/13
3.3K0
利用JQuery实现鼠标移动到图片上方的时候显示二维码，离开的时候不显示二维码
jquery图像处理
今天给大家介绍一下怎样利用JQuery实现鼠标移动到图片上方的时候显示二维码，离开的时候不显示二维码的功能。 其实主要注意几点细节就可以轻松实现这样的功能了，第一点就是设置一个div不显示并且位置设置
林老师带你学编程
2018/01/03
2.1K0
利用JQuery实现鼠标移动到图片上方的时候显示二维码，离开的时候不显示二维码
echarts饼图鼠标移入时，悬停部分不放大突出 属性 ？
series
如果内部饼图设置完仍然有放大 应该是饼图的 radius设置的过大  将比例缩小即可
青梅煮码
2023/01/16
3.3K0
echarts饼图鼠标移入时，悬停部分不放大突出 属性 ？
Excel公式技巧27： 在条件格式中使用公式来突出显示单元格
excel
条件格式与公式相配合，往往能够发挥很大的威力，其中之一就是用来突出显示单元格。如下图1所示，在“新建格式规则”对话框中：
fanjy
2020/04/14
3.3K0
Excel公式技巧27： 在条件格式中使用公式来突出显示单元格
鼠标悬浮button按钮显示tip
button
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; } body { text-align: center;
西柚dzh
2022/06/09
2.6K0
menuStrip鼠标经过自动显示菜单
其他
//--------------------------------------------------------------------------------- private void Form1_Load(object sender, EventArgs e) { this.menuStrip1.Items[0].MouseHover += new EventHandler(Form1_MouseHover); } //----------------------------------
跟着阿笨一起玩NET
2018/09/19
1.8K0
JavaScript 鼠标滑动，图片显示隐藏
html
图片 当一个区域需要展示多张图片，而该区域的空间大小受到限制时，我们可以通过这种方式来达到预览哪张图片就展示该图片，并隐藏其他图片的方式来达到目的，这就是简
Nian糕
2018/08/21
3.1K0
JavaScript 鼠标滑动，图片显示隐藏
高级可视化 | Banber如何突出显示重点数据？
excel图表拖拽
Banber提供突出标记（突出最大值、最小值、平均值）、添加参考线（可输入固定值或计算数值）、以及数值预警（可对过高或过低的数值预警）等功能，对重点数据起到参照、突出和预警的作用，分分钟实现重点数据突出显示。
Banber可视化云平台
2021/05/27
9100
开机黑屏 仅仅显示鼠标 电脑黑屏 仅仅有鼠标 移动 [已成功解决]
windows存储httphttpshtml
近些天，有网友的电脑出现：开机后屏幕一片漆黑，但屏幕中央显示有鼠标指针，并且可移动。按键盘上的不论什么键都没有反应，鼠标也仅可移动，单、双击都无效。说得简单点儿，就是电脑黑屏，仅仅显示鼠标。
全栈程序员站长
2021/12/05
4.8K0
开机黑屏 仅仅显示鼠标 电脑黑屏 仅仅有鼠标 移动 [已成功解决]
鼠标滑过显示图片大图效果
httpsjava网络安全
用到了mouseover、mouseout、mousemove三个事件。分别表示鼠标滑过图片、鼠标移除图片、鼠标在图片上移动三个事件。
全栈程序员站长
2022/07/08
2.8K0
鼠标滑过显示图片大图效果
css实现鼠标划入显示拖动条
产品经理互联网
我们都必须串联相关生态，去思考有关hutool的问题。我们认为，找到抓手，形成方法论，hutool则会迎刃而解。互联网运营人员间有着这样的共识，做精细化运营，向目标发力，才能获得影响力。这让我明白了问题的抓手，互联网产品经理间有着这样的共识，如何强化认知，快速响应，是非常值得跟进的。这句话语虽然很短，但沉淀之后真的能发现痛点。互联网产品经理间流传着这样一句话，如何强化认知，快速响应，是非常值得跟进的。这不禁令我深思。我们认为，找到抓手，形成方法论，hutool则会迎刃而解。解决hutool的问题，首先要找到抓手。 所以，互联网产品经理间有着这样的共识，如何强化认知，快速响应，是非常值得跟进的。这不禁令我深思。互联网从业者间流传着这样一句话，只有适度倾斜资源，才能赋能整体业务。也许这句话就是最好的答案。互联网运营人员间流传着这样一句话，做精细化运营，向目标发力，才能获得影响力。也许这句话就是最好的答案。
阿超
2022/08/21
1.2K0
jquery 鼠标移入，显示预览大图
css
} </style> <script type="text/javascript"> //<![CDATA[
用户5760343
2019/10/10
3.6K0
jquery 鼠标移入，显示预览大图
QCustomPlot鼠标跟随显示坐标值
https网络安全
Qt最大的优势就是各种库非常全，尤其在图表方面，在5.7版本之后虽然引入了原本企业版才有的QCharts,但相对于只有2个文件就可以引入库的QCustomPlot来说还是太臃肿了。 这里解决一个使用图表的都会碰到的问题–跟随鼠标显示值，在QCustomPlot里非常简单，可以直接看下面的效果图。
全栈程序员站长
2022/11/03
2.9K0
QCustomPlot鼠标跟随显示坐标值
鼠标悬停下划线显示特效，html鼠标悬停显示下划线
httpsjava网络安全html
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145981.html原文链接：https://javaforall.cn
全栈程序员站长
2022/08/28
2.1K0

相似问题

在鼠标上方突出显示单行

41

鼠标上方突出显示文字

59

WPF TreeView:在鼠标上方突出显示项目

10

在鼠标上方突出显示plotband的边界

13

角质材料。在鼠标上方突出显示表行

57
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文