色んな方法でWeb上でグラフ(Chart)を表示する。色んな方法でWeb上でグラフ(Chart)を表示する。色んな方法でWeb上でグラフ(Chart)を表示する。技術スポンサードリンク最近仕事で、サイト上にグラフを作る機会があった。個人的に気に入っているグラフ描画のためのjsライブラリを紹介と実演してみる。まとめHighcharts有名どころ。https://www.highcharts.com/個人的に一番好き。いうのも、非常にリッチなUIを提供してくれるのと、複雑なものを簡単に作成することができるようになっている。特定のラベルをクリックしてそれを削除する機能がデフォルトでは存在して無い。(実装自体は可能)Highchartsではそれが無料でデフォルトで使用できるようになっているのだ。拡張も非常に簡単なため、個人的にはお勧めのライブラリである。ちなみに、一番簡単な実装は以下。CodePen.0これを色々拡張していくとこうなる。CodePen.0コンボグラフになっていたり、ズームが出来たり色々変更されている。‘xy’},これを任意の箇所に追加してあげるだけで実装できてしまう。https://api.highcharts.com/highcharts/詳しくはReferenceを読めば色々載っている。Charts我らがGoogle。Script上で公開するということが可能なことだ。データを集めるところさえなんとかしてしまえば、サーバレスにGoogle上で視覚化したデータを見ることができてしまう。社内ツールのためにサーバーを用意する必要はない時代が来たのかもしれない。簡単な実装をしてみる。CodePen.0個人的に気になるのはloadという処理が必要なところ。highchartsは必要なjsだけを読み込む式だったが、これは一度jsを読み込んだ後必要なものだけloadしているのだろうか・・・?Googleに限ってそんな無駄に読み込み時間を延ばしそうなことはしないと思うが。こちらも色々拡張していく。CodePen.0グラフを横にスライドしたり、tooltipの中に対応するカラーコードを表示するようになったりしている。した理解だと、グラフのビジュアライズ部分はoptions、データの構造自体はaddColumnとデータ自体をいじればよさそう。頑張れば色々独自の動きをするグラフを作成できそうである。ちなみにhighchartsの際にやったようなコンボチャートにする場合、ロードする処理自体を変えないといけないので注意(こっちを使う:https://developers.google.com/chart/interactive/docs/gallery/combochart)まとめ二つだけの紹介になってしまったが、この二つは抑えておいて損はないと思う。Googleはやはり大手の安心感があるし、今後も意欲的なエンジニア達がより使いやすく更新し続けてくれるだろう。Highchartsは優れたUIを提供してくれているので、上手く使い分けていきたい。前の記事そもそも何故IEはこんなにcssが崩れるダメな子なのか。2018.08.01次の記事スクレイピングとは?curlで簡単なスクレイピングを試す。某配送システム白猫プロジェクトのアイシャが大好きなエンジニアの卵。Java/Shell/C++/HTML/Sass/rustかgoやりたい。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。WordPress.。