jQueryで折れ線グラフを表示してみる « エンジニアのためのUI改善講座
データで魅せよう 情報の見せ方には様々なものがありますが、グラフほど分かりやすく、直感的な情報の見せ方は無いと思っています。データの羅列はただそれだけの情報で、そこから新たな発想や推測を生み出すのは難しいでしょう。 グラフ表示というと、Flash系の技術でFlex等が得意なイメージがありますが、JavaScriptでも十分に実現可能です。今回はjQueryとHighchartsを使って、グラフ表示を実現します。 情報をただ見せるだけでは退屈です。「魅せて」いきましょう。 まずはグラフを見てみる グラフ描画の元データはこのJSONデータです。この中身が変わると、ダイナミックにグラフの内容も変化します。また、グラフの各頂点にマウスのポインタを当ててみて下さい。数値がツールチップ方式で表示されたかと思います。 このグラフが簡単に描けたら、UIは劇的に改善出来ますね！やってみましょう。 jQuer
HighChartsで3種の棒グラフを同時表示する « エンジニアのためのUI改善講座
HighChartsはデータによりグラフ表示を動的に変更する 以前の記事（jQueryで棒グラフを表示してみる）で Highcharts を使った棒グラフを表示してみました。前回は特定のデータについての単純な棒グラフでしたが、HighChartsでは複数種のデータを同じグラフ内に表示することができます。 これは非常に簡単に実現することができます。単一データの棒グラフとの違いは、データだけなのです。JavaScriptコードは変更がありません。データの取得先を変更しただけです。前回は１つだけだったデータを、３つに増やしました。JSONデータ内の配列が、１つなのか、３つなのかの違いで、以下のように３つの棒グラフが表示されます。 棒グラフを見てみる もうHighcharts大好き。 JSONデータをもとにグラフを描写する JSONデータを見比べてみます。前回のJSONデータと今回の違いは、JSO
ハイクオリティのグラフ生成JavaScript「Highcharts」
twitter facebook hatena google pocket JavaScriptライブラリのjQueryを利用してハイクオリティのグラフを生成できる「Highcharts - Interactive JavaScript charts for your webpage」を紹介します。 ※非商用にて無償です。 sponsors 使用方法 Highcharts - Interactive JavaScript charts for your webpageからファイルをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="highcharts.js"></script> <!--[if IE]> <script t
Highcharts.js を使ってみた
最近IDEA*IDEAさんで取り上げられていたHighcharts.jsを試してみましたので、躓いた点などをメモしておきます。 ■公式サイト http://www.highcharts.com/ ダウンロード、更新履歴はこちらから見られます。ライセンスもこちらに記載があります。 個人利用、教育目的の利用、および非営利組織での利用については無料ですが、商用利用の際にはライセンスの購入（1サイト$80、複数サイト$360）が必要になるので注意です。 ■公式リファレンス http://www.highcharts.com/ref/ おそらく全部JSで実装されているのだと思いますが、凄いクオリティ高いです・・・ ■実際に導入してみて躓いたポイント 以下、すべてバージョン1.0.2（2009/12/09）での気づきです。 グラフを描画する領域のサイズは、CSSでは定義できない、直接style属性に書
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Highcharts - Options Reference
