jquery Chart.js -如何禁用悬停时的所有功能

56lgkhnf  于 2023-01-04  发布在  jQuery
关注(0)|答案(8)|浏览(190)

我如何设置代码,将没有悬停效果,悬停选项,(悬停)链接等图表?
我使用chart.js。下面是我的代码,我在那里设置饼图。
超文本标记语言..

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

...还有...

$(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);
                };      
            });
8ljdwjyq

8ljdwjyq1#

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

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

Chart.js正在监视画布上的所有mousemove事件,它在画布中示例化了您的图表。将悬停“mode”设置为null似乎覆盖了画布查找匹配元素以将激活的:hover类分配给这些元素的所有方式。
工具提示事件看起来是独立的,所以我不得不使用这两行来使图表有效地保持静态。
请注意,初始动画仍然适用于具有这些选项的图表。
更新:最新的Chart.js已经重新捆绑了悬停被“监听”的方式:

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

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

2exbekwf

2exbekwf2#

你可以试试

showTooltips: false

您还可以使用以下链接
http://jsfiddle.net/TZq6q/298/

mctunoxg

mctunoxg3#

还有一个选择

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

rryofs0p4#

刚刚使用

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

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

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

tvokkenx5#

截至2020年

只需在选项对象中输入tooltips: false

jk9hmnmh

jk9hmnmh6#

您可以尝试以下操作:

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

rkue9o1l7#

在我的情况下,我需要禁用只有胡佛背景颜色的变化,保持工具提示

options: {
    hover: {mode: null},
}

如果你不需要工具提示你可以选择这个选项

options: {
    tooltips: {enabled: false},
    hover: {mode: null},
}
guicsvcw

guicsvcw8#

如果您想要防止鼠标悬停在任何系列上时产生任何影响,则应禁用tooltiphover状态。您可以这样做:

$(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文件)。
希望有帮助:)

相关问题