Chart.js 上的悬停模式

2024-02-29

当您未将鼠标悬停在折线图中的特定“点”上时,是否可以激活悬停?

I want that每当我将鼠标悬停在图表的任何部分上时就会激活特定的工具提示。

Edit:像这样的东西http://watchstocks.herokuapp.com/ http://watchstocks.herokuapp.com/


是的,您可以使用 Chart.js 配置工具提示以获得与您引用的图表类似的行为。

欲了解更多信息,请查看mode http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration工具提示配置选项和hover http://www.chartjs.org/docs/#chart-configuration-hover-configuration满足您需求的配置选项。这是一个例子。

options: {
  responsive: true,
  title:{
    display:true,
    text:'Chart.js Line Chart'
  },
  tooltips: {
    mode: 'index',
    intersect: false,
  },
 hover: {
    mode: 'nearest',
    intersect: true
  },
  scales: {
    xAxes: [{
      display: true,
      scaleLabel: {
        display: true,
        labelString: 'Month'
      }
    }],
    yAxes: [{
      display: true,
      scaleLabel: {
        display: true,
      },
    }]
  }
}

这里有一个代码笔示例 http://codepen.io/jordanwillis/pen/ZeaLGj展示与您的示例相匹配的行为。

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

Chart.js 上的悬停模式 的相关文章

  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • 使用本地存储在从另一个表保存的 HTML TABLE 中打印 JSON,以便我在另一个页面上打印我的表

    在我的作业中 我必须使用用户输入中的数据并将数据保存在本地存储中 我必须以水平表格式将这些数据从本地存储打印到其他页面 为此 我编写了用于用户输入并将数据保存在本地存储中的代码 div p p div
  • Jquery 悬停卡

    我在用着http designwithpc com Plugins Hovercard http designwithpc com Plugins Hovercard 但我不知道如何在悬停卡上声明 var 每个工作描述都有自己的 ID 当悬
  • 在版本 4.4.6 中禁用 ckeditor 上下文菜单

    我在 Rails4 项目中使用 ckeditor 我尝试了 ckeditor gem 和 ckeditor rails gem 来提供 ckeditor 库 这里有多个帖子 人们希望删除 ckeditor 上下文菜单 以便可以显示本机浏览器
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 通过 JavaScript 获取表单名称

    我有一个简单的问题 但我在网上找不到好的解决方案 我有这个 HTML 代码
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 为什么 setTimeout 在 Chrome 中触发两次,而在 IE 或 Firefox 中则不然?

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作?

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • Highcharts jQuery 渲染问题 - 所有浏览器

    我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时 在您调整浏览器大小之前 不会显示列无论如何 导致图表重绘 我认为 图表的其余部分显示 轴 标题等 但不显示列本身 我在 I
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • AVCaptureVideoDataOutput 和设置 kCVPixelBufferWidthKey & kCVPixelBufferHeightKey

    我正在尝试捕获特定尺寸的帧AVCaptureVideoDataOutput通过设置kCVPixelBufferWidthKey kCVPixelBufferHeightKey 问题是缓冲区的宽度和高度永远不会改变 它们总是会回来852x64
  • 如何修复 Google-cloud-sdk 156.0.0“您的应用程序中的文件太多,无法监控所有文件的更改。”?

    我刚刚在 osX 上安装了 Go 1 6 4 和 google cloud sdk 1 56 0 0 当我尝试运行本地 dev server 时 我收到以下警告 Users Bryan go src google cloud sdk pla
  • 使用 lxml 解析包含默认命名空间的 xml 以获取元素值

    我有一个像这样的 xml 字符串 str1
  • 是否存在具有低级前置操作的文件系统?

    在最低级别 大多数操作系统文件操作包括打开 关闭 读取 写入 删除以及查找和追加操作 但没有前置操作 出现这个问题是因为我的一位同事正在处理他生成的大型 数千兆字节 数据日志 他意识到他没有将文件头写入日志文件 尽管他只需要在文件的前面添加
  • WPF - 从 StackPanel 中删除“用户控件”子项

    我正在尝试制作一个 WPF UI 用户可以在其中编辑查询来搜索数据库 查询是根据消费者从组合框中选择的内容创建的像这样 https i stack imgur com 5ih0p png他可以创建任意数量的过滤器 只要他点击添加新条件按钮
  • 在 C 中匹配(一些)字符串的最有效方法?

    我们的系统需要接受来自终端的用户输入 并与一些已知的关键字字符串 可能是 10 个 进行匹配 我们没有空间 计算机来执行正则表达式等 代码需要小而快 现在 最糟糕的方法是 str is null terminated assume we k
  • 如何在 Ruby 中访问原始命令行参数字符串?

    我正在尝试访问 Ruby 中的原始命令行参数字符串 即 不使用预分割 分隔的 ARGV 数组 有谁知道如何做到这一点 例如 gt ruby test rb command line arguments 我希望能够判断 line 周围是否有引
  • oauth2Client.getToken 缺少刷新令牌

    我有一个小型快递服务器 有两条路线 然后它将 json 令牌写入文件 我知道非常不安全 由于某种原因没有refresh token 在文档中有一条评论offline for access type gets refresh token 已经
  • 在 Maven 构建期间将文件添加到 jar

    我试图在执行 Maven 构建时将许可证文件添加到我的所有 jar 中 我有每个类文件的许可证 但我希望将 License txt 添加到每个 jar 中的每个 META INF 文件夹 我的项目有一个主 pom 其中有六个模块 然后这些模
  • 发送相机意图后立即调用 onActivityResult

    我正在使用相机意图在我的应用程序中启动相机 但是一旦意图被触发onActivityResult被解雇了 我什至还没有拍照 当我拍照时 选择它并返回到我的活动onActivityResult根本没有被叫到 这是我启动相机的方法 Package
  • 使用 Visual Studio 构建伪语言 (qps-ploc) 附属程序集

    我已经生成了应用程序资源文件的伪本地化版本 例如Order Summary and Payment本地化为 O r d e r S u m m a r y a n d P a y m e n t 以便我们可以在获得实际翻译之前测试本地化错误
  • 如何在Reactjs中点击按钮重定向到另一个页面

    我想使用 React 创建一个基本的 Web 应用程序 我已经实现了创建按钮 我想在单击按钮时重定向到另一个页面 下面是我的 App js 代码 import React from react import logo from logo s
  • 在Python中使用PIL压缩PNG图像

    我有一个用 Selenium Builder 记录的 python 脚本 它使用以下命令获取网页的完整浏览器屏幕截图 fileName Screenshot1 png webDriverInstance save screenshot fi
  • 如何将 WooComerceAPI 集成到 React 中?

    我想通过 API 在 React 上接收数据到我的网站 我按照文档中所述执行了所有操作 执行了安装npm install save woocommerce api 使用文档中的参数创建对象http woocommerce github io
  • 无法验证包:727047181.itmsp

    我在存档文件后在应用程序商店中上传了构建版本 它将在我收到此错误时上传构建版本 1 Apple的Web服务操作不成功 2 无法验证包 727047181 itmsp 3 错误 ITMS 9000 无法更改捆绑包标识符的当前值 ue com
  • 使用 PHP 从 Google Chrome 书签导出中提取数据

    我想将我的 google chrome 书签放入数据库 所以我的第一步是使用 PHP 从 chrome 导出 html 文件并将数据放入变量中 我希望获得一些能够运行的 PHP 代码下面的数据 它会将 URL ADD DATE ICON 和
  • 无法通过管道以自定义方式重命名下载的图像

    我使用 python 的 scrapy 模块创建了一个脚本 从 torrent 站点下载并重命名电影图像 并将它们存储在 scrapy 项目内的文件夹中 当我按原样运行脚本时 我发现它正确地下载了该文件夹中的图像 此时 脚本正在使用 req
  • javascript从所选国家/地区值中选择城市

    我有来自这里的国家数据库http www webmasterworld com html 3018309 htm http www webmasterworld com html 3018309 htm有239个国家 每个国家都有价值 在选
  • 这个指针类型防水吗?

    我正在尝试设计一种自定义类型 可以在需要窗口句柄或其他类型指针的 API 中使用 并且适用于 VBA 可以运行的所有系统 这是我所得到的 If Win64 1 And VBA7 0 Then Public Type LongLong 64
  • Chart.js 上的悬停模式

    当您未将鼠标悬停在折线图中的特定 点 上时 是否可以激活悬停 I want that每当我将鼠标悬停在图表的任何部分上时就会激活特定的工具提示 Edit 像这样的东西http watchstocks herokuapp com http w