web-dev-qa-db-ja.com

折れ線グラフのツールチップとの相互作用

ユーザーがグラフにカーソルを合わせるとツールチップが表示され、追加の情報が表示される折れ線グラフをデザインしています。私が現在使用しているものの実際の例を見ることができます here

ツールチップを操作するときに従うべきパターンに興味があります。特に、次のデザインの選択に興味があります。

  • ユーザーがマウスをツールチップの上に置くことができるかどうか。
  • ツールチップの垂直位置。現在、私はチャートの上半分の固定位置を使用しています。
  • たとえば、ユーザーがマウスでチャート領域を離れた後もツールチップを表示し続けるメカニズムが必要です。ユーザーがまだデータを見たい場合。

このための他の相互作用パラダイムも歓迎します。

ツールチップ付きのチャートのスクリーンショット: enter image description here

1

ここでのほとんどの質問に対する回答は、チャートの対象、チャートを使用しているユーザー、およびチャート(デバイス)の使用方法に応じて異なります。

ただし、最初の質問には論理的な答えがあります。ツールチップに実用的なコンテンツが含まれている場合、ユーザーはツールチップに確実にカーソルを合わせることができるはずです。たとえば、ユーザーがクリックできるリンクが含まれている場合、ユーザーはツールチップの上にマウスを移動できるようにする必要があります。

ツールチップの固定位置も、特定のユースケースによって異なります。ほとんどのグラフ作成ライブラリは、カーソルがある場所にツールチップを添付します。これは、データポイント間にわずかな違いがあるデータをグラフ化する場合に特に役立ちます。ツールチップの動きは、これらのわずかな違いをユーザーにわかりやすくするのに役立ちます。

ユーザーがチャート領域を離れた後もツールチップを表示したままにすることに関しては、チャートにも依存します。しかし、ツールチップが永遠に残るとしたら、それはその時点でのラベルではありませんか?それらを一時的に保持したい場合は、スティッキーツールチップを検討できます。以下は、それらがどのように機能するかのデモです(通常はタイムアウトを設定できます)。

http://www.zingchart.com/playground/run/540e3ad9a9fae

私はZingChartチームに所属しています。このデモの作成方法について質問がある場合は、遠慮なくお問い合わせください。

3
Merrily