jQueryで折れ線グラフを表示してみる « エンジニアのためのUI改善講座

データで魅せよう 情報の見せ方には様々なものがありますが、グラフほど分かりやすく、直感的な情報の見せ方は無いと思っています。データの羅列はただそれだけの情報で、そこから新たな発想や推測を生み出すのは難しいでしょう。 グラフ表示というと、Flash系の技術でFlex等が得意なイメージがありますが、JavaScriptでも十分に実現可能です。今回はjQueryとHighchartsを使って、グラフ表示を実現します。 情報をただ見せるだけでは退屈です。「魅せて」いきましょう。 まずはグラフを見てみる グラフ描画の元データはこのJSONデータです。この中身が変わると、ダイナミックにグラフの内容も変化します。また、グラフの各頂点にマウスのポインタを当ててみて下さい。数値がツールチップ方式で表示されたかと思います。 このグラフが簡単に描けたら、UIは劇的に改善出来ますね！やってみましょう。 jQuer