公的機関の研究案内サイト

CanvasJSを使ったチャートの描画

データを与えれば自動でチャートを描画してくれるjavascriptは世の中にたくさんあります。

・D3.js
・Chart.js
・Google Charts
・HighChart.js
・CanvasJS

と、一部挙げただけでもう満腹ですけど、探せばまだまだたくさん出てきます。

中でも　D3.js　は超高機能で、言わずと知れた最高パフォーマンスのチャートJSライブラリの一つ。その設計も考え抜かれた超高品質で、使いこなせれば出来ないものはないとの呼び声高いライブラリです。でも使いこなすのは相当熟練が必要・・・。
一方、Chart.js、Google Charts　は使い方は簡単なものの、デザイン性を考えるとやや見劣りがします。
結局のところ、予算と納期がある以上、制作サイドがどこまでこの案件に没頭できるか（制作コスト）という点と、デザイン性（パフォーマンス）、費用（有償／無償）などを総合的に考えて、もっともコストパフォーマンスの高い選択肢を選ぶ必要があると思います。

そして弊社では検討の結果、
CanvasJS
を採用しました。

有償ですが、デザイン性も高く、そこまで仕様を理解しきらなくてもある程度楽に描画できる点で、総合点が一番高いと判断しました。

見た目をシンプルにすることが目的

今回、あえてプログラムでチャートを描画する方針にしたのには、理由があります。
データというのは、知りたい人にとっては細かい数値が知りたいものですが、逆に大枠だけわかれば十分という人もたくさんいます。
その２種類の人どちらにも必要十分なデザインにするには、情報を全部持っているけど求められない限りは出さない（クリックするまでその情報を表示しない）ということができるものでないといけません。
それこそがプログラムです。今回のjavascriptです。

ある情報、データをデザインするとき、そのデザインを見た人が「ここに書かれている情報が何についての情報なのか」、そして「その情報が何の意味を持つのか」を直観的かつ瞬時に把握できるようなデザインのことを総称してインフォグラフィックスといいますが、そのインフォグラフィックスの考え方にも近いのではないでしょうか。