程序员经验分享-hwhale

如何向谷歌图表中的图例添加工具提示

2024-02-27

使用最新版本的 Google Charts API。

我有一个简单的条形图，我想在将鼠标悬停在图例中的元素上时显示一个工具提示，解释图例中的每个项目是什么。我仍然希望栏上的工具提示保持不变并显示其标签和值。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population',],
        ['New York City, NY', 8175000],
        ['Los Angeles, CA', 3792000],
        ['Chicago, IL', 2695000],
        ['Houston, TX', 2099000],
        ['Philadelphia, PA', 1526000]
      ]);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

     </script>
    </head> 
  <body>
 <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

在上图中，当您将鼠标悬停在 2010 年人口图例元素上时，如何向其添加一个工具提示，显示“数据取自 2010 年美国人口普查”？

UPDATE

找出答案后，我制作了一个代码笔来展示如何使图例中的每个元素显示不同的描述。我希望这对将来的人有帮助。

https://codepen.io/jonnyske7ch/pen/bWzmxW https://codepen.io/jonnyske7ch/pen/bWzmxW

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', '2011 Population'],
    ['New York City, NY', 8175000, 3792000],
    ['Los Angeles, CA', 3792000, 1526000],
    ['Chicago, IL', 2695000, 8175000],
    ['Houston, TX', 2099000, 2695000],
    ['Philadelphia, PA', 1526000, 2099000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  var legendTooltip = document.getElementById('legend-tooltip');

  // set legend tooltip position
  google.visualization.events.addListener(chart, 'ready', function (gglEvent) {
    var chartLayout = chart.getChartLayoutInterface();
    var legendBounds = chartLayout.getBoundingBox('legend');
    legendTooltip.style.top = (legendBounds.top + (legendBounds.height * 2)) + 'px';
    legendTooltip.style.left = legendBounds.left + 'px';
  });

  // show legend tooltip
  google.visualization.events.addListener(chart, 'onmouseover', function (gglEvent) {
    if (gglEvent.row === null) {
			if (data.getColumnLabel(gglEvent.column) === '2010 Population') {
				$('#series-name').html(data.getColumnLabel(gglEvent.column) + ' - Data from 2010 Census');
			} else if (data.getColumnLabel(gglEvent.column) === '2011 Population') {
				$('#series-name').html(data.getColumnLabel(gglEvent.column) + ' - Data from 2011 Census');
			}
      $(legendTooltip).removeClass('hidden');
    }
  });

  // hide legend tooltip
  google.visualization.events.addListener(chart, 'onmouseout', function (gglEvent) {
    if (gglEvent.row === null) {
      $(legendTooltip).addClass('hidden');
    }
  });

  chart.draw(data, options);
}
.hidden {
  display: none;
  visibility: hidden;
}

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #E0E0E0;
  display: inline-block;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
  position: absolute;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.ggl-tooltip span {
  font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>
<div id="legend-tooltip" class="ggl-tooltip hidden">
  <div id="series-name"></div>
</div>

图例条目没有标准工具提示，但您可以添加自己的...

请参阅以下工作片段，

在这里，我使用图表事件onmouseover and onmouseout,
知道图例何时被“悬停”

当事件触发时，如果row事件的属性是null,
然后传说就被悬停了

我也用getChartLayoutInterface将工具提示放置在图例附近

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population',],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  var legendTooltip = document.getElementById('legend-tooltip');

  // set legend tooltip position
  google.visualization.events.addListener(chart, 'ready', function (gglEvent) {
    var chartLayout = chart.getChartLayoutInterface();
    var legendBounds = chartLayout.getBoundingBox('legend');
    legendTooltip.style.top = (legendBounds.top + (legendBounds.height * 2)) + 'px';
    legendTooltip.style.left = legendBounds.left + 'px';
  });

  // show legend tooltip
  google.visualization.events.addListener(chart, 'onmouseover', function (gglEvent) {
    if (gglEvent.row === null) {
      $('#series-name').html(data.getColumnLabel(gglEvent.column));
      $(legendTooltip).removeClass('hidden');
    }
  });

  // hide legend tooltip
  google.visualization.events.addListener(chart, 'onmouseout', function (gglEvent) {
    if (gglEvent.row === null) {
      $(legendTooltip).addClass('hidden');
    }
  });

  chart.draw(data, options);
}
.hidden {
  display: none;
  visibility: hidden;
}

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #E0E0E0;
  display: inline-block;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
  position: absolute;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.ggl-tooltip span {
  font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>
<div id="legend-tooltip" class="ggl-tooltip hidden">
  <div><span>Series Info</span></div>
  <div id="series-name"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

charts

googlevisualization

如何向谷歌图表中的图例添加工具提示 的相关文章

随机推荐

  • 为什么聚合物的 flex 属性/类不起作用？

    浏览器 Firefox v35 操作系统 Linux Ubuntu 14 Polymer v1 4 正在关注 Rob Dodson 的 Polycasts 大多数视频都提到使用 flex flexbox 来实现响应式设计 然而 我很难让它发

  • 如何使用 jQuery 将表格中的制表符顺序从水平重新分配为垂直？

    如何使用 jQuery 设置带有输入元素的表格的 Tab 键顺序 以便 Tab 键顺序为垂直 每列下方 而不是默认的水平方法 下面的数字代表我想要的跳位顺序 我希望 jQuery 代码能够独立于表中的行数和列数工作 示例表 不幸的是呈现为图

  • 通过IdHTTP读取并保存部分文件流

    我想通过文件流从 HTTP 服务器下载文件 并且只读取 并保存到文件 前几行 例如 100 行 读取前 100 行后 文件流必须结束 所以我不想下载或阅读整个文件 您可以在下面找到我到目前为止所拥有的内容 该网站只是一个例子 有人可以引导我

  • 使用numpy.数字或替代数组上的binary_repr - Python

    使用以下代码我尝试将数字列表转换为二进制数但出现错误 import numpy as np lis np array 1 2 3 4 5 6 7 8 9 a np binary repr lis width 32 运行程序后的错误是 回溯

  • r 包插入符号-使用并行时打印迭代

    无论如何 我们可以在使用时打印迭代caret train并行功能 我知道有一个名为 verbose 的选项 但如果我使用多核 它似乎不会打印任何内容 我找到了解决方案 我们需要的只是通过 makeCluster 函数注册核心 library

  • C# 中的 System.Threading.Timer 似乎不起作用。每3秒运行速度非常快

    我有一个计时器对象 我希望它每分钟运行一次 具体来说 它应该运行一个OnCallBack方法并在 a 时变得不活动OnCallBack方法正在运行 一旦OnCallBack方法完成后 它 aOnCallBack 重新启动计时器 这是我现在所

  • 如何在cmake中使用调试符号构建依赖共享库？

    我的代码是这样组织的 cpp main cpp 从调用代码dataStructures and common CMakeLists txt topmostCMakeLists 文件 build common CMakeLists txt 应

  • Android Java - 创建 Cronjob

    我想要制作一个在后端运行的 Cronjob 并启动一个方法 30 分钟 如果函数返回 true 或其他 Cronjob 将创建一个状态栏通知 在 Android 中这可能吗 如果是的话 用哪个函数 非常感谢 安卓系统报警管理器 http d

  • 如何让 CreateProcess/CreateProcessW 在路径 > MAX_PATH 字符中执行进程

    我试图让 CreateProcess 或 CreateProcessW 执行名称 http msdn microsoft com en us library ms682425 aspx http msdn microsoft com en

  • 限制可排序的容器/父级

    好的 我又来了 和 RubaXa 一起玩Sortable http rubaxa github io Sortable 插件 希望他就在这附近 因为这个插件相当复杂 一些发现 我花了一些时间才完全理解这个机制 但我认为我是对的 Case 1

  • Windows 命令提示符中的别名

    我已经添加了notepad exe到我的环境变量中的路径 现在在命令提示符下 notepad exe filename txt打开filename txt 但我想做的只是np filename txt打开文件 我尝试使用DOSKEY np

  • intel avx2 中是否有 movemask 指令的逆指令？

    movemask 指令采用 m256i 并返回 int32 其中每个位 前 4 8 或所有 32 位 具体取决于输入向量元素类型 是相应向量元素的最高有效位 我想做相反的事情 取 32 其中只有 4 8 或 32 个最低有效位有意义 并获得

  • 冒泡排序有什么用？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 如何自定义App Designer人物的背景？

    我想附加徽标或更改应用程序设计器的整个背景uifigure 如何才能做到这一点 如果你想设置一个整个图的纯色背景色 那里存在有记录的方式 https www mathworks com help matlab ref uifigureapp

  • 验证在部分视图中不起作用

    我有一个索引页面 其中有两个部分视图 登录和注册 我正在使用数据模型验证 登录 cshtml model Project ViewModel UserModel div using Html BeginForm Login account

  • 从 Ada 访问 c 常量

    我有一个带有这样类型定义的头文件 ifndef SETSIZE define SETSIZE 32 endif typedef struct set unsigned array SETSIZE set t 要使用相应的 C 函数 我需要在

  • jquery 获取之前输入的文本

    我有以下 html div class active string div

  • 将大文件作为流发送到 process.getOutputStream

    我在 Windows 机器中使用 gzip 实用程序 我压缩了一个文件并作为 blob 存储在数据库中 当我想使用 gzip 实用程序解压缩此文件时 我将此字节流写入 process getOutputStream 但超过30KB后 就无法

  • Android 绘制点

    如何用画布绘制完整的圆或点 我使用画布和路径 绘画类 my code Override public boolean onTouchEvent MotionEvent event float eventX event getX float

  • 如何向谷歌图表中的图例添加工具提示

    使用最新版本的 Google Charts API 我有一个简单的条形图 我想在将鼠标悬停在图例中的元素上时显示一个工具提示 解释图例中的每个项目是什么 我仍然希望栏上的工具提示保持不变并显示其标签和值

热门标签