グラフを装飾する ============================== Highchartsのグラフは基本的に .. code-block:: javascript 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番目が湿度など) とき、何番目を使うのかを指定します。