highchartsの使い方 初心者向け

2013-11-26 2018-08-30

グラフ作成系プラグインの中で、1，2を争う人気なのがこのhighcharts。
ちょっとデータの持ち方に癖がありますが、使いこなせれば個人的なツール作成や仕事に役立つでしょう。ただし、商用利用の場合は有償。

highchartsの良い点は何といっても「見た目」。デフォルト設定でも十分に綺麗なので、派手な見た目をやたらに求めて来るクライアントを満足させるのにかなり効果的です。

これから使い方を説明して行きますが、jQueryとかjavascriptとかの知識はそこまで無くても使えると思うので、まずは使ってみてください。

はじめに

今回のhighcharts解説ですが、対象は
・コピペでhighchartsを使ったことはあるが、中身がよくわからないので知りたいという人
・jQueryはよく分からないけど、highchartsを使わなければならないという状況にある人
・何かよく分からないけどカッコイイグラフを表示してみたい人
くらいまで。細かい使い方はまた今度。

「とりあえず表示は出来る」に加えて「簡単な項目はいくらかわかる」くらいまでを目指します。
一回表示して満足してはならぬ。

highcharts解説

最低限必要なのが
1.チャートを表示するためのhtml
2.チャートを作成するためのjs

とりあえず、この2ファイルについて解説。
まずはソース。

html

js(chart.js)

html解説

highchartsを動かすためには、jQueryが必要。一番上の呼び出しでjQueryを、次の呼び出しでhighchartsを呼び出している。三番目の呼び出しは、今回チャート生成に使う自作のjs。また、jQueryは「Google Hosted Libraries」という、Googleのホスティングしているjsを呼び出しているが、自分で用意しても問題ない。

チャート表示部分は「id=”container”」を指定する事で、チャート作成部分で指定する「チャートの受け皿となる場所」を用意している。詳細はjs解説時に。

js解説

これが本題。上で紹介したソースは、highcharts公式デモの中で一番基本的なソースをちょっとだけいじったもの。
これの各要素を解説していきます。

宣言部分

$(‘#container’)はjQueryの書き方。#がidの意味になるので、id=”container”のタグを表す。
「html内のid=”container”のタグに、Highchartsのグラフを表示しますよ」という意味。

chart

チャートの入れ物。
宣言部分で、表示対象の要素を指定しない場合は、ここのrenderToで要素を指定する。(が、書き方が結構変わるので今回は気にしないくて大丈夫)
width、heigthなどでチャートのサイズも指定できる。

title

チャートのメインタイトル。textにタイトルを指定する。marginとかstyleとか見た目の指定も色々できる。
titleという要素自体は、色々な要素の子要素としても登場する。サンプルではxが指定されているが、数字をいじると少し横にずれるので気になる人は試してみると良い。

subtitle

チャートのサブタイトル。サブである事以外はtitleとほとんど同じ。でもmarginだけ指定できない。なぜ。

xAxis

横軸の設定。サンプルではcategoriesしか指定していないが、凄い数の項目がある。が、割とcategoriesだけ指定すれば事は足りる事が多い。こだわりの手作りチャートを作りたい人は公式のリファレンスを参照。

categories

横軸に表示される単位を指定する。
配列で[‘犬派’,’猫派’,’鳥派’]のように設定すると、左から配列の中身が順番に表示されるが、欲張って設定しすぎるとギチギチに詰まるので注意。私はもちろん鳥派。

yAxis

縦軸の設定。xAxisと同じく凄い数の項目があるが、y軸はおとなしめにしておくのが英国紳士。

plotLines

記事TOPのグラフ画像で言うとx軸の「0」の線がこのplotLinesに当たる。
value：基礎となる位置を指定する。今回のソースでは「0」となっているが、5を指定すればx軸の「5」の線が軸となる。
width：線の太さ。
color：線の色。
この手の見た目情報系要素は実際に数字やカラーコードを適当に設定してみるとすぐにわかる。

tooltip

マウスカーソルを合わせたときに表示される詳細データのフォーマットを指定する。外部に公開するなど、ある程度ちゃんとしたチャートを作る必要がある場合は色々いじることになるが、初期状態でも色々やってくれるので最初はあまり気にしない事を推奨。こだわりだすと結構難しい。

valueSuffix

表示される単位。今回のソースは温度表示用のチャートなので℃が指定されている。チャートの内容によって変更する。

legend

legend

こういうの。どの色の線がどの名前のチャートですよ、みたいなのを出す奴。
layout：’horizontal’か’vertical’を指定する。前者は横並べで、後者は縦並べ。↑の画像は後者。
align：グラフの左中右どこに配置するか。’left’か’right’か’center’
verticalAlign：上中下どこに配置するか。’top’か’middle’か’bottom’
borderWidth：枠の太さ。

series

チャート本体。最も大事な要素。ここでどんなチャートを出すか全て決める。

type

上のソースでは指定していないが、最も重要な要素。チャートのタイプを設定する。
とても説明しきれないので、公式のデモを参照。
色々設定して実行してみるときっと楽しい。

name

チャートの名前。色々なところで使われるので、任意の値を設定しておく。legendの画像を見れば、どこで使われてるのか一例がわかる。

data

チャートのデータを指定する。今回は単純な線グラフなので、値を順番にカンマ区切りで詰めていくだけ。サンプルなので直書きされているが、Webアプリとか実際に作る時は変数として受け取って詰めるのが普通。そのうちhighstockと一緒にその辺も解説する予定。

あとがき

何か凄い長くなってしまった。

この手の「グラフ綺麗！すげえ！」みたいなのは一回表示したところで満足して二度と使わないケースが少なくない気がするので、使う対象が出来てから触ればいいんじゃないかと思います。
私は仕事で仕方なく覚えましたが。

関連記事