dygraphを使ってブラウザ上にグラフを書く
RaspberryPiを使っていて、ブラウザ上にdygraphを使って
グラフを書いたときのメモ。
いろいろ試したけど、シンプルで使いやすかったのがこれ↓。
javascriptのライブラリとなっていて、線グラフの機能が一通り入ってる。
http://dygraphs.com/1.0.0/tests/
をいろいろ覗いてみて構文を理解するといい。
以下は よく使いそうな内容のメモ
legend: 'always', プロットの値、名前を常に表示
legendColor: 'rgb(200,200,200)', プロットの値の文字色指定
animatedZooms: true, オシャレにズーム
showRangeSelector: true, ズーム用のエリアをグラフの下に表示
rangeSelectorHeight: 30, ズーム用のエリアの高さ
rangeSelectorPlotStrokeColor: 'rgb(80,80,80)', ズーム用のエリアの色
rangeSelectorPlotFillColor: 'rgb(80,80,80)',ズーム用のエリアのグラフの色
showRoller: true, たぶん移動平均
rollPeriod:1, 移動平均の量
ラベルをグラフ上に表示すると見にくい場合は↓みたいにするとグラフ外にラベルを表示できる
labelsDivWidth: 100,
labelsSeparateLines: true,
labelsKMB: true,
labelsDivStyles:
{
backgroundColor: 'rgb(48,48,48)',
},
labelsDiv: document.getElementById("labels"),
んで
とかで必要な場所に表示してやるといい。
BootStrapでオシャレなビジュアルにってがんばってみた。
がしかし！！
グラフのメモリ部分の色がどうやっても変えれませんでした・・・。
ページの背景を黒っぽくしたけど、グラフのメモリの色がデフォルトで黒なので、
非常に見えにくくなってダサくなってしまいました・・・。
さらにRollerの色も変えれなかったので、満足するできになりませんでした・・・
けど、グラフはちゃんと表示できたのでとりあえずOK!!
