如何在鼠标悬停在栏上时显示标签

2024-03-15

我用 Chartist.js 制作了一个条形图。

现在我想在栏上添加一些监听事件。

如何让鼠标悬停在栏上时显示标签?


您有 2 个选择 -

Option 1


您可以使用一个工具提示插件。你可以在这里找到它 -https://github.com/Globegitter/chartist-plugin-tooltip https://github.com/Globegitter/chartist-plugin-tooltip

添加 CSS 和 JS 文件后,您应该能够像这样调用插件 -Chartist.plugins.tooltip()

这是他们的一个例子Plugins https://gionkunz.github.io/chartist-js/plugins.html#tooltip-plugin page -

var chart = new Chartist.Line('.ct-chart', {
  labels: [1, 2, 3],
  series: [
    [
      {meta: 'description', value: 1 },
      {meta: 'description', value: 5},
      {meta: 'description', value: 3}
    ],
    [
      {meta: 'other description', value: 2},
      {meta: 'other description', value: 4},
      {meta: 'other description', value: 2}
    ]
  ]
}, {
  low: 0,
  high: 8,
  fullWidth: true,
  plugins: [
    Chartist.plugins.tooltip()
  ]
});

这将是更容易、更好的选择。

Option 2


如果你想自己做某事,可以绑定mouseover and mouseout事件于draw事件的回调 -

var data = {
  labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
  series: [
    [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
  ]
};

var options = {
  high: 10,
  low: -10,
  axisX: {
    labelInterpolationFnc: function(value, index) {
      return index % 2 === 0 ? value : null;
    }
  }
};

var chart = new Chartist.Bar('.ct-chart', data, options);

// Based on ty's comment
chart.on('created', function(bar) {
  $('.ct-bar').on('mouseover', function() {
    $('#tooltip').html('<b>Selected Value: </b>' + $(this).attr('ct:value'));
  });

  $('.ct-bar').on('mouseout', function() {
    $('#tooltip').html('<b>Selected Value:</b>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.js"></script>
<link href="https://cdn.jsdelivr.net/chartist.js/0.9.5/chartist.min.css" rel="stylesheet" />
<div id="tooltip"><b>Selected Value:</b>
</div>
<div class="ct-chart"></div>

UPDATE:根据ty的评论更新了代码

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在鼠标悬停在栏上时显示标签 的相关文章

  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • 如何使用 HTML 5 实现类似 gmail 的文件上传/附件

    我记得一些支持 Ajax 之类的选项 无回发世界 文件上传 隐藏的 iframe 使用 flash 对象 尽管我仍然好奇为什么使用 SWF 以及它提供什么优势 然而 通过查看博客 HTML 5 似乎很有前途 我尝试了一些小示例 它确实有效
  • 为什么我的反应路由器链接将我带到页面中间?

    我的网站上有很多链接 但只有一个可以执行此操作 它没有将我带到导航栏的顶部 而是转到内容的中间 知道为什么会这样吗 这是一个页面 其中有一个 map经历一些JSON 这是渲染div页面下方的文本元素 如果重要的话 这是一些可能相关的代码 路
  • 在 jQuery .live() 方法中模拟“焦点”和“模糊”

    Update 从 jQuery 1 4 开始 live 现在支持focusin and focusout events jQuery http www jquery com currently1 doesn t support blur o
  • 使用 jQuery Select2 清除下拉菜单

    我正在尝试使用奇妙的方式以编程方式清除下拉菜单Select2 http ivaynberg github com select2 图书馆 使用 Select2 远程 ajax 调用动态填充下拉列表query option HTML
  • 在 R 传单中添加不透明度滑块

    如何在 R leaflet 应用程序中添加滑块来控制特定图层的不透明度 对于这个应用程序 我不想使用闪亮 这里建议 在 R 传单应用程序中添加滑块 https stackoverflow com questions 37682619 add
  • 如何立即启动setInterval循环? [复制]

    这个问题在这里已经有答案了 在一个简单的setInterval setInterval function Do something every 9 seconds 9000 第一个动作将在 9 秒后发生 t 9s 如何强制循环立即执行第一个
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 检测 Google 验证码的挑战窗口何时关闭

    我正在使用谷歌隐形验证码 有没有办法检测挑战窗口何时关闭 我所说的挑战窗口是指您必须选择一些图像进行验证的窗口 目前 我在按钮上放置了一个旋转器 一旦单击按钮 就会呈现验证码挑战 无法向用户提示另一个质询窗口 我以编程方式调用渲染函数 gr
  • JS 保留以零结尾的小数[重复]

    这个问题在这里已经有答案了 在JavaScript中 是否可以 锁定 十进制数 以保留以零结尾的 浮点数 例如 我有 2 个不同的数字 如下所示 伪代码 let a 1 0 let b 1 00 a b true should be fal
  • 为什么这行带有“await”的代码会触发微任务队列处理?

    以下引用是我理解微任务队列处理的主要参考 当 JS 堆栈清空时 就会处理微任务 承诺使用 杰克 阿奇博尔德 https twitter com jaffathecake status 954653170986311680 这对我来说没有意义
  • JavaScript 将键添加到数组中的每个值

    我下面有这个数组 它由一个简单的数组组成 我想要完成的是放一把钥匙id在每个数组值前面以实现类似的效果 id a id b id c id d 有没有一种简单的方法可以做到这一点 任何帮助将不胜感激 谢谢 var test a b c d
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j
  • 类中可以有生成器 getter 吗?

    我的意思是吸气剂是发电机 我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • Javascript 浮点乘以 100 仍然有错误

    我有一个货币字段的文本输入 我在字段中输入 33 91 并在尝试使用 乘以 100 技术时得到以下结果 var curWth parseInt trans withdraw index val 100 3390 var curWth par
  • 以角度访问窗口 TemplateUrl 内的范围

    我的模式有一个 windowTemplateUrl 如下 div class modal fade div class modal dialog div class modal content square btn div div div
  • Chrome 扩展:强制 popup.html 关闭

    我想知道是否可以强制 popup html 关闭 在弹出的 javascript 中 window close
  • 如何在运行脚本之前提交活动单元格中所做的更改? (Google 表格/Google Apps 脚本)

    我正在使用 Google Apps 脚本在 Google 表格中创建提交表单 该表单位于一页上 提交内容被移至第二个隐藏页面 当用户填写表单后 他们按下提交页面上的按钮以激活脚本 我遇到的问题是 当用户填写最后一个单元格然后单击按钮时 输入

随机推荐

  • 自定义字体不复制网站中很棒的字体

    我创建了一个自定义矢量字体 并尝试在一些很棒的字体不适合的地方使用它 然而 字体图标不像很棒的字体那样显示属性 CSS 似乎是准确的 但我不知道是什么导致了这个问题 下面您将看到圈出的自定义图标 而其他图标则字体很棒 该图标不会像字体很棒的
  • 使用 scanf() 进行动态分配

    我的问题和这个完全一样one https stackoverflow com questions 2329909 dynamic string input using scanf 也就是说 我正在尝试使用scanf 接收一个不确定长度的字符
  • 如何解决这个问题签名无效,或者不是用Apple提交证书签名的。 (-19011)

    我在构建临时分发配置文件时遇到了此错误 应用程序未通过协同设计验证 签名无效 或者不是用Apple提交证书签名的 19011 我遵循了苹果开发者计划中提到的相同流程 证书 配置文件和权利 所有东西都是有效的 那么问题出在哪里呢 我已经解决了
  • 如何全局检测点击(触摸输入)而不是鼠标点击?

    我想制作一个当用户触摸屏幕时自动显示的应用程序 它不应该适用于点击 我查找了 Windows 7 8 中的触摸处理程序 但我看到每个触摸窗口都必须用RegisterTouchWindow注册 TL DR 有没有办法获得窗口外的触摸点位置 全
  • 配置 Google Cloud Load Balancer 路径规则

    我正在尝试配置 Google Cloud 负载均衡器以执行以下操作 我有一个网站在 VM 实例中的 Wordpress 计算机上运行 我希望用户在进入时可以访问该网站outairnet com 我有一个单独的 html 文件 我希望用户在访
  • 随着时间的推移缩放游戏对象

    我统一制作了一个测试游戏 当我单击按钮时 它会生成一个从工厂类创建的圆柱体 我试图做到这一点 以便当我创建圆柱体时 它的高度会在接下来的 20 秒内缩小 我发现的一些方法很难转化为我正在做的事情 如果您能引导我走向正确的方向 我将非常感激
  • 如何在模式打开时禁用正文滚动(仅限 IOS)

    仅限 IOS iPhone X iPhone 7 等 甚至 jquery 模态库也不起作用 https jquerymodal com https jquerymodal com 在 iPhone 上打开模态框 您将能够滚动正文 我发现很难
  • Beaker 中数据库和 sql 后端的区别?

    看起来像Beaker http beaker groovie org 支持两种数据库后端 ext database 和 ext sqla 但是它们之间有什么区别呢 Overview 查看源代码 Beaker 1 6 4 py2 7 egg
  • 显示编码的电子邮件主题

    我正在使用发送邮件消息向我们的支持系统发送电子邮件 但是当它发送电子邮件时 它会显示主题行 如下屏幕所示 us ascii Q R899076 Aman 系统摘要 在主题中我使用变量 vUserName Get Item env usern
  • 使用 SparkSQL 删除 MySQL 表

    我知道我们可以通过以下命令从 SparkSQL 查询或创建 Mysql 表 val data sqlContext read jdbc urlstring tablename properties data write format com
  • 更改 UISwitch 应用程序的颜色

    我在用UISwitch在 iOS 3 中在我的应用程序中创建一个开关元素 它的默认颜色设置为蓝色 但我想将其颜色更改为棕色 我怎样才能为它选择不同的颜色UISwitchiOS 3 中的元素 我怎样才能为它选择不同的颜色UISwitch现代
  • 忽略 Oracle DUP_VAL_ON_INDEX 异常有多糟糕?

    我有一个表 用于记录用户是否至少查看过一个对象一次 因此 HasViewed ObjectID number FK to Object table UserId number FK to Users table 两个字段都不为 NULL 并
  • WCF客户端:第一次调用失败,第二次调用成功

    我有一个 REST Web 服务 它使用 WCF 客户端调用外部 SOAP Web 服务 此 REST Web 服务托管在我们测试环境中的 IIS 中 当调用 REST Web 服务 然后调用外部 Web 服务 使用 WCF 客户端 时 在
  • 当按钮位于 UITableViewCell 上时,为什么 UIButton shownTouchWhenHighlighted 不起作用?

    I put a UIButton on a UITableViewCell并设置其showsTouchWhenHighlighted财产给YES 单元格的选择风格是UITableViewCellSelectionStyleNone 我有一个
  • 使用重复列重塑数据

    我正在尝试使用重塑来重组我的数据集 这是我的数据的一个子集 它是一个 16 X 198 数据框 每个奇数列都是 16 年的列表 偶数列具有不同国家 地区的值 Algeria x Algeria y Argentina x Argentina
  • ggplot 中的等值线图,其中包含有孔的多边形

    我正在尝试绘制德国的分区统计图 显示各州的贫困率 灵感来自这个问题 https stackoverflow com questions 21651985 shapefile to produce a linked micromap in r
  • Spring:我希望为 Web 应用程序创建一个 junit 测试 - 需要 WebApplicationContext

    我正在编写一个 junit 测试 以便 令人惊讶地 独立测试我的应用程序的一部分 问题是我在单元测试中调用的构造函数中执行以下行 WebApplicationContext webApplicationContext ContextLoad
  • 如何在 SELECT 语句的 WHERE 子句中传递 php 变量?

    我有一个 php 变量 我想在我的数据库中使用此变量获取数据库中的另一个字段where clause My code require conn php module POST postmodule query SELECT width FR
  • 使用 scipy 计算两个正态分布的重叠概率

    我有两条 scipy stats norm mean std pdf 0 正态分布曲线 我试图找出两条曲线的差异 重叠 我如何在Python中使用scipy计算它 谢谢 开始Python 3 8 标准库提供了NormalDist https
  • 如何在鼠标悬停在栏上时显示标签

    我用 Chartist js 制作了一个条形图 现在我想在栏上添加一些监听事件 如何让鼠标悬停在栏上时显示标签 您有 2 个选择 Option 1 您可以使用一个工具提示插件 你可以在这里找到它 https github com Globe