重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

詳しい人求む！

html js 横軸の長いチャート

解決済

  • 質問者：kmtkhs
  • 質問日時：
  • 回答数：1件

html,js 独学の初心者です。
htmlで横軸の長いチャートを作りたいと考えています。
縦軸は常に表示しながら横にスクロール移動出来るようなチャートを描くライブラリなどご存知でないでしょうか。

chartjsで複数軸グラフは描いたことがあるのですが、横軸が増えるとどんどん幅が小さくなってしまいます。


ライブラリがなければどうすれば実装できそうか、などアイデア頂ければ嬉しいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

参考程度に

No.1ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



ライブラリがあるかどうかは存じませんが、よく画像スライダーなどで使われている方法を応用すれば可能と思います。

簡単に言えば、固定の枠（親要素）の中にチャートを表示しておいて、overflow: hidden あるいは　scrollにしておいて、表示位置を移動すればよいということです。

簡単な仕組みの説明を作成してみましたので、ご参考にでもなれば。
以下の例で
・canvasクラスの要素は実際にはcanvas要素などにして、チャートの部分を表示します。
　（例では、簡略化のためdiv要素にしてあります）
・axisクラスの要素には縦軸部分を表示して、固定表示にします
・chartクラスの要素にはスクロールするチャートの部分を表示しておきます
　（要素の範囲がわかり易いように、仮に、別々の背景色をつけてあります）

※ 例では、overflow:scrollでブラウザのスクロールをそのまま利用していますが、外側の下に「＜ ＞」マークなどを表示してスクリプトでスクロールさせても良いかと。
※ それぞれ、縦軸とチャート部分をかき分けるのが面倒であるなら、まったく同じグラフを2つ作成しておいて、軸の部分（固定）とチャート部分（可動）を親要素のサイズでトリミングで表示を分けるようにしても宜しいと思います。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#graph { width:500px; height:300px; }
#graph > div { float: left; }
#graph .axsis { width:100px; height:100% }
#graph .chart {
width:400px; height:100%;
overflow: scroll hidden;
}

#graph .axsis .canvas {
width:100%; height: 100%;
background-color: yellow;
}
#graph .chart .canvas {
width:1000px; height: 100%;
background-color: aqua;
}
</style>
</head>
<body>

<div id="graph">
<div class="axsis">
<div class="canvas">こちらに縦軸だけ表示しておく</div>
</div>
<div class="chart">
<div class="canvas">こちらはスクロールするチャートの部分を表示しておきます。横長のチャートでもそのままスクロールするようにしておく。</div>
</div>
</div>
</body>
</html>
    • good
    • 2
    • 件
通報する
この回答へのお礼

ありがとう

ありがとうございます！
確かにその方法であれば実装できそうですね！
参考にして作ってみます！！

通報する
お礼日時：2021/05/19 13:37

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

今、見られている記事はコレ!

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報