Chart.js - にほんご。

Legend Configuration

更新日: 2018-06-25

チャートの凡例は、チャートに表示されるデータのデータセットの情報を表示します。

設定

凡例設定は名前空間options.legendに渡されます。 グローバルオプションはChart.defaults.global.legendで定義されています。

名称type初期値説明
displaybooleantrue凡例を表示するかどうか。
positionstringtop凡例の表示位置。詳細はこちら
fullWidthbooleantrue凡例を横幅100%で指定するかどうか。(他のボックスは下に押し下げられます。) 通常利用の場合、この設定は変更不要です。
onClickfunctionラベルにクリックイベントが登録された時に呼び出されます。
onHoverfunctionラベルに'mousemove'イベントが登録された時に呼び出されます。
reversebooleanfalse凡例を逆順で表示します。
labelsobject凡例ラベル設定を確認してください。

position

凡例の表示位置を指定します。以下を指定することができます。

  • top
  • left
  • bottom
  • right

凡例ラベル設定

凡例ラベル設定はlabelオプションのサブオプションです。

名称type初期値説明
boxWidthnumber40カラーボックスの幅。
fontSizenumber12フォントサイズ。
fontStylestringnormalフォントスタイル。
fontColorcolor#666文字色。
fontFamilystring"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"凡例のフォント。
paddingnumber10カラーボックスの行間。
generateLabelsfunction各項目の凡例を生成します。 デフォルトはカラーボックスのテキストとテキストスタイルを返します。 詳細は凡例項目を確認してください。
filterfunctionnull凡例項目をフィルタリングします。 凡例項目と、チャートデータの2つのパラメータを受け取ります。
usePointStylebooleanfalseラベルスタイルをポイントスタイルに合わせます。 (この場合、サイズはfontoSizeに基いており、boxWidthは使用しません。)

凡例項目

凡例のonClickに渡される項目は、labels.generateLabelsから返される項目です。 それらの項目は以下のように設定する必要があります。

{
    // 表示するラベル
    text: String,
 
    // 凡例ボックスを塗りつぶす色
    fillStyle: Color,
 
    // trueの場合、非表示のデータセットになります。このデータのラベルには取り消し線が表示されます。
    hidden: Boolean,
 
    // 凡例とチャートの線のための設定です。
    // 参照:https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineCap 
    lineCap: String,
 
    // 凡例とチャートの線のための設定です。
    // 参照:https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: Array[Number],
 
    // 凡例とチャートの線のための設定です。
    // 参照:https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: Number,
 
    // 凡例とチャートの線のための設定です。
    // 参照:https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: String,
 
    // ボックスの枠線の太さ。
    lineWidth: Number,
 
    // 凡例ボックスの枠線のスタイル。
    strokeStyle: Color
 
    // 凡例のポイントのスタイル。(usePointStyleをtrueにした場合のみ。)
    pointStyle: String
}

以下は、凡例を有効化し、全ての文字色を赤にする例です。

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

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

凡例の項目をクリックした時に、別の動作を指定したい場合があります。 設定オブジェクトにコールバックを設定するだけで、簡単に実現できます。

デフォルトの凡例クリック時の動作は以下のとおりです。

onClick: 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を使うのが合理的です。 Chart.jsはプロトタイプにHTMLを返すgenerateLegend()メソッドを用意しています。

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

デモ1

チャートのラベルとラインを変更しています。

JavaScript

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets:[{
            type: 'line',
            label: "A",
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgb(54, 162, 235)",
            borderWidth: 1,
            borderDash: [1, 3],
            strokeStyle: "rgb(54, 162, 235)",
            pointStyle: 'triangle',
        },
        {
            type: 'line',
            label: "B",
            data: [55, 59, 70, 91, 26, 25, 70],
            backgroundColor: "rgba(255, 99, 132, 0.2)",
            borderColor: "rgb(255, 99, 132)",
            borderWidth: 1,
            borderDash: [5, 10],
            strokeStyle: "rgb(255, 99, 132)",
            pointStyle: 'rect',
        },
        {
            type: 'line',
            label: "C",
            data: [70, 43, 33, 62, 53, 93, 30],
            backgroundColor: "rgba(255, 206, 86, 0.2)",
            borderColor: "rgb(255, 206, 86)",
            borderWidth: 1,
            borderDash: [3, 15],
            strokeStyle: "rgb(255, 206, 86)",
            pointStyle: 'star',
        }]
    },
    options: {
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                boxWidth: 30,
                fontSize: 16,
                fontColor: '#333',
                padding: 20,
                filter: function(items, chartData) {
                    // データセットのインデックスが0(A)でないものを表示します。
                    return items.datasetIndex !== 0;
                },
                usePointStyle: true,
                generateLabels: function(chart){
                    return  chart.data.datasets.map(function(dataset, i) {
                        return {
                            // plugin.legend.js generateLabels.labelsを参照してください。
                            text: dataset.label,
                            fillStyle: dataset.backgroundColor,
                            hidden: dataset.hidden,
                            lineCap: dataset.borderCapStyle,
                            lineDash: dataset.borderDash,
                            lineDashOffset: dataset.borderDashOffset,
                            lineJoin: dataset.borderJoinStyle,
                            lineWidth: dataset.borderWidth,
                            strokeStyle: dataset.borderColor,
                            pointStyle: dataset.pointStyle,
                            // 以下はデータセットの表示をトグルする場合に使用します。
                            datasetIndex: i
                        };
                    });
                }
            }
        }
    }
});

© 2013 Chart.js is available under the MIT license

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