Question

如何在图表上设置不会有悬停效果，悬停选项，（悬停）链接等的代码？

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

Answer 1

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

将'events'选项设为空列表（而不是['click'，'hover'等]）使图表'盲'/静态，因为它将监听没有事件。

Answer 2

你可以尝试

 showTooltips: false

您还可以使用以下链接

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

Answer 3

截至2020年

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

Answer 4

还有另一种选择：

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

Answer 5

您可以尝试以下操作：

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

Answer 6

就用

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

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

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

Answer 7

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

（取自Highcharts文档的模板）。

希望有所帮助：）

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

7 个答案: