html,css,jsで数直線を作成する方法を教えてください。数直線を作成するフレームワークのようなものは見当たらず、自分で一から作るにしても、サンプルや作成例のようなものは見つかりませんでし

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

タイトルにすべて詰め込むのではなく(Yahoo知恵袋とは違います)、タイトルは要件をまとめたものを簡潔に書き、コードやエラーなど、やってみたこと試してみたこと、その結果を具体的に記載して何がどううまくいかないのか記載してください。 「質問するときのヒント」も熟読してください

[WeilSpinor]

はい、次回からそういたします。ありがとうございました

[m.ts10806]

質問は編集できるので適宜ご対応いただければと。解決は良いとして、後から見たときにこのままではわけわかりません

Answer 1

グラフィカルな処理が必要ならSVGかcanvasを利用すると良いでしょう

sample

<svg width="210" height="30">
<polyline points="
 10 30  10 20  10 30
 20 30  20 25  20 30
 30 30  30 25  30 30
 40 30  40 25  40 30
 50 30  50 25  50 30
 60 30  60 20  60 30
 70 30  70 25  70 30
 80 30  80 25  80 30
 90 30  90 25  90 30
100 30 100 25 100 30
110 30 110 20 110 30
120 30 120 25 120 30
130 30 130 25 130 30
140 30 140 25 140 30
150 30 150 25 150 30
160 30 160 20 160 30
170 30 170 25 170 30
180 30 180 25 180 30
190 30 190 25 190 30
200 30" stroke="black" fill="none"/>
<text x=  "5" y="15">0</text>
<text x= "55" y="15">5</text>
<text x="100" y="15">10</text>
<text x="150" y="15">15</text>
</svg>

Comments

[WeilSpinor]

ご回答ありがとうございました。やはりこうやって、オリジナルに地道に作るしかないのですね。参考にさせて頂きます。