2017-02-27 4 views
0

polar-chartChart.JS - 極地エリア - 伝説のホバースタイルと余裕

こんにちはすべて、

うまくいけば、これは簡単なものです。私はonclickイベントで凡例を設定しましたが、ラベル上にカーソルを置くと、マウスカーソルが "ポインタ"に変わります(上記のチャートスクリーンショットを参照)。現在、マウスカーソルを置いたときにマウスカーソルが変わらないので、ラベルがリンクであることを伝えるのは難しいです。

また、凡例とグラフ(凡例の下のスペース)の間に余白/パディングを追加する方法もあります。

多くの感謝!

答えて

2

legend onHover config option(ポインタスタイルをpointerに変更)とcustom tooltips config option(ポインタスタイルをdefaultに戻す)の組み合わせを使用して、目的の動作を実現できます。

ここに、実際の解決策を示す設定例があります。 jQueryを使用しているかどうかはわかりませんでしたので、使用しないことにしました。それに応じて自由に変更してください。

options: { 
    legend: { 
    position: 'top', 
    labels: { 
     fontColor: 'rgb(255, 99, 132)' 
    }, 
    onHover: function(event, legendItem) { 
     document.getElementById("canvas").style.cursor = 'pointer'; 
    } 
    }, 
    tooltips: { 
    custom: function(tooltip) { 
     if (!tooltip.opacity) { 
     document.getElementById("canvas").style.cursor = 'default'; 
     return; 
     } 
    } 
    } 
} 
+0

すごい!完璧に動作します...あなたはまた、私がどのようにグラフと伝説の間にスペース(パディング/マージン)を得ることができるか知っていますか? – HDhani

+0

残念ながら、自動生成された凡例とグラフの間にスペースを追加する方法はありません。もちろん、凡例の配置を変更することはできますが、実際に配置された場所やスペースの大きさを制御したい場合は、 '.generateLegend()'プロトタイプメソッドを使用してカスタム凡例を表示する必要があります。検索には、これがどのように行われているかを示すたくさんの質問があります。 – jordanwillis

+0

こんにちは、別の時に戻ってくるかもしれません。ご協力いただきありがとうございます! – HDhani

0

私のツールチップが常に表示されているため、受け入れられた回答が機能しませんでした(position: "nearest")。だから私は、カーソルのスタイルを変更し、元に戻すタイムアウトを使用します。

onHover: function(event, legendItem) { 
    document.getElementById("canvas").style.cursor = "pointer"; 
    clearTimeout(hoverTimeout); // global var 
    hoverTimeout = setTimeout(function() { 
     document.getElementById("canvas").style.cursor = "default"; 
    }, 100); 
} 

それは汚いトリックですが、それは動作します。