web-dev-qa-db-ja.com

Chart.js-ホバーですべてを無効にする方法

チャートにホバー効果、ホバーオプション、（ホバー）リンクなどがないようにコードを設定するにはどうすればよいですか？

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);
                };      
            });
javascriptjqueryhtmlchart.js
15
ggsplet

あなたが試すことができます

 showTooltips: false

次のリンクを使用することもできます

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

3
Sanyami Vaidya

すべてのホバースタイル/ツールチップを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: []
  }
  ...
})

「[clicks」、「hover」などの代わりに）「events」オプションを空のリストにすると、イベントをリッスンしないため、チャートが「ブラインド」/静的になります。

92
Megan Word

別のオプションがあります：

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