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

【问题标题】：Chart.js - how to disable everything on hoverChart.js - 如何禁用悬停时的所有内容
【发布时间】：2022-02-08 02:37:44
【问题描述】：

如何设置代码使图表上没有悬停效果、悬停选项、（悬停）链接等？

我正在使用 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);
                };      
            });

【问题讨论】：

您想禁用悬停效果或在悬停时禁用某些东西？
:hover 对 #chart-area{} 怎么样
我已尝试将此网站链接到移动应用程序。它打开正常，反应灵敏，一切都很好。问题是当“点击”屏幕上的任何地方时..然后页面重新加载（基本上它会打开另一个页面）..如果我用#canvas-holder删除div（所以图表不显示）一切都很好..其他文本显示正常，我可以点击任何我想要的地方，没有任何反应..

标签： javascript jquery html chart.js

【解决方案1】：

为了从 vanilla chart.js 中删除所有悬停 styles/tooltips：

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: []
    }
    ...
});

将“事件”选项设为空列表（而不是 ['click', 'hover', etc]）会使图表变为 blind'/static，因为它不会监听任何事件。

【讨论】：

@Pithikos 答案已更新以反映我认为的最新版本
啊，是的，这就是我所需要的。 chart.js 是一个完美的例子，说明文档如何相当彻底，但仍然很糟糕
哈哈谢谢！确实，如此出色的文档，但对于这些微不足道的信息，我不得不搜索 stackoverflow...
这是我在最新版本 2.9.3 的 chartjs 中使用的解决方案

【解决方案2】：

你可以试试

 showTooltips: false

您也可以使用以下链接

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

【讨论】：

我已经添加了这个，但它并没有解决我的问题。你放在小提琴中的例子很有用。我已经为我的数据和风格定制了它，我认为就是这样。我正在测试它，到目前为止它看起来我已经得到了我需要的东西。 Tnx！

【解决方案3】：

还有一个选择：

        states: {
            hover: {
                filter: {
                    type: 'none',
                }
            },
        },

【讨论】：

【解决方案4】：

随便用

options: {
        events: ["mousemove", "mouseout", "click", "touchstart", "touchmove", "touchend"],
       
    }

只需删除您要删除的其中一个。

options: {
        events: ["mouseout", "click", "touchstart", "touchmove", "touchend"],
       
    }

【讨论】：

【解决方案5】：

截至 2020 年

只需将tooltips: false 放入您的选项对象中

【讨论】：

【解决方案6】：

您可以尝试以下方法：

const options = {
    ...
    tooltips:{
      enabled:false
    },
    ...
}

【讨论】：

【解决方案7】：

如果您想要在将鼠标悬停在任何系列上时阻止任何效果，您应该禁用tooltip 和hover 状态。你可以这样做：

$(function () {

    Highcharts.chart('container', {
        plotOptions: {
        	series: {
            states: {
                      hover: {
                          enabled: false
                      }
                  }
          }
        },

        tooltip: {
            enabled: false
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

#reporting {
    position: absolute; 
    top: 55px; 
    right: 20px; 
    font: 12px Arial, Verdana; 
    color: #666;
    background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>

（模板取自 Highcharts 文档）。

希望对你有帮助:)

【讨论】：

这是Highcharts 示例。问题明确提到chartjs