Highcharts 設定オプション詳細説明

Highcharts は多数の設定オプションパラメータを提供しており、ユーザーの要件に合ったグラフを簡単にカスタマイズできます。この章では、Highcharts 設定オプションの使用方法を詳しく説明します。

パラメータ設定(属性+イベント)

  1. chart.events.addSeries: チャートにデータ系列を追加します。

  2. chart.events.click: チャート全体の描画領域で発生するクリックイベント。

  3. chart.events.load: チャートのロードイベント。

  4. chart.events.redraw: チャートの再描画イベント。凡例のクリックによる描画の表示/非表示時にトリガーされます。

  5. chart.events.selection: チャートの曲線を選択して拡大できる場合、チャート選択操作時にこのイベントをトリガーできます。

  6. chart.height: 描画するチャートの高さの値。

  7. chart.inverted: チャートのX軸とY軸を入れ替えます。

  8. chart.polar: 極座標チャート（polar chart）であるかどうか。

  9. chart.reflow: ウィンドウサイズが変更されると、チャート幅がウィンドウサイズの変更に自動的に適応します。

  10. chart.renderTo: チャートをロードする場所。ページ上のDOMオブジェクトです。

  11. chart.showAxes: 空のチャートで座標軸を表示するかどうか。

  12. chart.type: チャートのタイプ。デフォルトはlineで、他にもあります。bar/column/pie……

  13. chart.width: チャート描画領域の幅。デフォルトは自動適応です。

  14. chart.zoomType: チャート内のデータレポートの拡大タイプ。X軸での拡大、Y軸での拡大、XY軸同時の拡大が可能です。

  15. colors: チャートに多数の系列がある場合の、各データ系列間の色。配列であり、通常は変更しません。

  16. credits.enabled: 著作権情報を表示するかどうか。

  17. credits.href: 著作権情報のリンク。

  18. credits.text: 著作権情報として表示するテキスト。

  19. exporting.buttons.exportButton.enabled: エクスポートボタンを表示するかどうか。

  20. exporting.buttons.exportButton.menuItems: エクスポートボタンのメニューオプション。

  21. exporting.buttons.exportButton.onclick: エクスポートボタンがクリックされたときのイベント。内部のメニューではありません。

  22. exporting.buttons.printButton.enabled: プリントボタンを許可するかどうか。

  23. exporting.buttons.printButton.onclick: プリントボタンのクリックイベント。

  24. exporting.enabled: プリントボタンとエクスポートボタンを許可するかどうか。

  25. exporting.filename: エクスポートされるファイルのファイル名。

  26. exporting.type: デフォルトでエクスポートされる画像のファイル形式。

  27. exporting.url: SVGチャートを変換・エクスポートするインターフェース処理アドレス。

  28. exporing.width: デフォルトでエクスポートされる画像の幅。

  29. labels：ラベル。チャートの任意の位置に配置でき、items、styleを持ちます。

  30. lang: 言語パラメータ設定。エクスポートボタンメニューに関する設定や、時刻名の設定など。

  31. legend.enabled: 凡例を許可するかどうか。

  32. navigation.buttonOptions.enabled: チャート内のすべてのナビゲーションにあるボタンがクリック可能かどうか。

  33. plotOptions.area.allowPointSelect: データポイントのクリックを許可するかどうか。

  34. plotOptions.area.color: 描画の色。

  35. plotOptions.area.dataLabels.enabled: データラベルを許可するかどうか。

  36. plotOptions.area.enableMouseTracking: データチャート内で、マウストラッキングによるデータポイントのバブル表示を許可するかどうか。

  37. plotOptions.area.events.checkboxClick: データチャート内の凡例にあるチェックボックスのクリックイベント。

  38. plotOptions.area.events.click: データチャート内のデータポイントのクリックイベント。

  39. plotOptions.area.events.hide: データチャート内で、特定のデータ系列が非表示になったときのイベント。

  40. plotOptions.area.events.show: データチャート内で、特定のデータ系列が表示されたときのイベント。

  41. plotOptions.area.events.legendItemClick: データチャート内で、凡例の項目がクリックされたときのイベント。直接falseを代入するとクリック不可になります。

  42. plotOptions.area.events.mouseOut: データポイントからマウスが離れたときのイベント。

  43. plotOptions.area.events.mouseOver: データポイントにマウスが重なったときのイベント。

  44. plotOptions.area.marker.enabled: チャートの描画内でポイントのマーカーを表示するかどうか。

  45. plotOptions.area.marker.states.hover.enabled: マーカーのマウスオーバー状態を許可するかどうか。

  46. plotOptions.area.marker.states.select.enabled: マーカーの選択状態を許可するかどうか。

  47. plotOptions.area.point.events.click: チャート内の個々のポイントのクリックイベント。

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events..mouseOver

  50. plotOptions.area.point.events.remove: チャート内のポイントを削除したときのイベント。

  51. plotOptions.area.point.events.select: チャート内のポイント選択イベント。

  52. plotOptions.area.point.events.unselect: チャート内のポイント選択を解除したときのイベント。

  53. plotOptions.area.point.events.update: チャート内のデータが更新されたときのイベント。

  54. plotOptions.area.visible: ロード時にデータ系列をデフォルトで表示するか非表示にするか。

  55. plotOptions.area.zIndex: 複数系列の場合に、各系列の重なり順序を調整します。

  56. 上記のpoint.eventsは、他の面（エリア）系チャート（arearange、areaspline、areasplinerange）、他の棒グラフ（bar、column）、およびすべてのチャートにも同様に適用されます。

  57. plotOptions.area.showInLegend: 凡例に表示するかどうか。

  58. plotOptions.area.stacking: 値でスタッキングするか、パーセンテージでスタッキングするか。

  59. plotOptions.area.states.hover.enabled: マウスを重ねた状態を許可するかどうか。

  60. plotOptions.area.stickyTracking: マウスによるデータポイントの粘着トラッキング。

  61. plotOptions.arearange、plotOptions.areaspline、plotOptions.areasplinerange は plotOptions.area と同様です。

  62. plotOptions.bar.groupPadding: 棒グラフのグループ化において、各グループ間の間隔。

  63. plotOptions.bar.grouping: データをグループ化するかどうか。

  64. plotOptions.bar.minPointLength:: ポイントの値が0の場合のポイントの最小長さを定義します。

  65. plotOptions.bar.showInLegend: 凡例に表示するかどうか。

  66. plotOptions.bar.stacking: 値でスタッキングするか、パーセンテージでスタッキングするか（normal/percent）。

  67. plotOptions.column、plotOptions.columnrangeはplotOptions.barと同様です。

  68. plotOptions.lineの関連設定はplotOptions.areaの設定に似ています。

  69. plotOptions.pie.ignoreHiddenPoint：円グラフにおいて、あるシリーズが凡例クリックで非表示になった後、円グラフ全体が再び100%で配分されるか、それとも元のグラフの上で単に非表示になり、欠損部分が生じるかを指定します。

  70. plotOptions.pie.innerSize：円グラフを描画する際、円グラフの中心にどれだけの空白を確保するかを指定します。

  71. plotOptions.pie.slicedOffset：allowPointSelectと組み合わせて使用し、ポイントがクリックされたときに対応する扇区が分離されます。このパラメータは分離する距離を設定します。

  72. plotOptions.pieの他の一般的な設定パラメータはplotOptions.area、plotOptions.scatterと同様です。plotOptions.series、plotOptions.splineの関連設定はplotOptions.areaの設定に似ています。

  73. series：配列です。

  74. series.data.color：特定のデータの色です。

  75. series.data.dataLabels：シリーズ内の特定のデータのデータラベルです。

  76. series.data.eventsはplotOptions.area.point.eventsの関連設定と同様です。

  77. series.data.markerはplotOptions.area.markerの関連設定と同様です。

  78. series.data.name：データポイントの名前を設定します。

  79. series.data.sliced：円グラフにおける扇区の分離距離の大きさを設定します。

  80. series.data.x：ポイントのx値です。

  81. series.data.y：ポイントのy値です。

  82. series.name：データシリーズの名前です。

  83. series.stack：スタック（積み上げ）のグループインデックスです。

  84. series.type：データシリーズの表示タイプです。

  85. series.xAxis、series.yAxis：複数の座標軸を使用する場合、特定のシリーズがどの座標軸に対応するかを指定します。

  86. subtitle：チャートのサブタイトルを設定します。

  87. title：チャートのタイトルを設定します。

  88. tooltip：チャート内のデータのツールチップを設定します。

  89. tooltip.valueDecimals：許可される小数点以下の桁数です。

  90. tooltip.percentageDecimals：許可されるパーセンテージの小数点以下の桁数です。

  91. xAxis、yAxis設定で座標軸を設定します。

  92. allowDecimals：座標軸上で小数を許可するかどうかです。

  93. categories：配列であり、座標軸のカテゴリです。

  94. plotLines：プロットラインを描画します。

  95. tickColor：目盛りの色です。

  96. tickInterval：目盛りの間隔（ステップ値）です。

  97. labels.rotation：目盛りラベルの回転角度です。

Chart: チャート領域オプション

Chartチャートエリアのオプションは、チャートエリアに関連するプロパティを設定するために使用します。

パラメータ 説明 デフォルト値
backgroundColor チャートエリアの背景色を設定します。 #FFFFFF
borderWidth チャートの枠線の幅を設定します。 0
borderRadius チャートの枠線の角丸（丸み）の角度を設定します。 5
renderTo チャートを配置するコンテナです。通常はHTML内にDIVを配置し、DIVのid属性値を取得します。 null
defaultSeriesType デフォルトのチャートタイプはline, spline, area, areaspline, column, bar, pie, scatterです。 0
width チャートの幅です。デフォルトではチャートコンテナに合わせて幅が自動調整されます。 null
height チャートの高さです。デフォルトではチャートコンテナに合わせて高さが自動調整されます。 null
margin チャートと他の要素との間隔を設定します。配列で指定し、例：[0,0,0,0] [null]
plotBackgroundColor メインチャートエリアの背景色です。つまり、X軸とY軸で囲まれた領域の背景色です。 null
plotBorderColor メインチャートエリアの枠線の色です。つまり、X軸とY軸で囲まれた領域の枠線の色です。 null
plotBorderWidth メインチャートエリアの枠線の幅です。 0
shadow 影（シャドウ）を設定するかどうかです。背景色backgroundColorを設定する必要があります。 false
reflow チャートエリアの高さと幅に自動的に合わせるかどうかです。widthとheightが設定されていない場合、サイズが自動的に調整されます。 true
zoomType マウスをドラッグしてズームを行います。x軸またはy軸に沿ってズームし、'x'、'y'、'xy'を設定できます。 ''
events イベントコールバックです。addSeriesメソッド、clickメソッド、loadメソッド、selectionメソッドなどのコールバック関数をサポートします。  

Color: 色オプション

Color色のオプションは、チャートの配色（カラースキーム）を設定するために使用します。

パラメータ 説明 デフォルト値
color チャートを表示するために使用します。折れ線/棒/円などのグラフの色を配列形式で指定します。 array

Highchartsはデフォルトで複数の配色を提供しています。表示するグラフが色の種類より多い場合、追加のグラフは自動的に最初の配色から選択されます。配色をカスタマイズする方法：

Highcharts.setOptions({
    colors: ['#058DC7', '#3273B4', '#ED561B', '#DDDF00', '#24CBE5', '#64A4E5', '#FF9655',
'#FFF263', '#6AB2F9']
});

Title: タイトルオプション

Titleタイトルのオプションは、チャートのタイトルに関連するプロパティを設定するために使用します。

パラメータ 説明 デフォルト値
text タイトルのテキスト内容です。 Chart title
align 水平方向の配置方法です。 center
verticalAlign 垂直方向の配置方法です。 top
margin タイトルとサブタイトルの間、またはメインチャートエリアとの間の間隔です。 15
floating フロートさせるかどうかです。trueの場合、タイトルはメインチャートエリアから離れることができ、x、yプロパティと組み合わせて使用できます。 false
style CSSスタイルを設定します。 {color: '#3E576F',
fontSize: '16px'}

Subtitle: サブタイトルオプション

サブタイトルが提供するプロパティオプションはタイトルtitleとほぼ同じです。上記のタイトルオプションを参照してください。特筆すべき点として、サブタイトルのtextオプションはデフォルトで''、つまり空であるため、デフォルトではサブタイトルは表示されません。

xAxis: X軸オプション

X軸のオプションは、チャートのX軸に関連するプロパティを設定するために使用します。

パラメータ 説明 デフォルト値
categories X軸のカテゴリ名を設定します。配列です。例：categories: ['Apples', 'Bananas', 'Oranges'] []
title X軸の名前です。text、enabled、align、rotation、styleなどの属性をサポートします。  
labels X軸の各カテゴリ名のスタイルstyle、フォーマットformatter、角度rotationなどを設定します。 array
max X軸の最大値です（categoriesが空の場合）。nullの場合、最大値はX軸のデータに基づいて自動的に一致する最大値が設定されます。 null
min X軸の最小値です（categoriesが空の場合）。nullの場合、最小値はX軸のデータに基づいて自動的に一致する最小値が設定されます。 array
gridLineColor グリッド（縦線）の色です。 #C0C0C0
gridLineWidth グリッド（縦線）の幅です。 1
lineColor ベースラインの色です。 #C0D0E0
lineWidth ベースラインの幅です。 0

yAxis: Y軸オプション

Y軸のオプションは上記のxAxisオプションと基本的に同じです。上記の表のパラメータ設定を参照してください。個別には記載しません。

Series: データ系列オプション

データ列のオプションは、チャートに表示するデータに関連するプロパティを設定するために使用します。

パラメータ 説明 デフォルト値
data チャートに表示されるデータ列です。配列またはJSON形式のデータを使用できます。例：data:[0, 5, 3, 5]、または
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]		 ''
name データ列の名前を表示します。 ''
type データ列のタイプです。area, areaspline, bar, column, line, pie, scatter, splineをサポートします。 line

plotOptions: データポイントオプション

plotOptionsは、チャート内のデータポイントに関連するプロパティを設定するために使用します。plotOptionsは各チャートタイプによってプロパティ設定が若干異なります。ここでは一般的なオプションを列挙します。

パラメータ 説明 デフォルト値
enabled データポイント上にデータを直接表示するかどうかです。 false
allowPointSelect マウスでデータポイントを選択することを許可するかどうかです。 false
formatter コールバック関数で、データ表示内容をフォーマットします。 formatter: function() {return this.y;}

Tooltip: データポイントツールチップ

Tooltipは、マウスがデータポイントに移動したときに表示されるツールチップ情報を設定するために使用します。

パラメータ 説明 デフォルト値
enabled ツールチップを表示するかどうかです。 true
backgroundColor ツールチップの背景色を設定します。 rgba(255, 255, 255, .85)
borderColor ツールチップの枠線の色です。デフォルトではデータ列の色に自動的に一致します。 auto
borderRadius ツールチップの角丸（丸み）の角度です。 5
shadow ツールチップの影（シャドウ）を表示するかどうかです。 true
style ツールチップの内容のスタイルを設定します。例：フォントの色など color:'#333'
formatter コールバック関数で、ツールチップの表示内容をフォーマットして出力するために使用します。返される内容は<b>, <strong>, <i>, <em>, <br/>, <span>などのHTMLタグをサポートします。 2

Legend: 凡例オプション

legendは凡例関連の属性を設定するために使用します。

パラメータ 説明 デフォルト値
layout 表示形式。水平horizontalと垂直verticalをサポートします。 horizontal
align 配置方法。 center
backgroundColor 凡例の背景色。 null
borderColor 凡例の枠線の色。 #909090
borderRadius 凡例の枠線の角度 5
enabled 凡例を表示するかどうか true
floating フロートできるかどうか。x、y属性と連携します。 false
shadow 影を表示するかどうか false
style 凡例の内容のスタイルを設定します。 ''

より詳細な情報はHighcharts公式サイトの英語ドキュメントを参照してください：http://api.highcharts.com/highcharts

その他の拡張