読者です 読者をやめる 読者になる 読者になる

ニッポンの数字ブログ

統計情報のポータルサイト「ニッポンの数字」の開発日記。

JavaScript グラフ作成の簡略化に向けてはじめの一歩

統計情報を分かりやすくきれいに表示するため、JavaScriptを取り入れているのだけど、これまでHTMLで作る表組み用のデータとJavaScript用のデータを別々に書いていた。同じデータなのに別々に入力するため作業は2倍。入力ミスの確率も上がるので、どうにかHTML上のデータを流用できないかと思っていた。

サイトの更新作業に慣れてきたので、今のままでもいいのだけど、企業の決算が集中するとさすがに気分が滅入る。3月期末の決算発表が5月にあるから、それまでには何とかしたいと思い、ようやくJavaScriptをいじる決心をした。

グラフ以外にもJavaScript/jQueryを使っているので、基本的な部分は理解しているのだけど、ほとんどは本やWEBサイトに書かれたものを参考にしたもの。自分がやりたいと思っていることをコードで表現するのはほとんど初めてだ。

やりたいことはtableにあるデータを、Google chart に読み込むこと。WEBエンジニアの人にも至極簡単なことなんだろうけど、ちょっとホームページを作れるくらいの人間には大仕事なんだよね。

findメソッドとtextメソッドを使って、tbodyの中のtdデータを取得し、それを空の配列が入っている変数にぶち込む。うまくいったと思ったら、取得したデータが「2%」など、「%」が入ってしまっていた。

単位はいらないんだよ。でも、こうした問題は数々のプログラマーが直面してきたはず。だったら既に解決策はあるだろう。ということで、配列の中の要素をいじれる方法を探してみる。

すると手元にあるオライリー・ジャパンの「JavaScript」から、parseFloatという関数を発見。これは先頭にある数値のみを小数点付きで取り出してくれるメソッド。何とマニアックで何とタイムリーな。ありがたく頂戴して無事解決。

これでようやくはじめの一歩。