Chart.js UI 颜色

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

Chart.js 的颜色用于文本颜色、边框颜色和背景颜色。这种颜色提高了对图表数据元素的识别。它与 RGB、十六进制和颜色关键字兼容。在本章中，您将了解“Chart.js 颜色”类型的结构。图表支持三个颜色选项

您可以选择文本项目的字体颜色，并且
您可以更新几何元素的背景和边框颜色。
您可以更改整个画布的背景。

默认颜色

如果缺少特定颜色，则使用 Chart.defaults 中的全局默认颜色

名称	类型	描述	默认值
backgroundColor	颜色	设置图表元素的背景颜色	rgba(0, 0, 0, 0.1)
borderColor	颜色	设置图表元素的边框颜色	rgba(0, 0, 0, 0.1)
color	颜色	设置图表的字体颜色	#666

语法

Chart.js 显示图表或图形的每个元素的背景和边框颜色。我们可以根据用户需求为元素设置相同或不同的颜色。图表的颜色语法如下

 
data: [20, 40, 30, 35, 30],
backgroundColor: ['color_name', 'color_name', 'color_name', 'color_name', 'color_name'],
borderColor: ['color_name', 'color_name', 'color_name', 'color_name', 'color_name'],
color: 'color_name',   

示例

以下示例显示了图表背景颜色、边框颜色和字体颜色，以及画布的背景。

示例 1

以下示例显示了图表的背景和边框颜色。我们可以为图表的单个数据集设置颜色，并为元素的各个部分设置不同的颜色。

 
<!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 colors </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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,
},
});
</script>
</body>
</html>   

输出

输出显示了不同颜色的图表。

示例 2

以下示例显示了图表背景和边框的多种颜色。我们可以为图表的多个数据集设置颜色，并为元素的各个部分设置不同的颜色。

 
<!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 colors </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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,
},
{
label: "Online Front End Student",
data: [30, 40, 45, 50, 42, 25],
backgroundColor: ['yellow', 'aqua', 'lightgreen', 'lightblue', 'pink', 'gold'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
}
],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了不同颜色的图表。

示例 3

以下示例显示了图表的背景颜色和边框颜色的 RGB 颜色。我们可以使用 RGBA 颜色代码为背景和边框颜色设置相同颜色和不同的不透明度。

 
<!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 RGB colors </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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: [
'rgba(54, 162, 235, 0.3)',
'rgba(255, 99, 132, 0.3)',
'rgba(255, 206, 86, 0.3)',
'rgba(153, 102, 255, 0.3)',
'rgba(75, 192, 192, 0.3)',
'rgba(255, 159, 64, 0.3)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(153, 102, 255, 1)',
'rgba(75, 192, 192, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了不同颜色的图表。

示例 4

以下示例显示了图表的背景和边框颜色的十六进制颜色。我们可以为图表元素的背景和边框设置具有颜色和不透明度的颜色。

 
<!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 HEX colors </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "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: [
'#ff0000',
'#0000ff',
'#ee82ee',
'#3cb371',
'#ffa500',
'#3c3c3c'
],
borderColor: [
'#3c3c3c',
'#ffa500',
'#3cb371',
'#ee82ee',
'#0000ff',
'#ff0000'
],
borderWidth: 2,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>   

输出

输出显示了不同颜色的图表。

示例 5

以下示例显示了图表的背景和边框的颜色。

 
<!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 colors </h1>
<canvas id = "chartData" aria-label = "chart" heigth = "500" width = "500" style="background-color:lightgrey;"></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,
},
});
</script>
</body>
</html>   

输出

输出显示了不同颜色的图表。

结论

Chart.js 框架用于选项、颜色和其他图表的可访问性。在这里，我们可以为图表元素设置不同的颜色和不透明度。

下一主题Chartjs-font-configuration

← 上一主题下一主题 →

Chart.js UI 颜色

默认颜色

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 UI 颜色

默认颜色

语法

示例

结论

相关帖子

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

Chart.js 气泡图

Chart.js 数据抽稀配置

Chart.js 标题

Chart.js 条形图

Chart.js 交互

Chart.js 极地区域图

Chart.js 雷达图

Chart.js 通用数据结构

Chart.js 安装和工作流程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器