# 凡例
チャートの凡例には、チャートに表示されているデータセットに関するデータが表示されます。
# 設定オプション
名前空間: options.plugins.legend。チャートの凡例のグローバルオプションは、Chart.defaults.plugins.legend で定義されています。
警告
ドーナツ、パイ、および極座標エリアチャートは、凡例のデフォルトをオーバーライドします。これらのチャートタイプのオーバーライドを変更するには、オプションは Chart.overrides[type].plugins.legend で定義されます。
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
display | boolean | true | 凡例を表示するかどうか。 |
position | string | 'top' | 凡例の位置。詳細... |
align | string | 'center' | 凡例の配置。詳細... |
maxHeight | number | 凡例の最大高さ（ピクセル単位） | |
maxWidth | number | 凡例の最大幅（ピクセル単位） | |
fullSize | boolean | true | このボックスがキャンバスの幅/高さ全体を使用する必要があることを示します（他のボックスを移動します）。これは、日常の使用で変更する必要はほとんどありません。 |
onClick | function | ラベルアイテムでクリックイベントが登録されたときに呼び出されるコールバック。引数: [event, legendItem, legend]。 | |
onHover | function | ラベルアイテムの上に「mousemove」イベントが登録されたときに呼び出されるコールバック。引数: [event, legendItem, legend]。 | |
onLeave | function | 以前にホバーしたラベルアイテムの外側で「mousemove」イベントが登録されたときに呼び出されるコールバック。引数: [event, legendItem, legend]。 | |
reverse | boolean | false | 凡例はデータセットを逆順で表示します。 |
labels | object | 以下の「凡例ラベルの設定」セクションを参照してください。 | |
rtl | boolean | 凡例を右から左にレンダリングする場合は true。 | |
textDirection | string | キャンバスのデフォルト | これにより、キャンバスに指定されたCSSに関係なく、凡例をレンダリングするために、キャンバスのテキスト方向 'rtl' または 'ltr' が強制されます。 |
title | object | 以下の「凡例タイトルの設定」セクションを参照してください。 |
注
さらに視覚的なカスタマイズが必要な場合は、HTML凡例を使用してください。
# 位置
凡例の位置。オプションは次のとおりです。
'top''left''bottom''right''chartArea'
'chartArea' オプションを使用する場合、凡例の位置は現時点では設定できません。常にチャートの中央の左側に表示されます。
# 配置
凡例の配置。オプションは次のとおりです。
'start''center''end'
認識されない値の場合は 'center' がデフォルトです。
# 凡例ラベルの設定
名前空間: options.plugins.legend.labels
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
boxWidth | number | 40 | 色付きボックスの幅。 |
boxHeight | number | font.size | 色付きボックスの高さ。 |
color | 色 | Chart.defaults.color | ラベルと取り消し線の色。 |
font | フォント | Chart.defaults.font | フォントを参照 |
padding | number | 10 | 色付きボックスの行間のパディング。 |
generateLabels | function | 凡例内の各項目の凡例アイテムを生成します。デフォルトの実装では、カラーボックスのテキストとスタイルが返されます。詳細については、凡例アイテムを参照してください。 | |
filter | function | null | 凡例から凡例アイテムをフィルタリングします。凡例アイテムとチャートデータの2つのパラメータを受け取ります。 |
sort | function | null | 凡例アイテムをソートします。タイプは sort(a: LegendItem, b: LegendItem, data: ChartData): number; です。2つの凡例アイテムとチャートデータの3つのパラメータを受け取ります。関数の戻り値は、2つの凡例アイテムパラメータの順序を示す数値です。順序は Array.prototype.sort() の 戻り値 (新しいウィンドウで開きます) と一致します。 |
pointStyle | pointStyle | 'circle' | 指定した場合、このスタイルのポイントが凡例に使用されます。usePointStyle がtrueの場合のみ使用されます。 |
textAlign | string | 'center' | ラベルテキストの水平方向の配置。オプションは、'left'、'right'、または 'center' です。 |
usePointStyle | boolean | false | ラベルスタイルは対応するポイントスタイルと一致します（サイズは pointStyleWidth または boxWidth と font.size の間の最小値に基づきます）。 |
pointStyleWidth | number | null | usePointStyle がtrueの場合、凡例に使用されるポイントスタイルの幅。 |
useBorderRadius | boolean | false | ラベルのborderRadiusは対応するborderRadiusと一致します。 |
borderRadius | number | 未定義 | 使用するborderRadiusをオーバーライドします。 |
# 凡例タイトルの設定
名前空間: options.plugins.legend.title
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
color | 色 | Chart.defaults.color | テキストの色。 |
display | boolean | false | 凡例のタイトルを表示するかどうか。 |
font | フォント | Chart.defaults.font | フォントを参照 |
padding | Padding | 0 | タイトルの周りのパディング。 |
text | string | 文字列のタイトル。 |
# 凡例アイテムインターフェース
凡例の onClick 関数に渡されるアイテムは、labels.generateLabels から返されたアイテムです。これらのアイテムは、次のインターフェースを実装する必要があります。
{
// Label that will be displayed
text: string,
// Border radius of the legend item.
// Introduced in 3.1.0
borderRadius?: number | BorderRadius,
// Index of the associated dataset
datasetIndex: number,
// Fill style of the legend box
fillStyle: Color,
// Text color
fontColor: Color,
// If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
hidden: boolean,
// For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
lineCap: string,
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
lineDash: number[],
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
lineDashOffset: number,
// For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
lineJoin: string,
// Width of box border
lineWidth: number,
// Stroke style of the legend box
strokeStyle: Color,
// Point style of the legend box (only used if usePointStyle is true)
pointStyle: string | Image | HTMLCanvasElement,
// Rotation of the point in degrees (only used if usePointStyle is true)
rotation: number
}
# 例
次の例では、凡例が有効になり、すべてのテキストの色が赤になるチャートが作成されます。
const chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
plugins: {
legend: {
display: true,
labels: {
color: 'rgb(255, 99, 132)'
}
}
}
}
});
# カスタムのクリック時のアクション
凡例のアイテムをクリックしたときに異なる動作をトリガーしたい場合があるかもしれません。これは、設定オブジェクトのコールバックを使用することで簡単に実現できます。
デフォルトの凡例クリックハンドラーは
function(e, legendItem, legend) {
const index = legendItem.datasetIndex;
const ci = legend.chart;
if (ci.isDatasetVisible(index)) {
ci.hide(index);
legendItem.hidden = true;
} else {
ci.show(index);
legendItem.hidden = false;
}
}
代わりに、最初の2つのデータセットの表示をリンクさせたいとします。クリックハンドラーを適切に変更できます。
const defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
const pieDoughnutLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
const newLegendClickHandler = function (e, legendItem, legend) {
const index = legendItem.datasetIndex;
const type = legend.chart.config.type;
if (index > 1) {
// Do the original logic
if (type === 'pie' || type === 'doughnut') {
pieDoughnutLegendClickHandler(e, legendItem, legend)
} else {
defaultLegendClickHandler(e, legendItem, legend);
}
} else {
let ci = legend.chart;
[
ci.getDatasetMeta(0),
ci.getDatasetMeta(1)
].forEach(function(meta) {
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
});
ci.update();
}
};
const chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
plugins: {
legend: {
onClick: newLegendClickHandler
}
}
}
});
これで、このチャートの凡例をクリックすると、最初の2つのデータセットの表示がリンクされます。