グラフを装飾する

Highchartsのグラフは基本的に

var options = {
      chart : { ... },
      series : { ... },
      ...
};
chart = new Highcharts.Chart(options);

という書き方でグラフを表示します。ここでは、 options に設定できるオプションについて説明します。

項目は山ほどあるので、細かいことは 公式ドキュメント 見てください。 ここでは主要なものだけを解説します。

グラフ全体 (chart)

renderTo (String)

グラフを描写するHTMLの要素をIDで指定します。

type (String)

グラフの種類を指定します。デフォルトは type: "line" (折れ線) です。他にも色々あります。種類によってデータの形式が変わるので注意しましょう。詳しくは いろいろなグラフ のページを参照。

line	折れ線
spline	曲線
area	折れ線の下ぬりつぶし
areaspline	曲線の下ぬりつぶし
column	棒グラフ・縦
bar	棒グラフ・横
pie	円グラフ
scatter	散布図

backgroundColor, plotBackgroundColor (String)

それぞれグラフ全体の背景色、プロット部分の背景色を指定します。

borderWidth, borderColor, borderRadius (それぞれ Number, String, Number)

グラフの枠線を指定します。 borderWidth で 1 以上の数値を指定すると、グラフ全体を囲む枠線が現れます。さらに borderColor で色を指定できます。 borderRadius でカドの丸まり具合を指定出来ます。

inverted (Boolean)

inverted: true と指定すると、横軸がy軸、縦軸がx軸になります。

zoomType (String)

zoomType: "x" とすると、x軸をマウスで拡大可能になります。”x”の他に”y”,”xy”とも指定できます。

タイトル (title), サブタイトル (subtitle)

タイトルはグラフの上に大きく出る文字列で、グラフの主題を表記します。 サブタイトルはその下に小さく出る文字列で、出典の明記などに使われます。

text (String)

タイトルの文字列を指定します。

align (String)

タイトルの左寄せ、中央揃え、右寄せをそれぞれ “left”, “center”, “right” と指定します。

style (CSS Object)

タイトルの細かいスタイルを指定します。ただし位置揃えは text-align を使わずに上に書いたalignを使った方が良いとのことです。

floating (Boolena)

true にするとタイトルがプロット部分に入り込みます。

軸 (xAxis, yAxis)

type (String)

軸の種類を指定します。デフォルトは "linear" で、他に "datetime" (時系列), "logarithmic" (対数目盛) などが指定できます。

title (String)

軸のタイトルを指定します。

categories (Array)

軸の目盛りを、数値ではなく「月曜日、火曜日...」などの指定形式にします。String型の配列を指定します。

max (Number), minx (Number)

軸の最大値、最小値を指定します。

lineWidth (Number), lineColor (String)

軸の太さと色を指定します。

allowDecimals (Boolean)

グラフの目盛りに小数を含む値を使うことを許可するかを設定します。

凡例 (legend)

align (String)

凡例の位置を “left”, “center”, “right” で指定します。

borderWidth (Number), borderColor (String), borderRadius (Number), backgroundColor (String)

それぞれ枠線の太さ、枠線の色、枠線の角まるめ、背景色を指定します。

layout (String)

複数の系列をタテに並べる (“vertical”) かヨコに並べる (“horizontal”) かを指定します。

reversed (Boolean)

true にすると系列の表示順が逆になります。もっと複雑に指定したい場合は、データ系列 series の legendIndex を指定します。

データ系列 (series)

data

データを表記します。形式はグラフの種類によって色々です。

name (String)

系列名を指定します。

type (String)

グラフの種類を指定できます。指定可能な種類は chart.type と同一です。 気温の折れ線グラフと降水量の棒グラフを並べたい時などに使います。

legendIndex (Number)

凡例 (legend) で何番目に表記するかを指定します。

xAxis, yAxis (Number)

x軸またはy軸が複数ある (0番目が気温、1番目が湿度など) とき、何番目を使うのかを指定します。