上で紹介したソースは、highcharts公式デモの中で一番基本的なソースをちょっとだけいじったもの。これの各要素を解説していきます。宣言部分$('#container').highcharts({1$('#container').highcharts({$(‘#container’)はjQueryの書き方。#がidの意味になるので、id=”container”のタグを表す。「html内のid=”container”のタグに、Highchartsのグラフを表示しますよ」という意味。{width:500,heigth:300},チャートの入れ物。宣言部分で、表示対象の要素を指定しない場合は、ここのrenderToで要素を指定する。(が、書き方が結構変わるので今回は気にしないくて大丈夫)width、heigthなどでチャートのサイズも指定できる。//center},チャートのメインタイトル。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:線の太さ。この手の見た目情報系要素は実際に数字やカラーコードを適当に設定してみるとすぐにわかる。tooltipマウスカーソルを合わせたときに表示される詳細データのフォーマットを指定する。外部に公開するなど、ある程度ちゃんとしたチャートを作る必要がある場合は色々いじることになるが、初期状態でも色々やってくれるので最初はあまり気にしない事を推奨。こだわりだすと結構難しい。valueSuffix表示される単位。今回のソースは温度表示用のチャートなので°Cが指定されている。チャートの内容によって変更する。legendこういうの。どの色の線がどの名前のチャートですよ、みたいなのを出す奴。layout:’horizontal’か’vertical’を指定する。前者は横並べで、後者は縦並べ。align:グラフの左中右どこに配置するか。’left’か’right’か’center’verticalAlign:上中下どこに配置するか。’top’か’middle’か’bottom’borderWidth:枠の太さ。seriesチャート本体。ここでどんなチャートを出すか全て決める。type上のソースでは指定していないが、最も重要な要素。チャートのタイプを設定する。説明しきれないので、公式のデモを参照。設定して実行してみるときっと楽しい。nameチャートの名前。色々なところで使われるので、任意の値を設定しておく。legendの画像を見れば、どこで使われてるのか一例がわかる。dataチャートのデータを指定する。今回は単純な線グラフなので、値を順番にカンマ区切りで詰めていくだけ。サンプルなので直書きされているが、Webアプリとか実際に作る時は変数として受け取って詰めるのが普通。そのうちhighstockと一緒にその辺も解説する予定。あとがき何か凄い長くなってしまった。この手の「グラフ綺麗!すげえ!」みたいなのは一回表示したところで満足して二度と使わないケースが少なくない気がするので、使う対象が出来てから触ればいいんじゃないかと思います。私は仕事で仕方なく覚えましたが。