【初心者用】 Highchartsの使い方1 Highchartsの表示方法

綺麗なグラフを描く事が出来るHighchatsですが、Highchartsを使ってみたい!と思っても
公式サイトは英語だし、翻訳しても難しい単語が多くてよくわからん、そもそもjavascriptとかも全然わからん!!という方も多いと思います。かくいう自分もその一人でした。
なので、今回初心者でも解るようにHighchartsの使い方を記しておこうと思います。
最初Highcharsをはじめる時に少しでも参考になれば幸いです。


※私も初心者なので説明が不十分だったり、もっと賢明なやり方があるかもしれません。
ですが、「よくわからないけど、一応表示できた!」というのが今回の目標なのでその辺はあしからず(>_<)



1.まず、Highchartsの公式サイトのHOMEページの真ん中あたりにあるHighchartsをDownloadをクリックします。(下図参照)クリックすると次の画面でHighcharts2.2.5をクリックしてダウンロードを開始してください(2012/07/07では2.2.5というバージョンになっていますが今後更新されて数字が変わってくる可能性があります)ダウンロード先はデスクトップ上でもドキュメントの中でもどこでもオッケイです。
Highcharts画面




2.ダウンロードするとZIPファイルという圧縮した状態になっていると思います。まずはこれを解凍する必要があります。パソコンに解凍ソフトがダウンロードされていない人は、「ZIP 解凍」でググればそういうソフトが無料でダウンロードする事が出来ます。私はLhaplusというものを使用してます。


3.解凍し終わるとそのファイルの中にexampleというフォルダあるのでそれを開くと、area-basicなど色々なサンプルフォルダが出てくると思います。その中の一つを開くとブラウザ上でグラフが表示されると思います。これは公式サイトのDemo Galleryと同じやつですね。


4.グラフが表示されているブラウザ画面上で右クリックをすると「ページのソースを表示」というのがあるのでそこをクリックすると英語で書かれたスクリプトが出てくると思います。これがグラフを描くのに必要なプログラム文になります。このプログラム文を上から下まで全て選択して(Ctrl + A )ウインドウズに入っているメモ帳(Notepadかも)を立ち上げて、そこにコピペします。


5.コピペしたものを一旦保存します。「名前を付けて保存」で適当に名前を付けて保存しますが拡張子を.htmlにしてください(ここではtest.htmlとします)。ココ大事なんですが、保存画面の下の方に「文字コード」というのが選択出来ると思いますが、(最初、ANSI になっていると思います)ここを UTF-8 にしておいてください。そして適当な場所(デスクトップ上でもいいです)保存します。


6.保存したファイル(test.html)を開くとブラウザが立ちあがってグラフを表示しようとしますが、この状態では白紙の状態だと思います。そう、exampleをだたコピーしただけでは、グラフを表示できません。
再び、さきほどプログラム文を張り付けたメモ帳に戻ります。保存する時にメモ帳を閉じてしまった人は、メモ帳を再び開く必要がありますが、先ほどhtml形式でメモ帳を保存してしまったのでメモ帳を編集できなくなった!と思うかもしれませんが、test.htmlのファイル上でダブルクリックせずに右クリックすると「プログラムから開く」というのがあると思うので、そこをクリックすると「メモ帳(Notepad)」というがあると思います。そこをクリックすると先ほどの様にブログラム文を変更できるようになります。

ここで魔法の呪文を使います。下から4-5行目に
<script src="../../js/highcharts.js">
<script src="../../js/modules/exporting.js">
という部分があると思いますが、これを消して代わりに
<script src="http://code.highcharts.com/highcharts.js">
<script src="http://code.highcharts.com/modules/exporting.js">
に置き換えて、上書き保存してください。ただ気を付けて欲しいのは、上に書いてある各script文の最初のカッコ < をわざと大文字にして書いてあります(小文字にして書くとこのブログ上でscript文が上手く表示できなくなるため)。なので、ここに書いてある文をコピペした後に自分で最初のかっこを小文字のカッコ <  に直してください。


7.メモ帳を上書き保存した後、再びtest.htmlを開くと今度はちゃんと表示出来ていると思います。他のexampleでも上と同様な作業をすればしっかり表示できると思います。ただこの方法はパソコンがインターネットにつながっている状態で有効なので、注意が必要です。



以上が簡単ではありますが、Highchatsの使い方です。というかただの表示の方法ですね(笑)
表示出来れば、あとは他のexampleとプログラム文の違いを見比べてそこを少しイジったり・コピペしたりして上書き保存→グラフがいじる前とどう変わったのかをチェックしてそのプログラム文の意味を知る…というような場当たり的な勉強してください。試行錯誤しているうちに体で覚えていきます。


気が向いたら、次は、ブログ(FC2)でHighchatsを表示する方法というのを書こうと思います。


※見て解ったと思いますが、本質的にHighchartsの仕組みを理解したわけではありません。特に魔法の呪文とかは??だと思います。ただ、最初にも述べましたがここではHighcharts初心者が「ひとまず表示できるようになる!」を目標にやってますので、本質的な使い方等を知りたい方は公式サイトや他サイトさんを参考にしてください。私も答えられる範囲内でしたら答えますのでコメントください。


関連記事
  
このエントリーをはてなブックマークに追加


■よく読まれている人気記事


コメントの投稿

非公開コメント

Index for HighCharts FreQuent
author imageAuthor:Lynx
各データの推移を見守り中。
御連絡はこちらまでお願いします。



最新記事