凡例設定

チャートの「凡例」(legend)には、チャート上のデータセットに関する情報が表示されます。

設定オプション

凡例の設定は options.legend名前空間に渡します。チャート凡例のグローバル設定は Chart.defaults.global.legendで定義されています。

位置

凡例の位置。指定できる値は次のとおりです。

• 'top'
• 'left'
• 'bottom'
• 'right'

凡例ラベル設定

凡例ラベル設定は、 labelsキーを使って凡例設定の下にネストされています。(訳注: options.legend.labelsなど。)

凡例項目インタフェース

凡例のonClick関数(訳注: options.legend.onClick)に渡すことのできる項目は、labels.generateLabelsから返される項目です。これらの項目は、次のインターフェイスを実装する必要があります。

{
    // 表示されるラベル
    text: String,

    // 凡例ボックスの塗りつぶしスタイル
    fillStyle: Color,

    //  trueの場合、この項目は非表示のデータセットを表します。ラベルは取り消し線を伴ってレンダリングされます
    hidden: Boolean,

    // ボックス枠用。次をご覧ください。https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
    lineCap: String,

    // ボックス枠用。次をご覧ください。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: Array[Number],

    // ボックス枠用。次をご覧ください。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: Number,

    // ボックス枠用。次をご覧ください。https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: String,

    // 枠線の幅
    lineWidth: Number,

    // 凡例ボックスのストロークスタイル
    strokeStyle: Color,

    // 凡例ボックスのポイントスタイル（usePointStyleがtrueの場合にのみ使用されます）
    pointStyle: String
}

(訳注: 記述はないですが、datasetIndex: Numberも返り値に含まれます。)

例

次の例では、凡例を有効にしてチャートを作成し、すべてのテキストを赤で表示します。

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
}
});

クリックアクションのカスタマイズ

凡例の項目をクリックしたときに、通常とは異なる動作をトリガしたい場合があります。これは、設定オブジェクトのコールバックを使用して簡単に実現できます。

デフォルトの凡例クリックハンドラ(click handler)は次のとおりです。

function(e, legendItem) {
    var index = legendItem.datasetIndex;
    var ci = this.chart;
    var meta = ci.getDatasetMeta(index);

    // controller.isDatasetVisible コメントを参照
    meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;

    // データセットを非表示にし、チャートを再レンダリングします
    ci.update();
}

この代わりに、最初の2つのデータセットの可視性(表示/非表示)をリンクさせたいとします。クリックハンドラを次のように変更します。

var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
    var index = legendItem.datasetIndex;

    if (index > 1) {
        // デフォルトの処理を実行する
        defaultLegendClickHandler(e, legendItem);
    } else {
        let ci = this.chart;
        [ci.getDatasetMeta(0),
         ci.getDatasetMeta(1)].forEach(function(meta) {
            meta.hidden = meta.hidden === null? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legend: {

        }
    }
});

このようにして、グラフの凡例をクリックした際に、最初の2つのデータセットの可視性(表示/非表示)をリンクさせることができます。

HTMLの凡例

場合によっては、非常に複雑な凡例が必要です。その場合、HTML凡例を生成することは理にかなっています。チャートはgenerateLegend()メソッドを備えており、凡例のHTML文字列を返します。(訳注: 例:var htmlString = myChart.generateLegend();)

この凡例の生成方法を設定するには、legendCallback設定プロパティを変更します。

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function(chart) {
            // ここでHTML文字列を返します。
        }
    }
});

legendCallbackは自動的に呼び出されないので、このメソッドを使用して凡例を作成するときは、コード内で generateLegend()を自分で呼び出す必要があります。