热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《Chart.js-如何在悬停时禁用所有内容》经验,为你挑选了2个好方法。

如何在图表上设置不会有悬停效果,悬停选项,(悬停)链接等的代码?

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

HTML ..

..和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);
                };      
            });

Megan Word.. 101

为了从vanilla chart.js中删除所有悬停样式/工具提示:

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

Chart.js正在观看画布上已实例化图表的所有mousemove事件.将hover'mode'设置为null似乎会覆盖画布查找匹配元素以指定激活:hover类的所有方式.

工具提示事件看起来是分开的,所以我不得不使用这两行来使图表有效地保持静态.

请注意,初始动画仍然可以在带有这些选项的图表上使用.

更新:最新的Chart.js已重新捆绑悬停被"收听"的方式:

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

使'events'选项成为一个空列表(而不是['click','hover'等])使图表'盲'/静态,因为它将监听没有事件.



1> Megan Word..:

为了从vanilla chart.js中删除所有悬停样式/工具提示:

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

Chart.js正在观看画布上已实例化图表的所有mousemove事件.将hover'mode'设置为null似乎会覆盖画布查找匹配元素以指定激活:hover类的所有方式.

工具提示事件看起来是分开的,所以我不得不使用这两行来使图表有效地保持静态.

请注意,初始动画仍然可以在带有这些选项的图表上使用.

更新:最新的Chart.js已重新捆绑悬停被"收听"的方式:

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

使'events'选项成为一个空列表(而不是['click','hover'等])使图表'盲'/静态,因为它将监听没有事件.


嗯,这就是我需要的。chart.js是一个完美的例子,说明文档可以做到相当透彻且仍然很糟糕

2> 小智..:

你可以试试

 showTooltips: false

您也可以使用以下链接

http://jsfiddle.net/TZq6q/298/


推荐阅读
author-avatar
mobiledu2502871947
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有