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 - 如何禁用悬停时的所有内容 的相关文章

随机推荐

  • '\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