スタイリング

軸のスタイリングを可能にする多くのオプションがあります。グリッド線と目盛を制御する設定があります。

グリッド線の設定

グリッド線の設定はgridLinesキーにあり、スケール設定の下にネストされています。(訳注: options.scales.xAxes.gridLinesなど。)これは、軸に垂直に走るグリッド線のオプションを定義します。

名前	型	初期値	説明
`display`	`Boolean`	`true`	falseの場合、この軸にグリッド線を表示しない。
`circular`	`Boolean`	`false`	trueの場合は、レーダーチャートでグリッド線が円状になります。
`color`	`Color/Color[]`	`'rgba(0, 0, 0, 0.1)'`	グリッド線の色。配列として指定すると、最初の色は最初のグリッド線に、2番目の色は2番目のグリッド線に適用されます。
`borderDash`	`Number[]`	`[]`	グリッド線の長さとダッシュの間隔。MDNを参照してください。
`borderDashOffset`	`Number`	`0`	ラインダッシュのオフセット。MDNを参照してください。
`lineWidth`	`Number/Number[]`	`1`	グリッド線の線幅。
`drawBorder`	`Boolean`	`true`	trueの場合は、軸とグラフ領域の境界に境界線を描画します。
`drawOnChartArea`	`Boolean`	`true`	trueの場合は、軸線内のチャート領域に線を描画します。これは、複数の軸があり、描画するグリッド線を制御する必要がある場合に便利です。
`drawTicks`	`Boolean`	`true`	trueの場合は、グラフ軸領域の目盛線のそばに線を引きます。
`tickMarkLength`	`Number`	`10`	軸領域内で描画されるグリッド線の長さ(ピクセル単位)。
`zeroLineWidth`	`Number`	`1`	最初のインデックス（インデックス0）のグリッド線の線幅。
`zeroLineColor`	Color	`'rgba(0, 0, 0, 0.25)'`	最初のインデックス（インデックス0）のグリッド線の色。
`zeroLineBorderDash`	`Number[]`	`[]`	最初のインデックス（インデックス0）のグリッド線のダッシュの長さと間隔。MDNを参照してください。
`zeroLineBorderDashOffset`	`Number`	`0`	最初のインデックス（インデックス0）のグリッド線のラインダッシュのオフセット。MDNを参照してください。
`offsetGridLines`	`Boolean`	`false`	trueの場合、グリッド線はラベル間に移動します。これはカテゴリスケールの棒グラフでデフォルトで`true`に設定されています。

目盛の設定

目盛設定は ticksキーにあり、スケール設定の下にネストされています。軸によって生成される目盛のオプションを定義します。

名前	型	初期値	説明
`callback`	`Function`		チャートに表示される目盛値の文字列表現を返します。コールバックを参照してください。
`display`	`Boolean`	`true`	trueの場合、目盛を表示する。
`fontColor`	`Color`	`'#666'`	目盛ラベルのフォント色。
`fontFamily`	`String`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	目盛ラベルのフォントファミリ。CSSフォントファミリのオプションに従います。
`fontSize`	`Number`	`12`	目盛ラベルのフォントサイズ。
`fontStyle`	`String`	`'normal'`	目盛ラベルのフォントスタイル。CSSのフォントスタイルオプション(つまり、normal, italic, oblique, initial, inherit)に従います。
`reverse`	`Boolean`	`false`	目盛ラベルの順序を逆転させます。
`minor`	`object`	`{}`	副目盛の設定。省略されたオプションは上記のオプションから継承されます。
`major`	`object`	`{}`	主目盛の設定。省略されたオプションは上記のオプションから継承されます。

副目盛設定

副目盛の設定は minorキーにあり、目盛設定の下にネストされています。軸によって生成される副目盛のオプションを定義します。省略されたオプションはticks設定から継承されます。

名前	型	初期値	説明
`callback`	`Function`		チャートに表示される目盛値の文字列表現を返します。コールバックを参照してください。
`fontColor`	`Color`	`'#666'`	目盛ラベルのフォント色。
`fontFamily`	`String`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	目盛ラベルのフォントファミリ。CSSフォントファミリのオプションに従います。
`fontSize`	`Number`	`12`	目盛ラベルのフォントサイズ。
`fontStyle`	`String`	`'normal'`	目盛ラベルのフォントスタイル。CSSのフォントスタイルオプション(つまり、normal, italic, oblique, initial, inherit)に従います。

主目盛設定

主目盛の設定はmajorキーにあり、目盛設定の下にネストされています。軸によって生成される主目盛のオプションを定義します。省略されたオプションはticks設定から継承されます。

名前	型	初期値	説明
`callback`	`Function`		チャートに表示される目盛値の文字列表現を返します。コールバックを参照してください。
`fontColor`	`Color`	`'#666'`	目盛ラベルのフォント色。
`fontFamily`	`String`	`"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"`	目盛ラベルのフォントファミリ。CSSフォントファミリのオプションに従います。
`fontSize`	`Number`	`12`	目盛ラベルのフォントサイズ。
`fontStyle`	`String`	`'normal'`	目盛ラベルのフォントスタイル。CSSのフォントスタイルオプション(つまり、normal, italic, oblique, initial, inherit)に従います。

results matching ""

No results matching ""