# 線形放射軸
線形放射スケールは、数値データをグラフ化するために使用されます。名前が示すように、線形補間を使用して、軸の中心に対する値の位置を決定します。
放射状線形スケールでは、以下の追加設定オプションが提供されています。
# 設定オプション
# 線形放射軸固有のオプション
名前空間: options.scales[scaleId]
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
animate | boolean | true | 中心からチャートのスケーリングをアニメーション化するかどうか |
angleLines | object | 角度線設定。 詳細... | |
beginAtZero | boolean | ブール値 | false |
trueの場合、スケールに0が含まれていない場合は0が含まれます。 | object | pointLabels | |
startAngle | number | 0 | スケールの開始角度。度単位で、0は上部です。 |
# すべての軸に共通のオプション
名前空間: options.scales[scaleId]
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
type | string | 使用されているスケールの種類。カスタムスケールを作成し、文字列キーで登録できます。これにより、チャートの軸の種類を変更できます。 | |
alignToPixels | boolean | ブール値 | ピクセル値をデバイスピクセルに合わせる。 |
backgroundColor | Color | スケール領域の背景色。 | |
display | boolean |string | true | 軸のグローバルな可視性を制御します(`true`のときは表示、`false`のときは非表示)。 `display:'auto'`の場合、軸は少なくとも1つの関連付けられたデータセットが表示されている場合にのみ表示されます。 |
grid | object | グリッド線設定。 詳細... | |
min | number | スケールのユーザー定義の最小数。データの最小値をオーバーライドします。 詳細... | |
max | number | スケールのユーザー定義の最大数。データの最大値をオーバーライドします。 詳細... | |
reverse | boolean | ブール値 | ブール値 |
stacked | boolean |string | ブール値 | ブール値 |
suggestedMax | number | 最大データ値の計算に使用される調整。 詳細... | |
suggestedMin | number | 最小データ値の計算に使用される調整。 詳細... | |
ticks | object | 目盛設定。 詳細... | |
weight | number | 0 | number |
# 目盛設定
# 線形放射軸固有の目盛オプション
名前空間: options.scales[scaleId].ticks
名前 | タイプ | スクリプト可能 | デフォルト | 説明 |
---|---|---|---|---|
count | number | はい | undefined | 生成する目盛の数。指定した場合、自動生成はオーバーライドされます。 |
format | object | はい | デフォルトのラベルフォーマッターで使用される `Intl.NumberFormat` (新規ウィンドウで開きます)オプション | |
maxTicksLimit | number | はい | 11 | 表示する目盛とグリッド線の最大数。 |
precision | number | はい | number | |
stepSize | number | はい | number |
# すべての軸に共通の目盛オプション
名前空間: options.scales[scaleId].ticks
名前 | タイプ | スクリプト可能 | デフォルト | 説明 |
---|---|---|---|---|
backdropColor | Color | はい | 'rgba(255, 255, 255, 0.75)' | ラベルの背景色。 |
backdropPadding | Padding | 2 | ラベルの背景のパディング。 | |
callback | function | 目盛値の文字列表現を、チャートに表示される形式で返します。 コールバックを参照してください。 | ||
display | boolean | true | trueの場合、目盛ラベルを表示します。 `display:'auto'`の場合、ラベルは、別のラベルと重なる場合は非表示になります。 | |
color | Color | はい | Chart.defaults.color | 目盛の色。 |
font | Font | はい | Chart.defaults.font | フォントを参照してください |
major | object | {} | object. | |
padding | number | 3 | number | |
showLabelBackdrop | boolean | はい | true 放射スケールの場合、それ以外の場合はfalse | trueの場合、目盛ラベルの背後に背景を描画します。 |
textStrokeColor | Color | はい | `` | Color |
textStrokeWidth | number | はい | 0 | number |
z | number | 0 | number |
スクリプト可能なコンテキストについては、オプションセクションで説明されています。
# グリッド線設定
名前空間: `options.scales[scaleId].grid`。軸のグリッド線のオプションを定義します。
名前 | タイプ | スクリプト可能 | インデックス可能 | デフォルト | 説明 |
---|---|---|---|---|---|
borderDash | number[] | [] | グリッド線の破線の長さ間隔。MDN (新規ウィンドウで開きます)を参照してください。 | ||
borderDashOffset | number | はい | 0.0 | number | |
circular | boolean | ブール値 | boolean | ||
color | Color | はい | はい | color | Chart.defaults.borderColor |
display | boolean | true | display | ||
lineWidth | number | はい | はい | 1 | グリッド線のストローク幅。 |
スクリプト可能なコンテキストについては、オプションセクションで説明されています。
# 軸範囲設定
軸範囲設定の数値が与えられた場合、それらがすべてどのように相互作用するかを理解することが重要です。
`suggestedMax`と`suggestedMin`の設定は、軸のスケーリングに使用されるデータ値のみを変更します。これらは、自動フィット動作を維持しながら、軸の範囲を拡張するのに役立ちます。
let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);
この例では、最大の正の値は50ですが、データの最大値は100に拡張されています。ただし、最小データ値は`suggestedMin`設定よりも小さいため、無視されます。
let chart = new Chart(ctx, {
type: 'radar',
data: {
datasets: [{
label: 'First dataset',
data: [0, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
r: {
suggestedMin: 50,
suggestedMax: 100
}
}
}
});
`suggested *`設定とは対照的に、`min`と`max`の設定は、軸の明示的な終端を設定します。これらが設定されている場合、一部のデータポイントが表示されないことがあります。
# ステップサイズ
設定されている場合、スケールの目盛は`stepSize`の倍数で列挙され、増分ごとに1つの目盛が付けられます。設定されていない場合、目盛は、適切な数値アルゴリズムを使用して自動的にラベル付けされます。
この例では、`0、0.5、1、1.5、2、2.5、3、3.5、4、4.5、5`に目盛を作成するy軸を持つチャートを設定します。
let options = {
scales: {
r: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
}
}
};
# 角度線オプション
次のオプションは、チャートの中心からポイントラベルまで放射状に広がる角度線を設定するために使用されます。名前空間: `options.scales[scaleId].angleLines`
名前 | タイプ | スクリプト可能 | デフォルト | 説明 |
---|---|---|---|---|
display | boolean | true | display | |
color | Color | はい | color | color |
lineWidth | number | はい | 1 | lineWidth |
borderDash | number[] | borderDash | [] | Yes1 |
borderDashOffset | number | はい | 0.0 | number |
- 1 `borderDash`設定は、静的な値または関数のみを受け入れます。配列の配列を渡すことはサポートされていません。
スクリプト可能なコンテキストについては、オプションセクションで説明されています。
# ポイントラベルオプション
次のオプションは、スケールの周囲に表示されるポイントラベルを設定するために使用されます。名前空間: `options.scales[scaleId].pointLabels`
名前 | タイプ | スクリプト可能 | デフォルト | 説明 |
---|---|---|---|---|
backdropColor | Color | true | undefined | backgroundColor |
backdropPadding | Padding | 2 | ラベルの背景のパディング。 | |
borderRadius | number |object | true | 0 | ポイントラベルの境界線の半径 |
display | boolean |string | true | display | |
callback | function | callback | ||
color | Color | はい | Chart.defaults.color | color |
font | Font | はい | Chart.defaults.font | フォントを参照してください |
padding | number | はい | 5 | padding |
centerPointLabels | boolean | ブール値 | boolean |
スクリプト可能なコンテキストについては、オプションセクションで説明されています。
# 内部データ形式
内部的には、線形放射スケールは数値データを使用します