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

ダウンロード

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

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

展開

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

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

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

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

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

さらにjsフォルダーをダブルクリック

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

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

サイト内のどこにアップロードしてもいいのですが、私は、https://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へのパス

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

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

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

グラフを描くためのJquery

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

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

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