Chart.js - にほんご。

デカルト軸(CartesianAxes)

デカルト格子(矩形格子)に沿った軸は「デカルト軸」として知られています。 デカルト軸は、折れ線グラフ、棒グラフ、バブルチャートで使われます。 Chart.jsには以下の4種類のデカルト軸が用意されています。

設定オプション

全てにデカルト軸にはいくつかのオプションがサポートされています。

名称type初期値説明
typestring使用する軸タイプ。 カスタムスケールを作成して登録することができます。 これでチャートの軸タイプを変更することができます。
positionstringチャート内の軸の位置。 topleftbottomrightを指定することができます。
offsetbooleanfalsetrueの場合、両端に拡張スペースを追加し、軸をチャート内に合わせてスケールします。 棒グラフではtrueが初期値です。
idstringデータセットとスケール軸をリンクさせるIDを設定します。詳しくはこちら
gridLinesobjectグリッド線の設定。詳しくはこちら
scaleLabelobjectスケールのタイトル設定。詳しくはこちら
ticksobject目盛線設定。詳しくはこちら

目盛線設定

以下のオプションは、全てデカルト軸で共通ですが、他の軸では適用されません。

名称type初期値説明
autoSkipbooleantruetrueの場合、表示可能なラベル数を計算し、それに応じてラベルを非表示にします。 falseの場合、全てのラベルを表示します。
autoSkipPaddingnumber0autoSkipが有効な場合、横軸の目盛線間隔を埋めます。

注意:水平スケールの場合のみ適用されます。

labelOffsetnumber0目盛線の中心点からのラベルまでの(X軸のY方向と、Y軸のX方向の)オフセット(px)。

注意:この設定によっては端のラベルが切れてしまう場合があります。

maxRotationnumber90ラベルを回転して詰める場合の最大回転角度。

注意:不要な場合は回転しません。

注意:水平スケールの場合のみ適用されます。

minRotationnumber0ラベルの最低回転角度。

注意:水平スケールの場合のみ適用されます。

mirrorbooleanfalse目盛りラベルをチャートの外側ではなく、チャートの内側に表示します。

注意:垂直スケールの場合のみ適用されます。

paddingnumber10目盛りラベルと軸のスペースを指定します。 Y軸(垂直軸)を設定している場合、X方向(水平方向)に適用されます。 X軸(水平軸)を設定している場合、Y方向(垂直方向)に適用されます。

AxisID

dataset.xAxisIDプロパティとdataset.yAxisIDプロパティは、 スケールプロパティのscales.xAxes.idscales.yAxes.idに一致しなければなりません。 特に多軸チャートでは必須です。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // このデータセットは1つめの軸になります。
            yAxisID: 'first-y-axis'
        }, {
            // このデータセットは2つめの軸になります。
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            yAxes: [{
                id: 'first-y-axis',
                type: 'linear'
            }, {
                id: 'second-y-axis',
                type: 'linear'
            }]
        }
    }
});

多軸チャート

デカルト軸では、複数のX/Y軸を生成することができます。 複数の軸を生成するには、xAxesプロパティとyAxesプロパティに、 複数の設定オブジェクトを追加します。 新しい軸を追加する場合、デフォルトの軸タイプが適用されません。 そのため、新しい軸タイプを指定する必要があります。

以下の例では、2つのY軸を生成しています。 yAxisIDプロパティを使って、データセットに対して正しい軸を設定しています。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset'
 
            // データセットに'left-y-axis'を設定します。
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0]
            label: 'Right dataset'
 
            // データセットに'right-y-axis'を設定します。
            yAxisID: 'right-y-axis',
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            yAxes: [{
                id: 'left-y-axis',
                type: 'linear',
                position: 'left'
            }, {
                id: 'right-y-axis',
                type: 'linear',
                position: 'right'
            }]
        }
    }
});

© 2013 Chart.js is available under the MIT license

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