2017年7月
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

Amazonウィジェット

  • miniPC
  • 最近買った本
  • Raspberry Pi
  • クアッドコプター
  • 書籍ランキング

AdSense

  • 広告
無料ブログはココログ

JavaScript

2014年12月14日 (日)

JavaScriptを使ってグラフを描く

JavaScript CSVファイル読み込みとChart.JSを使った作品

CSVファイルを読み込んで、Chartを描かせるスクリプトを組んだ。
ところがたくさんの躓きポイント(つまぽ)に遭遇した。
※JavaScriptに慣れてないヤツが触ってみようとするとこんな感じになるということで、あえて公開。

つまぽ1
ChartJSをインクルードしてなかった。凄く簡単w。
<script src="Chart.js"></script>

つまぽ2
グラフを描くためのCanvasを作ってなかった。
<canvas id="graph" height="200" width="200"></canvas>

つまぽ3
・Arrayオブジェクトが作成されていなかった。newがなかった。
・読み込んだデータが入ったデータを、ただしくオブジェクト配列に入れられてなかった。
・for inを使って入れたつもりが、添え字を途中手動でインクリメントしたせいで例外が発生していた。

つまぽ4
デバッガでは生成されたことになっているのに、何も表示されない。
色が設定されていなかったため、全て白で描画された。

つまぽ5
数値データの後に改行コードが入っていて、それが邪魔している。
こっちで修正済み
JavaScript ファイルの読み込み

つまぽ6
データを追加するときの括弧に注意
doughnutData.push({value:30, color:"#aaf2fb", label: "Yes"});

つまぽ7
数値データが、数値ではなく文字列として認識されていた。

気づくまでのプロセス
・CSVでデータをいれずに手動で配列にデータを入れ、それを使ってグラフを描いてみた。問題なく動くことを確認。

「doughnut2.htm」をダウンロード

・CSVでデータを入れて、pushでdoughnutData配列に入っていることは確認できる。しかし全く何も表示されない。
動くときと、動かないときの場合をヨーク見比べてみると、デバッガの表示が違うことがわかった。
文字列のときは””ダブルクォーテーションが付くが、数値のときは付かないはず。
ところが、動かないときは””が付いていた!!つまり数値として読み込まれていなかったのだ。

文字列→数値変換あれこれ
http://lealog.hateblo.jp/entry/2013/02/28/005010

そこで、Numberというやつを使えば、文字列を数値に変換できる。
doughnutData.push({ value:Number(ldat[n+1]), color:"#ffe361", label:ldat[n] });

↓これが動いたときのdoughnutDataの中身を見ているデバッガの画面
Ws000111



これが完成品
「copy-csvFileread.htm」をダウンロード

なお、Canvasに描いたグラフは、簡単に画像に変換することができる。
これを使えばgnuplotを使ってバッチ処理を描くより簡単そうだ。

MDN (Mozzila devel)



ちなみに、Perlのときは数値変換のときに
str + 0
とすれば、勝手に数値に変換してくれたが、
JavaScriptはこれだけは使えず、
str - 0
とか
+str
とか、するらしい。