Latest web development tutorials

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：ポーラチャートかどうか。

  9. chart.reflow：ウィンドウのサイズ変更、グラフの適応ウィンドウサイズの変化の幅。

  10. chart.renderTo：グラフをロードするには、ページ上のDOMオブジェクトです。

  11. chart.showAxes：空白のチャート軸を表示するかどうか。

  12. chart.type：グラフの種類、デフォルトの線は、 バー/コラム/パイがあります......

  13. chart.width：グラフのプロットエリアの幅は、デフォルトでは、適応です。

  14. chart.zoomType：レポートのチャートで増幅型のデータは、あなたがX軸またはY軸のズームにズームすることができ、あなたがXYにズームすることができますが、同時に軸。

  15. 色：グラフのほとんどの列は、各色間の列の数。 アレイであり、一般的に移動しないでください。

  16. クレジット.ENABLED：著作権情報の表示を許可するかどうか。

  17. credits.href：リンク著作権で保護。

  18. credits.text：著作権情報の表示テキスト。

  19. .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. ラベル：ラベルは、グラフの任意の位置にロードすることができ、アイテム、スタイルがあります。

  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：データ・チャート、イベントアイテムの伝説をクリックすると、偽の直接の割り当ては、それがクリック可能ではありません。

  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）、他のヒストグラム（バー、列）およびすべてのグラフの他の領域に適用されます。

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

  58. plotOptions.area.stacking：スタック、スタックまたはパーセンテージでの値です。

  59. plotOptions.area.states.hover.enabled：状態はマウスを置くことを許可するかどうか。

  60. plotOptions.area.stickyTracking：スティッキーマウストラッキングデータポイント。

  61. plotOptions.areaに似plotOptions.arearange、plotOptions.areaspline、plotOptions.areasplinerange

  62. plotOptions.bar.groupPadding：各パケット間の棒グラフのパケット間隔について。

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

  64. plotOptions.bar.minPointLength ::のための最小限の長さのポイント、ポイント値がゼロで定義します

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

  66. plotOptions.bar.stacking：スタックの値、スタックまたはパーセント（ノーマル/パーセント）としてです。

  67. plotOptions.barに似plotOptions.column、plotOptions.columnrange

  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. シリーズ：配列。

  74. series.data.color：1色のデータ。

  75. series.data.dataLabels：1シーケンスデータラベルデータ。

  76. plotOptions.area.point.eventsの構成と同様series.data.events。

  77. plotOptions.area.markerの構成と同様series.data.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. サブタイトル：グラフのサブタイトルを設定。

  87. タイトル：グラフの設定のタイトル。

  88. ツールチップ：チャートのバブルプロンプトデータを設定します。

  89. tooltip.valueDecimals：小数点以下を許可します。

  90. tooltip.percentageDecimals：小数点以下の割合を許可します。

  91. XAXIS、YAXIS軸の設定

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

  93. カテゴリ：分類軸の配列。

  94. plotLines：メインラインを描きます。

  95. tickColor：カラースケール。

  96. tickInterval：ステップ値スケール。

  97. labels.rotation：回転の規模ラベル度

チャート：チャート領域のオプション

グラフグラフ領域グラフ領域オプションは、プロパティを設定するために使用されます。

パラメータ 説明 デフォルト
backgroundColor グラフ領域の背景色を設定します #FFFFFF
borderWidth チャートの境界線の幅を設定します。 0
borderRadius 境界線を設定すると、角度を丸め 5
renderTo 一般的にDIV htmlの中に置かれた容器を、配置グラフ、DIVのid属性の値を取得 ヌル
defaultSeriesType デフォルトのグラフの種類のライン、スプライン、面積、areaspline、列、バー、円グラフ、散布 0
幅 チャートコンテナのデフォルトの幅の適応に応じてグラフの幅、 ヌル
高さ 身長チャート、高度に適応に応じてデフォルトのチャートのコンテナ ヌル
マージン 以下のようなチャートのピッチ配列内の他の要素、[0,0,0,0] [ヌル]
plotBackgroundColor 背景色のメイングラフエリアの背景色、囲まれた領域のX軸とY軸 ヌル
plotBorderColor 境界領域の色がメイングラフ、囲まれた領域のX軸とY軸と国境を接し ヌル
plotBorderWidth メインチャート領域の境界線の幅 0
影 シャドウが設定されている、あなたは、背景色のbackgroundColorを設定する必要があります。 偽
リフロー 幅と高さに設定されていない場合、高さと幅からグラフ領域を使用するかどうかは、サイズが適応されます。 真
zoomType 'X'、 'Y'、 'XY'：xまたはy軸に沿ってズームするマウス、ズームをドラッグして、に設定することができます ''
イベント イベントコールバックサポートAddSeries関数法、方法、loadメソッド、コールバック関数の選択方法をクリックします。

カラー：カラーオプション

カラーチャートのカラースキームを設定するためのカラーオプション。

パラメータ 説明 デフォルト
カラー ように、カラー表示、チャートの配列、ライン/バー/円グラフのため。 配列

Highchartsはすでにいくつかのデフォルトのカラースキームを提供していますが、より多くの種類よりもカラーグラフィックスを表示する場合、複数のグラフィックスは、自動的に最初のカラースキームの選択から始まります。 カスタムカラースキームのアプローチ： 

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

タイトル：タイトルオプション

タイトルキャプションオプションはグラフタイトルの関連するプロパティを設定するために使用されます。

パラメータ 説明 デフォルト
テキスト タイトルテキスト。 図表の表題
整列します 水平方向の配置です。 センター
verticalAlign 垂直方向の配置です。 トップ
マージン メインタイトルとサブタイトルまたはチャートピッチ範囲の間。 15
フローティング 浮遊するかどうかを、trueの場合、タイトルは、x、yの属性を使用して、メインチャート領域からずれていてもよいです。 偽
スタイル CSSスタイルを設定します。 {カラー： '＃3E576F」、
fontSize： 'に16px'}

字幕：字幕オプション

プロパティオプションは、タイトルと実質的に同じタイトルを提供字幕、タイトルが上記のオプションを参照することができ、字幕はデフォルトでは表示されませんので、 ''に字幕テキストオプションのデフォルトは、それは、空であることを言及する価値があります。

XAXIS：X軸オプション

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

パラメータ 説明 デフォルト
カテゴリ カテゴリ：[ 'りんご'、 'バナナ'、 'オレンジ']例えばX軸カテゴリ名、アレイを設定します []
タイトル X軸名称、サポートテキストは、回転、スタイルおよびその他の属性を揃え、有効
ラベル 各カテゴリ名のスタイルスタイルのX軸、フォーマットフォーマッタ、回転の角度などを設定します。 配列
マックス X軸の最大値がnullである場合（カテゴリが空である）、その後、最大値が自動的に最大にX軸データと一致します。 ヌル
分 X軸の最小値がnullである場合、最小値は自動的に最小にX軸データと一致します（カテゴリは空です）。 配列
gridLineColor グリッド（垂直）カラー ＃C0C0C0
gridLineWidth グリッド（縦線）の幅 1
lineColor ベースラインの色 ＃C0D0E0
線幅 ベースラインの幅 0

YAXIS：Y軸オプション

Y軸のオプションは、上記のXAXISオプションと一致して、設定を個別に列挙されなくなったパラメータの表を参照してください。

シリーズ：データ列オプション

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

パラメータ 説明 デフォルト
データ 配列やJSON形式のデータとすることができるグラフのデータ列に表示されます。 以下のような：データ：[0、5、3、5]、または
データ：[{名：「ポイント1」、Y：0}、{名：「ポイント2 '、Y：5}] 		''
名前 データ列の名前を表示します。 ''
タイプ 列のデータ型、支持領域、areaspline、バー、列、行、円グラフ、散布またはスプライン ライン

plotoptions：データポイントオプション

plotoptionsプロパティに関連するグラフのデータポイントを設定するために使用されます。 plotoptions様々なグラフの種類によると、それらの特性は、現在一般的に使用されるオプションがリストされ、わずかに異なる設定します。

パラメータ 説明 デフォルト
使用可能 データは、データポイント上に直接表示されています 偽
allowPointSelect データ・ポイントを選択するために、マウスの使用を許可するかどうか 偽
フォーマッタ コールバック関数、データの表示形式 フォーマッタ：関数（）{this.yを返します;}

ツールチップ：バルーンデータポイント

マウススライドデータポイントが表示されたときに、プロンプトボックスを設定するためのツールチップの情報。

パラメータ 説明 デフォルト
使用可能 プロンプトボックスを表示するかどうか 真
backgroundColor 背景色バルーンを設定します RGBA（255、255、255、0.85）
borderColor バルーンの境界線の色は、デフォルトのデータ列には、自動的に色を一致させます オート
borderRadius 丸い角をバルーン 5
影 プロンプトボックスの影を表示するかどうか 真
スタイル このようなフォントの色、等の設定バルーンコンテンツのスタイル、 色： '＃333」
フォーマッタ コールバック関数は、バルーンディスプレイの出力をフォーマットします。 このようなhtmlタグなどのバックサポート内容：<B>、<強い>、<私>、<em>の、<BR/>、<スパン> 2

凡例：レジェンドオプション

伝説の伝説は、プロパティを設定するために使用されます。

パラメータ 説明 デフォルト
レイアウト 表示形式、サポートの垂直垂直方向と水平方向のレベル 水平の
整列します アライメント。 センター
backgroundColor 伝説の背景色。 ヌル
borderColor 伝説の境界線の色。 ＃909090
borderRadius 伝説の国境角 5
使用可能 凡例を表示するかどうか 真
フローティング 私は、x、yプロパティで、浮くことができます。 偽
影 影を表示するかどうか 偽
スタイル 伝説のスタイルの内容 ''

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