レスポンシブモバイルビューの折れ線グラフを改善する

Question

チャート、特にモバイルデバイスで表示される折れ線グラフのベストプラクティスを探してみましたが、情報があまりないようです。これは、モバイルデバイスに表示されるグラフを含む私の最初のプロジェクトです。デスクトップ版とモバイル版のプロトタイプを作成しました。可能であれば、モバイル版を改善するためのフィードバックをお願いします。

下のグラフはデスクトップとタブレット用です。ユーザーはすぐにアクセスできるため、この画面にはかなりの数の操作があります

1. さまざまな指標（グラフタイトルの下のタブ）

2. 異なる期間（グラフの下のタブ）

   プロットされるドットの数は異なる場合があります。一部のグラフには、大量のデータが含まれる場合があります。

以下は、モバイルバージョンのプロトタイプソリューションです：

1. グラフの高さを維持し、グラフのx軸に合うようにグラフの幅を調整します

2. ドットが互いに圧迫されないように、グラフをX軸上でスクロール可能にします。

3. それに応じてサイズを縮小してください（これは解決策としては機能しないので、ここに出て考えを聞いてください）。

Answer 1

あなたが近づいている方法は私には正しいようです。

1. 高さを100％に維持し、幅を適応させます
2. 幅をスクロール可能にする

画面で使用されていないオプションをいくつか削除して、必要なオプションを維持しながら画面をきれいにしておくことをお勧めします。ドロップダウンリストが正しく機能する場合があります。

スクロールバーは、何らかの方法で週のインジケーターと混同する可能性があります。ボタン（左/右）が狭すぎます。ボタンを削除するか、幅を広くした方がよいでしょう。