魚群探知レーダーのようなグラフの描写

Question

添付の画像のようなグラフをjavascriptで描写したいです。
実現可能なライブラリをご存じの方がいれば教えてください。

やりたいことは以下のとおりです。
chartjsの散布図で実現できないか調べていたのですがわかりませんでした。
画像では円の周りに数字がありますがそれらは不要です。

・縦軸、横軸とも0の値は真ん中にある（縦軸、横軸がちょうど真ん中で交差する）
・縦軸、横軸ともにメモリの幅は同じで最大値も同じである
・基準となる値が円で囲まれている（基準値を3とすると横軸、縦軸が3のところを結んだ円ができる）
・データを点で表示

よろしくお願いします。

Answer 1

svgで書けば良いと思います

Comments

[yambejp]

<svg>
<rect width="100" height="100" fill="black" stroke="lime" />
<polyline stroke="lime" points="
10,0 10,100 30,100 30,0 50,0 50,100 70,100 70,0 90,0 90,100 100,100
100,10 0,10 0,30 100,30 100,50 0,50 0,70 100,70 100,90 0,90
" />
<circle cx="50" cy="50" r="45" stroke="lime" fill="none" />
</svg>

[yambejp]

あと必要な項目があれば指示ください

[yotaro-58]

回答いただきありがとうございます。
ご連絡いただいたものは円が1つですが、もう1つ小さい円を表示することも可能でしょうか？
また、円の色も変えられますか？

それと散布図のようにデータをグラフ中で点で表現したいです。
（質問で添付している画像の左上の部分のように）

ご確認よろしくお願いします。

[yambejp]

ざっくりこんな感じ
<svg>
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<rect width="100" height="100" fill="black" stroke="lime" />
<polyline stroke="lime" points="
10,0 10,100 30,100 30,0 50,0 50,100 70,100 70,0 90,0 90,100 100,100
100,10 0,10 0,30 100,30 100,50 0,50 0,70 100,70 100,90 0,90
" />
<circle cx="50" cy="50" r="45" stroke="aqua" stroke-width="2" fill="none" />
<circle cx="50" cy="50" r="40" stroke="lime" stroke-width="0.5" fill="none" />
<circle cx="50" cy="50" r="30" stroke="lime" stroke-width="0.5" fill="none" />
<circle cx="50" cy="50" r="20" stroke="lime" stroke-width="0.5" fill="none" />
<circle cx="50" cy="50" r="10" stroke="lime" stroke-width="0.5" fill="none" />
<circle cx="20" cy="20" r="3" fill="red" filter="url(#blurMe)" />
<circle cx="23" cy="35" r="4" fill="red" filter="url(#blurMe)" />
<circle cx="30" cy="25" r="5" fill="red" filter="url(#blurMe)" />
</svg>

[yambejp]

jsでコントロールは可能です

[yotaro-58]

ありがとうございます。完璧です。
最後にもう1点いいでしょうか？
グラフの背景に画像を指定することもできますか？

[yambejp]

いまrectでダミー背景をおいているのを<image>タグなど使えば可能です
調べてみてください

[yambejp]

<svg>
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<image xlink:href="http://placeimg.com/100/100/any" x=0 y=0 />
<rect width="100" height="100" fill="none" stroke="lime" />

<polyline stroke="lime" points="
10,0 10,100 30,100 30,0 50,0 50,100 70,100 70,0 90,0 90,100 100,100
100,10 0,10 0,30 100,30 100,50 0,50 0,70 100,70 100,90 0,90
" fill="none" />
<circle cx="50" cy="50" r="45" stroke="aqua" stroke-width="2" fill="none" />
<circle cx="50" cy="50" r="40" stroke="lime" stroke-width="0.5" fill="none" />
<circle cx="50" cy="50" r="30" stroke="lime" stroke-width="0.5" fill="none" />
<circle cx="50" cy="50" r="20" stroke="lime" stroke-width="0.5" fill="none" />
<circle cx="50" cy="50" r="10" stroke="lime" stroke-width="0.5" fill="none" />
<circle cx="20" cy="20" r="3" fill="red" filter="url(#blurMe)" />
<circle cx="23" cy="35" r="4" fill="red" filter="url(#blurMe)" />
<circle cx="30" cy="25" r="5" fill="red" filter="url(#blurMe)" />
</svg>

[yotaro-58]

ありがとうございます。
縦軸、横軸のメモリに一定間隔で数字を入れることも可能でしょうか？

[yambejp]

できると思いますが、イメージがわかりません
手書きでいいので画像を図示してください

[yotaro-58]

質問に参考画像を追加しました。
画像の縦軸・横軸にある50、100、150のように一定間隔で数字を入れていきたいです。

[yambejp]

ソースもながくなってきたのでcodepenに

https://codepen.io/yambejp/pen/XWKxjPX

[yotaro-58]

ありがとうございました。