Chart.js 图例

2025 年 5 月 17 日 | 4 分钟阅读

数据集的数据显示在 Chart.js 图例中。这种安排创建图表的标签。它确定高度、宽度、对齐方式、位置和呈现方式。本章介绍 “Chart.js 图例” 配置。

语法

命名空间 "options.plugins.legend" 用于 Chart.js 图例。该语法显示了图表元素的图例。

 
legend: {
display: true,
position: 'bottom',
labels: {
color: 'darkred',
}
}   

为了显示数据标签，图例的 "enabled" 参数需要为 true。
如果设置为 false，它将停用 "legend"。

示例

以下示例显示了 chart.js 图例。

示例 1

以下示例显示了 chart.js 图例。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with Legend </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
}],
},
options: {
responsive: false,
plugins: {
legend: {
display: true,
position: 'bottom',
labels: {
color: 'darkred'
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了基本图表图例功能。

示例 2

以下示例显示了 chart.js 图例，字体为粗体，且位于顶部位置。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with Legend </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
}],
},
options: {
responsive: false,
plugins: {
legend: {
display: true,
position: 'top',
labels: {
color: 'darkgreen',
font: {
weight: 'bold'
},
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了基本图表图例功能。

示例 3

以下示例显示了 chart.js 图例，字体为粗体，起始位置，且位于顶部位置。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with Legend </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "500"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
}],
},
options: {
responsive: false,
plugins: {
legend: {
display: true,
position: 'top',
labels: {
color: 'darkgreen',
align: 'start',
font: {
weight: 'bold'
},
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了基本图表图例功能。

示例 4

以下示例显示了 chart.js 图例，字体为粗体，起始位置，且位于左侧位置。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with Legend </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "800"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Front-End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 1,
}],
},
options: {
responsive: false,
plugins: {
legend: {
display: true,
position: 'left',
labels: {
color: 'darkgreen',
align: 'start',
font: {
weight: 'bold'
},
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了基本图表图例功能。

示例 5

以下示例显示了 chart.js 图例，字体为粗体，结束位置，且位于右侧位置。

 
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale = 1" />
<title> chart.js basic example </title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js basic chart with Legend </h1>
<canvas id = "chartData" aria-label = "chart" height = "500" width = "800"></canvas>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
<script>
var chrt = document.getElementById("chartData").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Front-End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 1,
}],
},
options: {
responsive: false,
plugins: {
legend: {
display: true,
position: 'right',
labels: {
color: 'darkgreen',
align: 'end',
font: {
weight: 'bold'
},
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了基本图表图例功能。

结论

图表图例是显示图表信息所必需的。

下一个主题Chartjs-数据抽取-配置

← 上一个下一个 →

Chart.js 图例

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Chart.js 教程

Chart.js 图例

语法

示例

结论

相关帖子

Chart.js 通用数据结构

如何在 ChartJS 中动态更新值

Chart.js 数据抽稀配置

如何在 Chart.js 中自定义图例

Chart.js 动画

Chart.js 副标题

Chart.js 交互

Chart.js API 开发者

Chart.js 基础概念

Chart.js 标题

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器