様々なグラフを綺麗に描けるプラグインHighcharts.js

更新

2013-05-07_0912
グラフというのは、データを可視化するだけではなく、概念を可視化するのにもとても便利です。そこで、グラフを簡単に描くべく、JqueryプラグインHighchartsを導入しました。Jqueryの知識が無くても様々なグラフが描けるのでオススメです。

ダウンロード

まずは、http://www.highcharts.com/に行って、少しだけ下スクロールして、「Highcharts」の「Download」をクリック。

2013-05-07_0917

これでダウンロードは完了。

展開

ダウンロードフォルダーに行って、Highcharts-3.0.1を右クリックし、「すべて展開(T)…」を選びます。
2013-05-07_0929

「完了時に添加されたファイルを表示する(H)」のチェックを外して「展開(E)」をクリック。
2013-05-07_0931

これで展開完了しました。

2013-05-07_0938

highcharts.jsをサーバーにアップロード

zipファイルではないほうのHighcharts-3.0.1フォルダーをダブルクリック

さらにjsフォルダーをダブルクリック
2013-05-07_1003

すると、highchartsという名前のjsファイル(つまりhighcharts.js)があります。

2013-05-07_1004

これをサーバーにアップロードします。

サイト内のどこにアップロードしてもいいのですが、私は、http://webshufu.com/の直下にjsフォルダーを作って、そこにhighcharts.jsをアップロードしました。(ちなみに、私は、Wordpressのプラグインに同梱されているものを除き、jsファイルを全てjsフォルダーに集めています。)

</body>の直前への書き込み

ここまで来たら、あとは</body>の直前に以下のようなコードを貼り付けるだけです。ワードプレスをお使いの場合は「【Wordpressでのデモに便利】1記事限定で反映させたいcssやjavascriptをカスタムフィールドで読み込む」が参考になります。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='(highcharts.jsへのパスを書く)'></script>
<script>
‥‥(グラフを描くためのJqueryを書く)‥‥
</script>

このうち、()で囲んだ部分について、以下で補足します。

highcharts.jsへのパス

私の場合http://webshufu.com/の直下にjsフォルダーを作って、そこにhighcharts.jsをアップロードしましたので、(highcharts.jsへのパス)は、以下のいずれかのように書けます。(他にも書き方があるかもしれませんが‥)

  • http://webshufu.com/js/highcharts.js
  • /js/highcharts.js

highcharts.jsをアップロードした場所に応じて適切に書いて下さい。

グラフを描くためのJquery

highcharts.jsでは実に様々なグラフが書けます。

どんなグラフを書くためにどんなコードを書けばよいかは、Jqueryの知識がなくとも、デモページAPI Referenceを見ると概ね把握できます。

@web_shufuは個人的にとても魅力を感じたので、highcharts.jsを使って様々なグラフを書いていきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です