線形放射軸

線形スケールは、数値データのグラフ化に使用されます。この名前が示すように、データ値が軸上のどこに配置されるか決めるために線形補間が使用されます。

線形放射スケールでは、以下の追加設定オプションが用意されています。

設定オプション

軸には目盛、角度線(レーダーチャートで中心から外へ向かって表示される線)、点ラベル(レーダーチャートの端にあるラベル)の設定プロパティがあります。 次のセクションでは、これらのセクションの各プロパティを定義します。

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の場合は、目盛ラベルに背景を描画します。

軸範囲設定

軸の範囲を設定する際には、それらが互いにどのように相互作用するかを理解することが重要です。

suggestedMaxsuggestedMin設定は、軸をスケールするために使われるデータ値だけを変更します。これらは、自動フィット機能を維持しながら軸の範囲を拡張するのに便利です。

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~の設定とは対照的に、minmaxの設定は明示的な端を軸に設定します。これらを設定すると、一部のデータ点が表示されないことがあります。

刻み幅

設定されている場合、スケールの目盛は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' 点ラベルを描画する際に使用するフォントスタイル。

results matching ""

    No results matching ""