#伝説
グラフの凡例には、グラフに表示されているデータセットに関するデータが表示されます。
#構成オプション
名前空間: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 | キャンバスのデフォルト | これによりテキストの方向が強制されます'rtl' また'ltr' キャンバス上で指定された CSS に関係なく、凡例をレンダリングするためにキャンバス上に |
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 | Color | Chart.defaults.color | ラベルの色と取り消し線。 |
font | Font | Chart.defaults.font | 見るフォント |
padding | number | 10 | カラーボックスの行間のパディング。 |
generateLabels | function | 凡例内の各項目の凡例項目を生成します。デフォルトの実装は、カラー ボックスのテキストとスタイルを返します。見るレジェンドアイテム詳細については。 | |
filter | function | null | 凡例から凡例項目をフィルターします。 2 つのパラメータを受け取ります。レジェンドアイテムそしてチャートデータ。 |
sort | function | null | 凡例項目を並べ替えます。タイプは:bf319e07-c8b8-4464-8b48-d6701f61fb37。 3 つのパラメータを受け取ります (2 つ)レジェンドアイテムそしてチャートデータ。関数の戻り値は、2 つの凡例項目パラメーターの順序を示す数値です。順序は一致します戻り値 (新しいウィンドウが開きます)のArray.prototype.sort() |
pointStyle | pointStyle | 'circle' | 指定した場合、このスタイルの点が凡例に使用されます。次の場合にのみ使用されますusePointStyle それは本当です。 |
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 | undefined | 使用する borderRadius をオーバーライドします。 |
#凡例タイトルの構成
名前空間:options.plugins.legend.title
名前 | タイプ | デフォルト | 説明 |
---|---|---|---|
color | Color | Chart.defaults.color | テキストの色。 |
display | boolean | false | 凡例のタイトルが表示されます。 |
font | 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)'
}
}
}
}
});
#カスタムのクリック時アクション
凡例内の項目をクリックしたときに、異なる動作をトリガーしたい場合がよくあります。これは、config オブジェクトのコールバックを使用して簡単に実現できます。
デフォルトの凡例クリック ハンドラーは次のとおりです。
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 つのデータセットの表示設定がリンクされます。