Webサイトで折れ線グラフ

いつもお世話になっております。
Webサイトで折れ線グラフを載せたいのですが、どのように実装するか悩んでいます。。

以前どんな方法があるか質問させていただき、
また自分でも少し調べてみて下記の方法が使えそうだとわかりました。

1) JavaScript（chart.js、d3.js等のライブラリ使用）
2) html5（canvas、SVG）
3) Flash
4) 画像として貼り付け

上記の中で、1)、2) を考えていますが、
こういった方法で実現した場合、吹き出しで注釈等を入れることは可能なものはありますか？
また、折れ線の下に分かりやすく色もつけたいです。
（例として画像をつけています）

それぞれ試しはじめているのですが、ひとつひとつ調べるのに時間がかかってしまって…
実現可能かどうかや、おすすめの方法や簡単に実現できる方法があればアドバイスいただければ嬉しいです。

No.1 回答者： fujillin 回答日時： 2016/04/04 10:08

詳しいわけではありませんので、ざっと調べてみただけですが・・

１回だけのグラフを表示なさりたいのであれば、4）の方法が一番簡単だと思います。
変化するデータから、同じ処理で逐次グラフ化するような場合は、何らかのプログラムが必要になりますね。

計算を行う場合でも、サーバサイドで計算をして結果を出力する考え方と、クライアントサイドで計算を行う考え方とあるかと思います。ＵＩも兼ねて動的なものを作成したいのであれば後者の方がレスポンスが良いでしょう。

ご提示の方法のうち、1)と2) は同じ内容を切り口を変えたものと言えるので、必ずしも別物というわけではではありません。
確か、chart.jsはcanvasを利用したjavascriptライブラリですし、d3はSVGを利用していたと思います。
これら以外にもcanvasやSVGを扱うためのライブラリはいろいろ作られています。
また、chartはグラフに特化していますが、d3はデータ処理を目的としているので、結果はグラフだけとは限らないはずです。処理できる内容が豊富なので、その分だけ、扱いに慣れるのには少しだけ面倒かも知れません。

＞吹き出しで注釈等を入れることは可能なものはありますか？
chart、d3とも似たようなことはできるようです。
以下のサイトのサンプルで、マウスを動かしてみると吹き出し状のものが表示されるのがわかると思います。

◇chart.js
（配布サイトのサンプル）
http://www.chartjs.org/

◇d3.js
（吹き出しのサンプル）
http://hijiangtao.github.io/ss-vis-component/
（いろいろなサンプルの例示）
https://github.com/mbostock/d3/wiki/Gallery