詳しい人求む！

html js 横軸の長いチャート

解決済

質問者：kmtkhs
質問日時：2021/05/18 12:42
回答数：1件

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

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

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

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2021/05/18 16:41

こんにちは

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

簡単に言えば、固定の枠（親要素）の中にチャートを表示しておいて、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>