🕌

Plotly.js polar charts 描き方サンプル

2021/06/28に公開

Plotly.jsのpoloar chartsを使った、極座標系で線グラフを描くサンプルです。
(検索してもあまり実例が見つからない気がした)

chart.jsだと、線グラフを描く方法が無いようだったので、Plotly.jsを選びました。
時系列の(theta,r)のデータ配列を2つ用意し、グラフを2本描画しています。

カスタマイズした主なオプション(data)

  • mode: グラフの種類。linesなら線、lines+markersなら線+点。
  • text: 各プロットデータの説明用文字列?(間違ってるかも)今回は、そのままhovertemplateに渡した。
  • hovertemplate: ホバーした時の表示文字列。

カスタマイズした主なオプション(layout)

  • ticksuffix: tick(目盛り)の末尾に付与する文字列。theta軸の目盛りに「度」をつけてる
  • range: r軸の範囲。必ずしも0.0~1.0である必要はなく、今回は0~100としている。100~0のように、正負の方向を逆にすることも可能。

参考

https://plotly.com/javascript/reference/layout/polar/

Discussion