web-dev-qa-db-ja.com

ドラッグ機能を視覚的に表現する方法はありますか？

このデータ視覚化グラフ で、ユーザーに理解するグラフをinteractiveにしたいと考えました。

誰かが任意のポイントをクリックしてドラッグすると、選択範囲が拡大します。これは、データのドリルダウンに役立ちます。ただし、グラフを表示しても、それがinteractiveであることはわかりません。

次のようなラベルを表示できます。

ポイントをドラッグして選択を拡大します

train userにすることもできます-これは高価になります。

しかし、ドラッグ機能を表すvisual方法はありますか？

info-visualisationchartsaffordance
13
xameeramir

カーソルがグラフ領域に入ったら、その記号を「移動カーソル」に変更します。

enter image description here

EDIT：

別の解決策は、マウスがグラフ領域に入ったときにこのアイコンを使用することです。

enter image description here

ユーザーがグラフ領域をクリックすると、このアイコン：

enter image description here

11
DesignerAnalyst

scrollbar または preview chart を追加して、ユーザーがズームイン/ズームアウトしてグラフを操作できることを明確に示すことができます。これにより、説明文が不要になります。次のデモをご覧ください。

スクロールバーまたはプレビューハンドルに加えて、ユーザーは引き続きクリックしてドラッグし、グラフの領域を拡大できます。また、コンテキストメニュー（右クリックしてアクセス）を使用してズームインまたはズームアウトすることもできます。

Stock and Volume Chart with Interactive Zooming and Scrolling

ここでスクロールバーのデモを操作してください： http://demos.zingchart.com/view/0QLBB477

Candlestick Chart with Interactive Zooming and Preview

ここでプレビューチャートのデモを操作します： http://demos.zingchart.com/view/VH9JD4AI

これ ズーム、スクロールバー、プレビューチャートチュートリアル は、詳細と例を提供します。

情報開示：私はZingChartチームのメンバーです。他にご不明な点がありましたらお知らせください。

13
Elizabeth

さて、まず、このvizで遊んでみると、ドラッグ操作で何が起こっているのかを正確に理解することは困難です。 X軸の新しい範囲を選択していますか？左右にスクロールしていますか？それは単にx軸のスケールを拡大または縮小するだけですか？

現在、それとやり取りしても正確に何が起こっているのかは非常に不明確です。それが理解できたら、チャートのインタラクティブなプロパティを示すために何ができるかを理解する方が簡単かもしれません

3
shilp

グラフの下にテキストを追加し、期間の左端と右端に矢印を追加するだけです。

下記参照：

enter image description here

3
Kristiyan Lukanov

slider

マウスボタンを押したまま、グラフとスライダーをスライドするとズームツールバーが表示されます。

3
Aswin

この例 に示すように、ズームとパンのような機能を使用することもできます。

2
Vladimir Georgiev

@Elizabethのオプションに同意します（Axesを展開およびスクロール可能にします）。コメントでは画像を使用できないため、回答を使用して別の例を含めます。Blender3dの「グラフエディター」です。 （blender3d.org）これは、3Dオブジェクトの座標（またはその他のプロパティ）を経時的に変更するために使用されます。

enter image description here

1
Ideogram