線形放射軸
線形スケールは、数値データのグラフ化に使用されます。この名前が示すように、データ値が軸上のどこに配置されるか決めるために線形補間が使用されます。
線形放射スケールでは、以下の追加設定オプションが用意されています。
設定オプション
軸には目盛、角度線(レーダーチャートで中心から外へ向かって表示される線)、点ラベル(レーダーチャートの端にあるラベル)の設定プロパティがあります。 次のセクションでは、これらのセクションの各プロパティを定義します。
Name | Type | Description |
---|---|---|
angleLines |
Object |
角度線の設定。詳細... |
gridLines |
Object |
グリッド線の設定。詳細... |
pointLabels |
Object |
点ラベルの設定。詳細... |
ticks |
Object |
目盛線の設定。詳細... |
目盛線設定
以下のオプションは、この線形スケールで使用することができます。これらはすべてticks
サブオプションにあります。共通の目盛設定オプションはこの軸でサポートされています。
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
backdropColor |
Color |
'rgba(255, 255, 255, 0.75)' |
ラベルの背景色。 |
backdropPaddingX |
Number |
2 |
ラベル背景の水平パディング。 |
backdropPaddingY |
Number |
2 |
ラベル背景の垂直パディング。 |
beginAtZero |
Boolean |
false |
trueの場合、スケールにまだ含まれていない場合は、0が含まれます。 |
min |
Number |
ユーザー定義のスケールの最小数で、データの最小値を上書きします。詳細... | |
max |
Number |
ユーザー定義のスケールの最大数で、データの最大値を上書きします。詳細... | |
maxTicksLimit |
Number |
11 |
表示する目盛線とグリッド線の最大数。 |
precision |
Number |
これが定義されており、stepSize が定義されていない場合は、ステップサイズは、小数部分の桁数がこの値になるように丸められます。(訳注: 3なら12.345などと丸められます。) |
|
stepSize |
Number |
ユーザー定義のスケールの固定刻み幅。詳細... | |
suggestedMax |
Number |
最大データ値を計算するときに使用される調整値。詳細... | |
suggestedMin |
Number |
最小データ値を計算するときに使用される調整値。詳細... | |
showLabelBackdrop |
Boolean |
true |
trueの場合は、目盛ラベルに背景を描画します。 |
軸範囲設定
軸の範囲を設定する際には、それらが互いにどのように相互作用するかを理解することが重要です。
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: '1つ目のデータセット',
data: [0, 20, 40, 50]
}],
labels: ['1月', '2月', '3月', '4月']
},
options: {
scale: {
ticks: {
suggestedMin: 50,
suggestedMax: 100
}
}
}
});
suggested~
の設定とは対照的に、min
と max
の設定は明示的な端を軸に設定します。これらを設定すると、一部のデータ点が表示されないことがあります。
刻み幅
設定されている場合、スケールの目盛はstepSizeの倍数で生成され、1つごとに目盛線が引かれます。設定されていない場合、目盛はnice numbersアルゴリズムを使用して自動的に付けられます。
この例では、 '0、0.5、1、1.5、2、2.5、3、3.5、4、4.5、5'に目盛線が引かれるy軸を持つチャートを設定します。
let options = {
scale: {
ticks: {
max: 5,
min: 0,
stepSize: 0.5
}
}
};
角度線設定
次のオプションを使用して、チャートの中心から点ラベルに向かって放射する角度線を設定することができます。これらは angleLines
サブオプションにあります。これらのオプションは、angleLines.display
がtrueの場合にのみ適用されることに注意してください。
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
display |
Boolean |
true |
trueの場合は、角度線が表示されます。 |
color |
Color |
rgba(0, 0, 0, 0.1) |
角度線の色。 |
lineWidth |
Number |
1 |
角度線の太さ。 |
点ラベル設定
次のオプションは、軸の周囲に表示される点ラベルを設定するために使用されます。これらは pointLabels
サブオプションにあります。これらのオプションは、pointLabels.display
がtrueの場合にのみ適用されることに注意してください。
名前 | 型 | 初期値 | 説明 |
---|---|---|---|
callback |
Function |
データラベルを点ラベルに変換するコールバック関数。デフォルトの実装は、単に現在の文字列を返します。 | |
fontColor |
Color/Color[] |
'#666' |
点ラベルのフォント色。 |
fontFamily |
String |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
ラベル描画に使用するフォントファミリ。 |
fontSize |
Number |
10 | フォントサイズ(ピクセル単位)。 |
fontStyle |
String |
'normal' |
点ラベルを描画する際に使用するフォントスタイル。 |