SVG でグラフを描く
SVG サンプル (2023/11)
こちらは見た目のイメージだけのサンプルです。
実際は JavaScript で SVG 要素を作ります。
棒グラフのサンプル。
散布図のサンプル。
座標変換
グラフ座標とスクリーン (SVG) 座標を変換する話です。 canvas の例で説明しています。
サンプル (2021)
- TestJS_svg_graph01.html
JavaScript でグラフの SVG を作る。軸や目盛りの表示。 - TestJS_mouse_svg_drag_resize01.html
マウスイベント処理。Graph のサブクラスで行う例。
マウスドラッグでグラフを表示する範囲を変える。 マウスホイールで拡大縮小表示する。 グラフ・スクリーンの座標変換で設定する。
JavaScript マウスイベント処理
タッチイベントでグラフを移動する処理を追加。
JavaScript タッチイベント処理
目盛りの自動調整