グラフというのは、データを可視化するだけではなく、概念を可視化するのにもとても便利です。そこで、グラフを簡単に描くべく、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を使って様々なグラフを書いていきたいと思います。