グラフ用のライブラリ

Question

webアプリケーションでグラフを表示させたいです。
気温と複数の乳酸菌の活動を調べたデータです。

javascriptのライブラリを調べたところ
Chart.js、Cartist.js、C3.js、NVD3、canvasJS、D3.js、amChart・・・などなど、
たくさんのライブラリがあるようでどれがいいのか困っています。

質問① 【2グラフの表示】
以下の図のようなteratailにある
マウスオーバーで詳細が表示される2つ以上の独立したグラフが理想的なのですが

このようなグラフが表示されるフリーのライブラリはあるのでしょうか。
できれば、少し触りはじめたdygraphで作れればと思うのですが
Synchronizationという機能よりもう少し便利に
マウスオーバーした時に詳細タグや複数のグラフを貫く直線が欲しいです。

質問② 【拡大スライダー】
グラフのズームについて
dygraphではブラシというマウスで範囲指定させた部分を拡大させる機能があると知りました。
そうではなく、シンプルなスライダーで拡大させることができるライブラリはありますでしょうか。

javascript初心者のため、この言語やライブラリがどの程度カスタマイズできるのか？
リファレンスの紹介に載っていない何か方法があるのか？など全く分からない状態です。
選択肢が多すぎて英語ばかりで一人では見落としがありそうで・・・
何とかライブラリを選んでもその先が袋小路にもなりそうで・・・
自分なりに調べ続けてはいるのですが、
javascriptのグラフに詳しい人はどうされているのか教えていただきたくご相談させて頂きました。

どなたかご存知の方がいらっしゃいましたらよろしくお願いします。

Comments

[m.ts10806]

まず自分なりに試されたほうが良いです。そのうえで詰まったことなどを質問してください。　https://teratail.com/help/question-tips#questionTips1-2 >投稿前に自分で一度調べてみましょう。そして調べたことを元に、一度は自分でやってみましょう。

[fermat]

chartjsやNVD3からアタリを付けて試しているのですが、上記テラテイルのログイングラフのような複数データのシンクロがそもそもできない？みたいな状態に陥り、ライブラリが違うのか自分のやり方が違うのか・・・分からないという状態です。そもそもこの言語についてもよく分かっていないで飛び込んでいるので、javascriptの取り扱いがある大型の本屋さんへ行くなどしてもう少し頑張ってみようと思います。コメントありがとうございます。

Answer 1

直接的な回答ではないですが。
[ライブラリ見つけたので追記]

Highchart.jsのSynchronized chartが
質問者様がやりたいことと近いんじゃないかと思います。

---

以下アドバイス。

各ライブラリのサンプルなどを見ましょう。
設定を変えれるどうかはドキュメントを見ましょう。

更に細かいところは実際に使ってみなきゃわかりません。
自分がやりたいことができそうな順に試してみましょう。

この言語やライブラリがどの程度カスタマイズできるのか？

サンプルやドキュメントを見れば書いてます。

リファレンスの紹介に載っていない何か方法があるのか？

githubに上がっていればもしかしたらIssueなどにも載ってるかもしれません。
言ってしまえばライブラリのコードを見ればそれが全てです。

選択肢が多すぎて英語ばかりで一人では見落としがありそうで・・・

試さなきゃ全て見落としているのと同じです。
ライブラリの開発者でもなければ全てを把握してる人はごく僅かでしょう。
有名どこのライブラリは日本語訳しているものもあるので、探してみましょう。

何とかライブラリを選んでもその先が袋小路にもなりそうで・・・

袋小路になったら別なライブラリを選んで進めばいい話です。
どのライブラリもだめなら自作するか仕様を見直せば済みます。

---

javascriptのグラフに詳しい人はどうされているのか教えていただきたくご相談させて頂きました。

残念ながら私はグラフに関して詳しくはないですが、
ある道に詳しい人はとにかく手を動かしていると私は思っています。
使わなきゃわからないですし、仮に使ったものが合わなかったとしても
「このライブラリはこういうことができる」という使った情報が記憶に残ります。

宝くじも買わなきゃ当たらないというものですね。

Comments

[fermat]

具体的なコードのご相談でなくすみません。
一日中調べても結局どのグラフが良いのか分からないでヤケになっていましたが
>ある道に詳しい人はとにかく手を動かしていると私は思っています。
この言葉を頂き反省中です。。。
当たり付けした複数のライブラリの一覧表を作って一通り試そうかと思います。

>設定を変えれるどうかはドキュメントを見ましょう。
サンプルを読むことしかしていなかったので、ドキュメントに何かヒントがあるかもしれませんね。
まだできることがありそうなので読んで色々と試してみます。ありがとうございます。

[dice142]

良さげなライブラリ見つけたので追記しときました。

[fermat]

ライブラリを12個くらいピックアップしていたのですがHighchartはノーマークでした。
作りたいもの、これです。これからhighchartに重きを置いて英語訳とjavascriptと頑張ります。
javascriptはライブラリが無ければGUIを構成できない印象が勝手にあったのですが
>どのライブラリもだめなら自作するか仕様を見直せば済みます。
とのことで、本格的に学べばできることが広がりそうなので
今回のグラフだけ作れれば終わりと思わず勉強を進めてみたいと思います。
見つけて下さってありがとうございました。