Chart ツールは Canvas より SVG のほうがよさそう
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ Canvas は更新面で不利
◆ アニメーションとかマウスホバーの処理などで全体再描画になるので重い
◆ データ数が少ないとたいしたことないけど すごく多くのデータを扱うとかなら SVG が無難
◆ アニメーションとかマウスホバーの処理などで全体再描画になるので重い
◆ データ数が少ないとたいしたことないけど すごく多くのデータを扱うとかなら SVG が無難
グラフを作ったりするチャート系ライブラリ
いろいろありますが 大きな違いに描画部分を Canvas でするか SVG でするかというのがあります
どっちでもいいやと思ってたのですが 使ってみると気になる違いがありました
結論を先に書くと SVG のほうが軽いです
大量のデータになると Canvas だと表示されるまでに時間がかかりますが SVG の方はそこまでかかりません
例えばマウスを乗せたときに 詳細情報を表示する処理だと SVG の場合は HTML で position: absolute にした DOM を配置するのと同じ感じでグラフ部分はそのままで詳細を表示するウィンドウだけ更新できます
Canvas だと全体が画像のようなものなので すでにあるものを消したり動かしたりができません
グラフ部分も含めて全部を再描画です
データが少ないと再描画しても大したことはないですが 何万何十万というデータをプロットしたグラフだとマウスを動かすたびにその数のデータを再描画することになります
またアニメーション機能がある場合は SVG だとアニメーション機能があるのでブラウザが最適化してくれますし 必要な部分のみで済みます
それが Canvas だと途中段階を計算して毎回 Canvas を再描画です
HTML のアニメーションで CSS を使わず JavaScript で setInterval を使ってアニメーション途中の状態をスタイルに設定するようなものに加えて Canvas に再描画ですから考えるだけで重い処理ですよね
Canvas でもレイヤを分けて複数の Canvas に描画して更新の必要がないレイヤは再描画しなくて済むようにするとか アニメーション前の状態で動かない部分のみ描画しておいてそれをバックアップしておき アニメーション中はバックアップのコピーに動きがある部分だけを描画するとか 最適化も考えられそうですが考えるだけで大変そうなので やってるのは少ないんじゃないでしょうか
ちょっと古いですが 有名どころの Highcharts が Canvas から SVG に変えたときの理由がここに載ってます
https://www.highcharts.com/blog/news/12-highcharts-goes-svg/
SVG だと DOM 構造的に svg タグの中に要素がいっぱい作成されるのに対して canvas タグのみで子要素は何もない違いはあるものの そこまで困らない気がします
もし 実装的に Canvas タグ 1 つで完結してほしいとかあるなら Canvas を選ぶメリットになると思います
一見 Canvas のほうが画像化しやすそうですが 画像化する場合は Canvas は PNG などに出力できますが SVG だとそのまま SVG ファイルで保存すれば拡大縮小にも強いベクタ画像ファイルにできます
PNG にしたい場合も 一時的に Canvas を作って Canvas に SVG を draw すれば PNG になりますし
SVG のほうが優れてると言えそうです
とは言っても Canvas で困るのはすごくデータが多い場合だけなので データ量が多くないなら Canvas を使ってようと 見た目や API が使いやすいライブラリを使えば良いと思います
デモの DOM を確認してるので もしオプションでどっちにでもできるというのがあった場合はデモに使われてる方になります
SVG
1, 2 を争うくらいの有名どころ(私感です)であちこちのサイトでみかけるライブラリです
有料ぽいけど Github にソースが公開されていて無料でも使えます
ライセンス的には Non-commercial だと無料だそうです
https://shop.highsoft.com/highcharts
SVG
新し目?見た目がきれいでアニメーションもできて高機能な雰囲気
有料版もあって 違いは有料版だとスタッフのサポートや amPlus というもののサブスクリプション付きらしいです
また 有料版はチャート上の amCharts のロゴを消せるようです
ロゴと言っても主張が大きくないし 見た目もグラフみたいなものであまり消したいと思うような見た目じゃないです
https://www.amcharts.com/online-store/
Canvas
無料の定番って感じのライブラリ
シンプルできれいな見た目が好きです
SVG
無料でシンプルなライブラリ
Chart.js が迷うやつ
シンプルなもので SVG がいいならこれでいいかもしれません
デモ見た感じではアニメーションはありますが マウスを使った機能はなさそうです
インタラクティブなものではなくただの SVG 画像をつくるという感じです
SVG
D3.js ベースのライブラリ
シンプル過ぎて見た目がちょっと物足りない感じがします
見た目のシンプル差に対して マウスを乗せたもの以外を薄くしたり 詳細情報を表示したりと機能がいろいろありそうです
SVG
こっちも D3.js ベースのライブラリ
見た目が派手で綺麗な感じです
グラフィカルな部分に特化させてる気がします
SVG
これも D3.js ベースのライブラリ
taucharts に比べると色はおちついた感じ(悪くいうと地味)
Canvas
見た目も綺麗で高機能
Non-Commercial 利用だと無料です
https://canvasjs.com/license/
Canvas が複数重なってたのでレイヤー分けされてそうです
グラフのポイントをドラッグで好きな位置に移動できる機能って初めて見たかも……
SVG
見た目キレイでここまでの感じだと HighCharts などのように一部有料かなと思ったのですが 有料版はなく全部無料で Commercial 利用も無料のようです
いろいろありますが 大きな違いに描画部分を Canvas でするか SVG でするかというのがあります
どっちでもいいやと思ってたのですが 使ってみると気になる違いがありました
結論を先に書くと SVG のほうが軽いです
大量のデータになると Canvas だと表示されるまでに時間がかかりますが SVG の方はそこまでかかりません
SVG のほうが良さそうな理由
仕組みを考えても Canvas は部分的に変更できなくて 1 から再描画する必要があるのに比べて SVG は HTML みたいな XML ベースなので部分的に変更ができるのでブラウザがいい感じに最適化してくれます例えばマウスを乗せたときに 詳細情報を表示する処理だと SVG の場合は HTML で position: absolute にした DOM を配置するのと同じ感じでグラフ部分はそのままで詳細を表示するウィンドウだけ更新できます
Canvas だと全体が画像のようなものなので すでにあるものを消したり動かしたりができません
グラフ部分も含めて全部を再描画です
データが少ないと再描画しても大したことはないですが 何万何十万というデータをプロットしたグラフだとマウスを動かすたびにその数のデータを再描画することになります
またアニメーション機能がある場合は SVG だとアニメーション機能があるのでブラウザが最適化してくれますし 必要な部分のみで済みます
それが Canvas だと途中段階を計算して毎回 Canvas を再描画です
HTML のアニメーションで CSS を使わず JavaScript で setInterval を使ってアニメーション途中の状態をスタイルに設定するようなものに加えて Canvas に再描画ですから考えるだけで重い処理ですよね
Canvas でもレイヤを分けて複数の Canvas に描画して更新の必要がないレイヤは再描画しなくて済むようにするとか アニメーション前の状態で動かない部分のみ描画しておいてそれをバックアップしておき アニメーション中はバックアップのコピーに動きがある部分だけを描画するとか 最適化も考えられそうですが考えるだけで大変そうなので やってるのは少ないんじゃないでしょうか
ちょっと古いですが 有名どころの Highcharts が Canvas から SVG に変えたときの理由がここに載ってます
https://www.highcharts.com/blog/news/12-highcharts-goes-svg/
Canvas のほうがいい場合
パッとは思いつきませんSVG だと DOM 構造的に svg タグの中に要素がいっぱい作成されるのに対して canvas タグのみで子要素は何もない違いはあるものの そこまで困らない気がします
もし 実装的に Canvas タグ 1 つで完結してほしいとかあるなら Canvas を選ぶメリットになると思います
一見 Canvas のほうが画像化しやすそうですが 画像化する場合は Canvas は PNG などに出力できますが SVG だとそのまま SVG ファイルで保存すれば拡大縮小にも強いベクタ画像ファイルにできます
PNG にしたい場合も 一時的に Canvas を作って Canvas に SVG を draw すれば PNG になりますし
SVG のほうが優れてると言えそうです
とは言っても Canvas で困るのはすごくデータが多い場合だけなので データ量が多くないなら Canvas を使ってようと 見た目や API が使いやすいライブラリを使えば良いと思います
チャートライブラリ
有名どころのチャートライブラリがどっちを使ってるのか調べてみましたデモの DOM を確認してるので もしオプションでどっちにでもできるというのがあった場合はデモに使われてる方になります
HighCharts
https://www.highcharts.com/blog/products/highcharts/SVG
1, 2 を争うくらいの有名どころ(私感です)であちこちのサイトでみかけるライブラリです
有料ぽいけど Github にソースが公開されていて無料でも使えます
ライセンス的には Non-commercial だと無料だそうです
https://shop.highsoft.com/highcharts
amCharts
https://www.amcharts.com/javascript-charts/SVG
新し目?見た目がきれいでアニメーションもできて高機能な雰囲気
有料版もあって 違いは有料版だとスタッフのサポートや amPlus というもののサブスクリプション付きらしいです
また 有料版はチャート上の amCharts のロゴを消せるようです
ロゴと言っても主張が大きくないし 見た目もグラフみたいなものであまり消したいと思うような見た目じゃないです
https://www.amcharts.com/online-store/
Chart.js
https://www.chartjs.org/Canvas
無料の定番って感じのライブラリ
シンプルできれいな見た目が好きです
Chartist
https://gionkunz.github.io/chartist-js/index.htmlSVG
無料でシンプルなライブラリ
Chart.js が迷うやつ
シンプルなもので SVG がいいならこれでいいかもしれません
デモ見た感じではアニメーションはありますが マウスを使った機能はなさそうです
インタラクティブなものではなくただの SVG 画像をつくるという感じです
C3.js
https://c3js.org/SVG
D3.js ベースのライブラリ
シンプル過ぎて見た目がちょっと物足りない感じがします
見た目のシンプル差に対して マウスを乗せたもの以外を薄くしたり 詳細情報を表示したりと機能がいろいろありそうです
taucharts
http://www.taucharts.com/SVG
こっちも D3.js ベースのライブラリ
見た目が派手で綺麗な感じです
グラフィカルな部分に特化させてる気がします
NVD3
http://nvd3.org/SVG
これも D3.js ベースのライブラリ
taucharts に比べると色はおちついた感じ(悪くいうと地味)
CanvasJS
https://canvasjs.com/Canvas
見た目も綺麗で高機能
Non-Commercial 利用だと無料です
https://canvasjs.com/license/
Canvas が複数重なってたのでレイヤー分けされてそうです
グラフのポイントをドラッグで好きな位置に移動できる機能って初めて見たかも……
ApexCharts
https://apexcharts.com/SVG
見た目キレイでここまでの感じだと HighCharts などのように一部有料かなと思ったのですが 有料版はなく全部無料で Commercial 利用も無料のようです