Chart.js - 如何禁用悬停时的所有内容

2024-04-16

如何设置代码使图表上没有悬停效果、悬停选项、(悬停)链接等?

我正在使用 Chart.js。下面是我的代码,我在其中设置饼图。

Html..

<div id="canvas-holder" style="width:90%;">
    <canvas id="chart-area" />
</div>

..还有js...

$(document).ready(function () {


                var config = {
                    type: 'pie',
                    data: {
                        datasets: [{
                            data: [60,20],
                            backgroundColor: [
                                "#ddd",
                                "#58AC1C"
                            ],

                            label: 'Dataset 1'
                        }],
                        labels: [
                            "Bla1 ",
                            "Bla2 "+
                        ]   
                    },
                    options: {
                        responsive: true
                    }
                };


                window.onload = function() {
                    var ctx = document.getElementById("chart-area").getContext("2d");
                    window.myPie = new Chart(ctx, config);
                };      
            });

为了删除所有悬停styles/tooltips来自普通的 Chart.js:

var myChart = new Chart(canvas, {
    options: {
        tooltips: {enabled: false},
        hover: {mode: null},
    }
    ...
});

Chart.js 正在观察一切mousemove画布上的事件,其中实例化了您的图表。将悬停“模式”设置为 null 似乎会覆盖画布查找匹配元素以分配激活的所有方式:hover类至.

工具提示事件似乎是独立的,因此我必须使用这两行来使图表有效地静态。

请注意,具有这些选项的图表上的初始动画仍然有效。

更新:最新的 Chart.js 重新捆绑了“监听”悬停的方式:

var myChart = new Chart(canvas, {
    options: {
        events: []
    }
    ...
});

将“事件”选项设置为空列表(而不是['click', 'hover', etc])制作图表blind'/static因为它不会监听任何事件。

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

Chart.js - 如何禁用悬停时的所有内容 的相关文章

  • React-Redux:state.setIn() 和 state.set() 有什么区别?

    我见过使用setIn and set 在一些react redux代码中 state setIn state set 我在这里找到了一些文档https facebook github io immutable js https facebo
  • 设置 cookie 时中断 JavaScript 执行

    当设置 cookie 时 是否可以始终中断浏览器开发人员工具中的 javascript 执行 无需显式设置 JS 断点 document cookie 在 html head 块的开头添加此代码片段效果很好
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • Javascript - 水波纹效果

    我需要 JS 上的脚本 它将以 水波纹 样式更改 images html 抱歉 6MB GIF 文件 http fcuunited ru temp listening2 gif http fcunited ru temp listening
  • 带参数的事件监听器

    我想将参数传递给 JavaScript 中的事件侦听器 我已经找到了解决方案 但我无法理解它们为什么或如何工作以及为什么其他解决方案不起作用 我有 C C 背景 但是 Javascript 函数的执行有很大不同 您能否帮助我理解以下示例如何
  • 用于交互式图形绘制的轻量级 JavaScript 库? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有兴趣了解用于绘制交互式图表的最轻量级 javascript 库 我掌握的数据主要是与海洋研究相关的科学数据 我知道一些 jquery
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • 循环内的异步性

    我正在使用 jQuery getJSON 用于从一组实用程序的给定 URL 检索数据的 API 我真的很想找到一种为每个实用程序重用代码 完全相同 的方法 由于循环的执行与 ajax 调用无关 因此我无法找到保留循环值的方法 我知道这个描述
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • '\r':找不到命令[重复]

    这个问题在这里已经有答案了 echo Select your option echo 1 Change ip address echo 2 Add route echo 3 Reboot echo 4 Exit read A case A
  • 如何:使用 MvcContrib.Pagination 而不使用 MvcContrib.Grid 视图

    这最初是一个问题 但随着我做了一些实验 变成了一个解决方案 所以我想我会和大家分享这个 我的问题是 如何在不使用 MvcContrib Grid View 的情况下使用 MvcContrib Pagination 我的回答如下 我正在构建一
  • GIT hook -> Python -> Bash:如何读取用户输入?

    我正在 Python 3 5 中做一个 GIT 钩子 python 脚本调用 Bash 脚本 该脚本使用以下命令读取用户的输入read命令 bash 脚本本身可以工作 在直接调用 python 脚本时也可以 但是当 GIT 运行用 Pyth
  • 排除elasticsearch结果数据中的_id和_index字段

    如果简单地点击 api 每个文档中有 5 个字段 但我只想要这两个字段 user id 和 loc code 所以我在字段列表中提到 但它仍然返回一些不必要的数据 如 shards hits time out等 使用下面的查询在 chrom
  • 根据 TypeScript 中的参数值更改返回类型

    我有以下功能 function doThing shouldReturnObject boolean string object return shouldReturnObject hello world hello world 我希望返回
  • 在 SBT 中显示调试模式的时间戳?

    我的sbt更新很慢 我想看看详细情况 所以我有 sbt debug update gt sbtupdate log 问题是日志没有每一行的时间戳 如何启用它 据我所知 仅使用 SBT 选项是不可能的 然而这question https st
  • 在 Mac OS Catalina (10.15.7) 上安装 greenlet

    我想在我的 Mac OS Catalina 10 15 7 上运行基于 Python 的项目的本地副本 项目使用诗歌作为 Python 依赖项管理工具 在安装 python 依赖项时 它会在遵守 Greenlet 包时崩溃 我听说此类问题可
  • django admin list_filter“或”条件

    抱歉 如果这个问题之前已经被回答过 但我做了很多谷歌搜索但没有成功 我知道如何创建自定义list filter管理视图中的 s 例如子类化SimpleFilter 我真正想要的是一种方法 在管理列表视图上 检查 将它们组合在 OR 公式中的
  • 关闭 popoverview 后恢复第一响应者

    我在主视图控制器上有一个文本视图 我在视图控制器的导航栏上有一个栏按钮项目 当应用程序启动时 我执行以下操作 点击文本视图开始编辑并显示键盘 点击栏按钮以显示弹出视图 在不关闭弹出窗口视图的情况下 我关闭了键盘 通过点击屏幕上的任何其他视图
  • 更改 Windows.Ribbon 背景颜色

    我正在与System Windows Ribbon在我的项目中 我还使用其他一些库 例如AvalonDocking 我想做的是在应用程序中创建自己的主题 以便用户可以选择喜欢的主题 问题是我不明白RibbonTab更改为正确的颜色 当我更改
  • libdmtx 死了吗,建议替换吗?

    我一直在使用libdmtx http www libdmtx org在一个项目中并希望更新到较新的版本 但该项目似乎已经一年多没有更新了 最后一次更新 版本是 2011 年 6 月 Git 存储库 http libdmtx git sour
  • Safari 中的文本阴影被切断/不渲染超出元素边框

    正如标题所说 我有一个文本阴影 其中包含以下内容 body background white h1 color black text shadow 100px 100px 10px black In the Safari browser t
  • Selenium Python:没有这样的文件或目录:“/usr/local/bin/chromedriver”,但它存在并添加到路径中

    尝试在 Docker Apline Linux 上运行 selenium python 并收到 消息 chromedriver 可执行文件需要位于 PATH 中 错误 因为它认为该文件不存在 但在其他答案中尝试了我能做的一切 但它仍然无法启
  • 在 forEach 中调用类函数:Javascript 如何处理“this”关键字

    我是 Javascript 新手 只是想确保我理解它如何处理this关键字 因为 嗯 看起来很混乱 我已经在 StackOverflow 上查看了类似的问题 并想确保我没有继续错误的想法 所以我定义一个像这样的类 并且想要处理构造函数中收到
  • 在 Google App Engine 中接收邮件

    我正在阅读有关的教程接收邮件 http code google com appengine docs python mail receivingmail html 我按照指示更新了 app yaml 文件 application hello
  • 在单个 Java 项目中运行测试突然开始无提示地失败

    我有一个项目 我已经工作了几周 没有出现任何问题 自从昨天早上开始工作以来 我根本没有进行任何更改 但是从昨天下午开始 在该项目中运行任何测试都会默默失败 I see or rather don t see the same thing r
  • 使用ajax请求显示进度条进度

    我想在 ajax 请求触发和完成时使用 jquery ui 进度条显示进度 问题是我不知道如何根据ajax请求的进度设置进度条的值 下面是一段代码 function ajaxnews newstabs a click function e
  • 在 AngularJS 的 ng-bind 中使用过滤器后添加更多文本

    所以我想在 ng bind 指令中通过过滤器放置一个变量 ng bind input filter 但我想插入更多文字 ng bind input filter more 但这不起作用 有没有办法在 ng bind 中添加更多文本 就像您简
  • CMake子目录依赖

    我对 CMake 很陌生 事实上 我正在通过 Kdevelop4 widh C 进行尝试 我习惯为我创建的每个命名空间创建子目录 即使所有源代码都必须编译并链接到单个可执行文件中 好吧 当我在 kdevelop 下创建一个目录时 它会使用
  • Chart.js - 如何禁用悬停时的所有内容

    如何设置代码使图表上没有悬停效果 悬停选项 悬停 链接等 我正在使用 Chart js 下面是我的代码 我在其中设置饼图 Html div style width 90 div