Chart.js - にほんご。

Styling

更新日: 2018-11-08

軸のスタイルには多くのオプションがあります。 グリッドラインや、目盛線を制御する設定もあります。

グリッドライン設定

グリッドラインの設定は、スケール設定のgridLinesオプションのサブオプションです。 軸に対して垂直に走るグリッドラインのオプションを定義します。

名称type初期値説明
displaybooleantruefalseの場合、この軸ではグリッドラインを表示しません。
colorcolor, color[]rgba(0, 0, 0, 0.1)グリッドラインの色。 配列を指定した場合、最初の色が1本目のグリッドラインの色になり、 2つめの色が2本目の色になり、以降同様です。
borderDashnumber[][]線の長さとスペース間隔(ダッシュ構成)。 (MDNを参照してください。)
borderDashOffsetnumber0ダッシュのオフセット。 (MDNを参照してください。)
lineWidthnumber, number[]1グリッドラインの太さ。
drawBorderbooleantruetrueの場合、軸とチャート領域の間に境界線を表示します。
drawOnChartAreabooleantruetureの場合、軸線内のチャート領域にラインを表示します。 複数軸で描画するグリッドラインの制御が必要な場合に便利です。
drawTicksbooleantruetrueの場合、チャート横の軸線の横に目盛線を表示します。
tickMarkLengthnumber10軸領域に表示する目盛線の長さ(px)。
zeroLineWidthnumber1最初のインデックス(index 0)のグリッドラインのストローク幅。
zeroLineColorcolorrgba(0, 0, 0, 0.25)最初のインデックス(index 0)のグリッドラインの色。
zeroLineBorderDashnumber[][]最初のインデックス(index 0)のグリッドラインの長さとスペース間隔(ダッシュ構成)。 (MDNを参照してください。)
zeroLineBorderDashOffsetnumber0最初のインデックス(index 0)のグリッドラインのダッシュのオフセット。 (MDNを参照してください。)
offsetGridLinesbooleanfalsetrueの場合、グリッドラインを目盛ラベルの間に表示します。 棒グラフの場合、デフォルトはtrueです。

目盛線設定

目盛線の設定は、スケール設定のticksオプションのサブオプションです。 軸から生成される目盛線のオプションを定義します。

名称type初期値説明
callbackfunctionチャートに表示されるべき目盛の文字列を返します。 コールバックを参照して下さい。
displaybooleantruetrueの場合、目盛線を表示します。
fontColorcolor#666目盛ラベルの文字色。
fontFamilystring"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"目盛ラベルのフォント。
fontSizenumber12目盛ラベルのフォントサイズ。
fontStylestringnormal目盛ラベルのスタイル。(normal、italic、oblique、initial、inherit)
reversebooleanfalse目盛ラベルの順序を逆順にします。
minorobject{}マイナー目盛設定。必須オプションは、上記のオプションを引き継ぎます。
majorobject{}メジャー目盛設定。必須オプションは、上記のオプションを引き継ぎます。

マイナー目盛設定

マイナー目盛線の設定は、目盛線設定のminorオプションのサブオプションです。 軸から生成されるサブ目盛(補助線)のオプションを定義します。 省略されたオプションはticks設定から継承されます。

名称type初期値説明
callbackfunctionチャートに表示されるべき目盛の文字列を返します。 コールバックを参照して下さい。
fontColorcolor#666目盛ラベルの文字色。
fontFamilystring"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"目盛ラベルのフォント。
fontSizenumber12目盛ラベルの文字サイズ。
fontStylestringnormal目盛ラベルのフォントスタイル。(normal、italic、oblique、initial、inherit)

メジャー目盛設定

メジャー目盛線の設定は、目盛線設定のmajorオプションのサブオプションです。 軸から生成される目盛線(主線)のオプションを定義します。 省略されたオプションはticks設定から継承されます。

名称type初期値説明
callbackfunctionチャートに表示されるべき目盛の文字列を返します。 コールバックを参照して下さい。
fontColorcolor#666目盛ラベルの文字色。
fontFamilystring"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"目盛ラベルのフォント。
fontSizenumber12目盛ラベルのフォントサイズ。
fontStylestringnormal目盛ラベルのスタイル。(normal、italic、oblique、initial、inherit)

© 2013 Chart.js is available under the MIT license

このコンテンツはChart.jsドキュメントを翻訳/改変したものです。