Highcharts 構成オプションの詳細な説明

Highcharts には、ユーザーの要件を満たすチャートを簡単にカスタマイズできます:

パラメータ設定 (プロパティ + イベント)

chart .events .addSeries: グラフにシリーズを追加します。
chart.events.click: チャート全体の描画領域で発生するクリックイベント。
chart.events.load: チャート読み込みイベント。
chart.events.redraw: グラフの再描画イベント。凡例をクリックして描画を表示または非表示にしたときにトリガーできます。
chart.events.selection: このイベントは、チャート曲線を選択的に拡大できるとき、およびチャート操作が選択されたときにトリガーできます。
chart.height: 描画されるチャートの高さの値。
chart.inverted: チャートの x 軸と y 軸が反転されます。
chart.polar: 極座標図かどうか。
chart.reflow: ウィンドウサイズが変更されると、チャートの幅はウィンドウサイズの変更に適応します。
chart.renderTo: チャートが読み込まれる位置は、ページ上の DOM オブジェクトです。
chart.showAxes: 空のチャートで、座標軸を表示するかどうか。
chart.type: チャートのタイプ、デフォルトは折れ線、および棒/列/円です...
chart.width: チャート描画領域の幅、デフォルトはアダプティブです。
chart.zoomType: チャート内のデータレポートのズームタイプ。X 軸、Y 軸、または X 軸と Y 軸の両方にズームインできます。
色: グラフに複数の列がある場合、列間の色。これは配列であり、通常は移動しません。
credits.enabled: 著作権情報の表示を許可するかどうか。
credits.href: 著作権リンク。
credits.text: 著作権情報の表示テキスト。
exporting.buttons.exportButton.enabled: エクスポートボタンの表示を許可するかどうか。
exporting.buttons.exportButton.menuItems: エクスポートボタンのメニューオプション。
exporting.buttons.exportButton.onclick: 内部メニューではなく、ボタンのクリックイベントをエクスポートします。
exporting.buttons.printButton.enabled: ボタンの印刷を許可するかどうか。
exporting.buttons.printButton.onclick: 印刷ボタンのクリックイベント。
exporting.enabled: 印刷ボタンとエクスポートボタンが許可されるかどうか。
exporting.filename: エクスポートされたファイルのファイル名。
exporting.type: 画像をエクスポートするためのデフォルトのファイル形式。
exporting.url: SVG チャートを変換およびエクスポートするためのインターフェイス処理アドレス。
exporing.width: エクスポートされた画像のデフォルトの幅。
ラベル: チャート内の任意の位置にロードできるラベルには、項目とスタイルが含まれます。
lang: 言語パラメータの設定、エクスポートボタンメニューに関する設定、時刻名の設定など。
legend.enabled: 凡例を許可するかどうか。
navigation.buttonOptions.enabled: チャート内のすべてのナビゲーションのボタンをクリックできるかどうか。
plotOptions.area.allowPointSelect: データポイントのクリックを許可するかどうか。
plotOptions.area.color: プロットの色。
plotOptions.area.dataLabels.enabled: データラベルを許可するかどうか。
plotOptions.area.enableMouseTracking: データチャート内のデータポイントのマウス追跡バブルの表示を許可するかどうか。
plotOptions.area.events.checkboxClick: データチャートの凡例のチェックボックスのクリックイベント。
plotOptions.area.events.click: データチャート内のデータポイントのクリックイベント。
plotOptions.area.events.hide: 特定のデータ系列がデータチャートで非表示になったときのイベント。
plotOptions.area.events.show: 特定のデータ系列がデータチャートに表示されるときのイベント。
plotOptions.area.events.legendItemClick: データチャートでは、凡例内の項目をクリックするとイベントが発生します。 false が直接割り当てられている場合、その項目はクリックできません。
plotOptions.area.events.mouseOut: データポイントのマウスアウトイベント。
plotOptions.area.events.mouseOver: データポイントのマウスオーバーイベント。
plotOptions.area.marker.enabled: チャートのプロットにポイントマーカーを表示するかどうか。
plotOptions.area.marker.states.hover.enabled: マーカーのマウスオーバー状態を許可するかどうか。
plotOptions.area.marker.states.select.enabled: マーカーの選択状態を許可するかどうか。
plotOptions.area.point.events.click: チャート内の個々のポイントクリックイベント。
plotOptions.area.point.events.mouseOut
plotOptions.area.point.events..mouseOver
plotOptions.area.point.events.remove: チャート内のポイントを削除するときのイベント。
plotOptions.area.point.events.select: チャートポイントの選択イベント。
plotOptions.area.point.events.unselect: チャート内のポイントの選択が解除されたときのイベント。
plotOptions.area.point.events.update: チャート内のデータが更新されたときのイベント。
plotOptions.area.visible: ロード時に、データ系列がデフォルトで表示されるか非表示になるか。
plotOptions.area.zIndex: 複数のシーケンスの場合、各シーケンスの重なり順を調整します。
上記の point.events は、他の面グラフ (arearange、areaspline、areasplinerange)、他のヒストグラム (棒、縦棒)、およびすべてのグラフにも適用できます。
plotOptions.area.showInLegend: 凡例に表示するかどうか。
plotOptions.area.stacking: 値またはパーセンテージでスタックするかどうか。
plotOptions.area.states.hover.enabled: マウスが置かれている状態が許可されるかどうか。
plotOptions.area.stickyTracking: マウスのスティッキー追跡データポイント。
plotOptions.arearange、plotOptions.areaspline、plotOptions.areasplinerange は、plotOptions.area
plotOptions.bar.groupPadding: ヒストグラムのグループ化の場合、各グループ間の間隔。
plotOptions.bar.grouping: データをグループ化するかどうか。
plotOptions.bar.minPointLength:: ポイント値がゼロの場合のポイントの最小長を定義します。
plotOptions.bar.showInLegend: 凡例に表示するかどうか。
plotOptions.bar.stacking: 値またはパーセント (標準/パーセント) でスタックするかどうか。
plotOptions.column、plotOptions.columnrange は、plotOptions.bar に似ています。
plotOptions.line 関連の設定は、plotOptions.area 設定に似ています。
plotOptions.pie.ignoreHiddenPoint: 円グラフで、凡例をクリックして特定のシーケンスが非表示になった後、円グラフ全体が 100% に再配分されますか、それとも元の画像に基づいてのみ非表示になりますか。ギャップを見せている。
plotOptions.pie.innerSize: 円グラフを描画するときに、円グラフの中心にどのくらいのスペースを残す必要があるか。
plotOptions.pie.slicedOffset:allowPointSelect と組み合わせて使用され、ポイントをクリックすると、対応するセクターが剥がされる距離を構成します。
plotOptions.pie の他の一般的な構成パラメーターは、plotOptions.area、plotOptions.scatter、plotOptions.series に似ており、plotOptions.spline の関連構成は、plotOptions.area 構成に似ています。
シリーズ: は配列です。
series.data.color: 特定のデータの色。
series.data.dataLabels: シーケンス内の特定のデータのデータラベル。
series.data.events は、plotOptions.area.point.events の関連構成に似ています。
series.data.marker は、plotOptions.area.marker の関連構成に似ています。
series.data.name: データポイントの名前を構成します。
series.data.sliced: 円グラフのセクターの分離距離を構成します。
series.data.x: ポイントの x 値。
series.data.y: 点の y 値。
series.name: データシリーズの名前。
series.stack: 積み重ねられたグループ化されたインデックス。
series.type: データ系列の表示タイプ。
series.xAxis、series.yAxis: 複数の座標軸を使用する場合、特定のシーケンスがどの座標軸に対応するかを指定します。
subtitle: チャートのサブタイトルを設定します。
title: チャートのタイトルを設定します。
ツールヒント: グラフ内のデータのバブルヒントを構成します。
tooltip.valueDecimals: 許可される小数点の数。
tooltip.percentageDecimals: パーセントに許可される小数点以下の桁数。
xAxis、yAxis 構成設定軸
allowDecimals: 軸で小数を許可するかどうか。
カテゴリ: 配列、座標軸の分類です。
plotLines: 主線を描画します。
tickColor: 目盛りの色。
tickInterval: スケールのステップ値。
labels.rotation: スケールラベルの回転度

Chart: グラフ領域オプション

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

メインチャート領域の境界線の幅かどうか影を設定するには、背景色backgroundColorを設定する必要があります。幅と高さが設定されていない場合、サイズは自動的に使用されます。マウスをドラッグしてズームし、x 軸または y 軸に沿ってズームします。次のように設定できます: 'x'、'y'、'xy'イベントコールバック、addSeriesメソッド、clickメソッド、loadメソッド、selectionメソッドなどのコールバック関数をサポートします。色: カラーオプション

パラメータ	説明	デフォルト値
backgroundColor	グラフ領域の背景色を設定	#FFFFFF
borderWidth	グラフの境界線の幅を設定	0
境界半径	設定チャート境界フィレット角度	5
renderTo	チャート配置用のコンテナ。通常は、HTMLにDIVを配置してDIV	null
defaultSeriesType	デフォルトのチャートタイプ行のid属性値を取得します、スプライン、エリア、エリアスプライン、列、棒、円、散布図	0
幅	チャートの幅、デフォルトの幅はチャートコンテナに従って適応されます	null
高さ	チャートの高さ、デフォルトはチャートコンテナに基づいています	null
margin	高さに適応します	null
margin	チャートと他の要素、配列（[0,0,0,0]など）の間の間隔を設定します	[null]
plotBackgroundColor	メインチャート領域の背景色、つまり、	plotBorderWidth
0		shadow
false		reflow
true		zoomType
''		events

カラーのカラーオプションは、チャートの配色を設定するために使用されます。

パラメータ説明グラフ、折れ線グラフ、縦棒グラフ、円グラフ、その他のグラフの色を配列形式で表示するために使用されます。

デフォルト値

color

配列

Highcharts はデフォルトで複数の配色を提供しています。色の種類よりも多くのグラフィックを表示する場合、追加のグラフィックは最初の配色から自動的に選択されます。カラースキームをカスタマイズするメソッド:

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

Title: タイトルオプション

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

パラメータ	説明	デフォルト値
テキスト	タイトルテキストの内容。	グラフのタイトル
整列	水平方向の整列。	center
verticalAlign	垂直方向の配置。	トップ
マージン	タイトルとサブタイトルの間のスペース、またはメインチャートの間隔。	15
floating	trueの場合、タイトルはメインチャート領域から逸脱し、x、y属性で使用できます。	false
style	CSS スタイルを設定します。	{カラー: '#3E576F', fontSize: '16px'}

字幕: 字幕オプション

字幕によって提供される属性オプションは、上記のタイトルオプションを参照できることに注意してください。字幕のデフォルトは「」、つまり空であるため、デフォルトでは字幕は表示されません。

xAxis: X 軸オプション

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

パラメータ	説明	デフォルト値
categories	X軸のカテゴリ名、配列を設定します。例: category: ['Apples'、'Bananas'、'Oranges']	[]
タイトル	X軸名はテキスト、有効、整列、回転、スタイル、その他の属性をサポートします
ラベル	各カテゴリ名のスタイル、フォーマッタ、角度回転などを設定しますX 軸上。	array
max	X 軸の最大値 (カテゴリが空の場合)、null の場合、最大値は X 軸データに基づく最大値と自動的に一致します。	null
min	X 軸の最小値 (カテゴリが空の場合)。null の場合、最小値は X 軸データに基づく最小値と自動的に一致します。	array
gridLineColor	グリッド(縦線)の色	#C 0C0C0
gridLineWidth	グリッド(縦線)の幅	1
ラインカラー	ベースラインカラー	# C0D0E0
lineWidth	ベースライン幅	0

yAxis: Y 軸オプション

Y 軸オプションは基本的に上記の xAxis オプションと同じであり、個別にリストされることはありません。上の表のパラメーター設定を参照してください。

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

データ列オプションは、グラフに表示されるデータに関連するプロパティを設定するために使用されます。

パラメータ	説明	デフォルト値
データ	グラフに表示されるデータ列は、配列または JSON 形式のデータです。例: data:[0, 5, 3, 5]、または data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]	''
name	はデータの名前を表示しますカラム。	''
type	データ列タイプ、エリア、エリアスプライン、バー、列、線、円、散布図、またはスプラインをサポート	line

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

plotOptions が使用されますチャート内のデータポイントに関連するプロパティを設定します。さまざまなグラフの種類に応じて、plotOptions のプロパティ設定は若干異なります。共通のオプションがリストされています。

パラメータ	説明	デフォルト値
enabled	データポイント上にデータを直接表示するかどうか	false
allowPointSelect	マウスの使用を許可するかどうかデータを選択するにはポイント	false
formatter	コールバック関数、書式設定されたデータの表示内容	formatter: function() {return this.y;}

ツールチップ: データポイントプロンプトボックス

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

パラメータ	説明	デフォルト値
enabled	プロンプトボックスを表示するかどうか	true
backgroundColor	プロンプトボックスの背景色を設定する	rgba(255, 255, 255, .85)
borderColor	プロンプトボックスの境界線の色。デフォルトでデータ列の色と自動的に一致します	auto
borderRadius	プロンプトボックスの丸角	5
shadow	プロンプトボックスを表示するかどうか Shadow	true
style	フォントの色など、プロンプトボックスのコンテンツスタイルを設定します。	color:'#333'
フォーマッタ	コールバック関数。出力プロンプトボックスの表示内容をフォーマットするために使用されます。返されたコンテンツは、<b>、<strong>、<i>、<em>、<br/>、<span>	2

凡例などの HTML タグをサポートします。 : 凡例オプション

legend は、凡例関連のプロパティを設定するために使用されます。

パラメータ	説明	デフォルト値
レイアウト	表示形式、水平水平と垂直垂直	水平
align	の配置をサポートします。	center
backgroundColor	凡例の背景色。	null
borderColor	凡例の境界線の色。	#909090
borderRadius	凡例境界線角度	5
有効	凡例を表示するかどうか	true
floating	フローティングして x と y に一致させることができるかどうか属性。	false
shadow	影を表示するかどうか	false
style	凡例コンテンツのスタイルを設定します	''

詳しくはhighcharts公式を参照してくださいウェブサイト英語ドキュメント: http://api.highcharts.com/highcharts

← ハイチャート構成構文

ハイチャートグラフ →

提出する