JavaScriptでグラフを描画する

ブラウザ上にJavaScriptでリアルタイムのグラフを描画する必要が出てきましてライブラリを物色しております。

Arduino IDEのシリアルプロッタみたいなイメージのものをブラウザ上で表現するということですね。

良さげなものは、

  • Charts.js
  • Epoch.js
  • Google Charts

の3つ。

目次

Charts.js

一番使われているJavaScriptのグラフのライブラリです。

サンプルも多く出回っており、無難っちゃ無難かと。

リアルタイムグラフを描画するには、chartjs-plugin-streamingなどのプラグインが必要。

https://www.chartjs.org/

Epoch.js

かんたんなアニメーションを行ってくれるライブラリ。

簡単にグラフを描画してくれるとのこと。

1秒毎の更新しかしていないという記述をネット上で見つけたが、自分自身で使っていないので不明。

https://epochjs.github.io/epoch/

Google Charts

Googleのライブラリ。

結構いろんなことができそうなんですが、若干クセが強い様子。

ドキュメントもてんこ盛りで少しわかりにくかったですが、一番思っていることに近いことができそう。

https://developers.google.com/chart

ブラウザ上にリアルタイムグラフの描画

意外とライブラリはたくさんあるのですが、リアルタイムに針が触れたように描画してくれるものが少なくて、かなり難航しています。

思っている動きをしてくれるように一つづつ試していきたいと思っています。

連休中、フォートナイトをしようと思っていましたが、全然手こずってまして、全くする時間がないのでここまでorz

この記事を書いた人

古田 健のアバター 古田 健 代表取締役

ウェブサイトつくったり、アプリ作ったりしています。
動画撮影・編集・グラフィックデザインとかもトータルでやってます。

最近Linuxなんかのサーバーサイドの開発をはじめました。
開発のレベルの底上げやってます。

あと、FORTNITEにダダハマりしています。

目次
閉じる