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

Question

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

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

网页..

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

原文由 ggsplet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以试试

 showTooltips: false

您也可以使用以下链接

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

原文由 Sanyami Vaidya 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

 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 因为它将不监听任何事件。

原文由 Megan Word 发布，翻译遵循 CC BY-SA 4.0 许可协议