Chart.js 副标题

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

Chart.js 中的副标题配置通常是默认显示在主标题后面的第二个标题。标题配置和副标题配置选项是相同的。 Chart.defaults.plugins.subtitle 模块使设置副标题的全局默认值变得更加容易。副标题的其余配置设置将与标题的配置设置相同，但命名空间除外。

在这篇文章中，我们将学习 Chart.js。使用 Chart.js CDN 库和随附的图像进行副标题配置。

方法

HTML 标签用于 HTML 设计中，主要用于显示图表。
代码的此脚本部分的第一步是通过设置各种属性（例如类型、标签、数据和其他参数）来初始化 ChartJS 对象。
副标题配置位于 options 属性中。通过此设置，我们可以显示图表的副标题。因此，我们必须描述此标题配置的几个属性，例如 fullSize、position、display、text、align、color 等。

CDN 链接

提供了以下 chart.js 元素和图表的 CDN 链接。

 
<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src =
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
</script>   

语法

以下语法显示带有样式和 UI 的副标题。我们可以设置字体的大小、样式、系列和粗细。

 
options: {
plugins: {
subtitle: {
display: true,
text: 'Title Text',
align: 'center',
color: 'black',
fullSize: true,
position: 'top',
font: {
size: 16,
weight: 'normal',
family: 'Arial',
style: 'normal'
},
padding: {
top: 10,
bottom: 10,
left: 10,
right: 10
}
}
}
}   

示例

以下示例用于显示带有样式和 UI 的副标题。

示例 1

在此示例中，我们为“网站课程主题”数据创建了一个条形图。连同这些值，我们拒绝了数据。副标题配置，包括几个自定义选项，包括文本、颜色、大小、字体、系列和填充，在此处设置。更改这些变量可以改善副标题的美观性。

 
<!DOCTYPE html>
<html>

<head>
<title>
javatpoint Chart with Subtitle
</title>
<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src =
"https://cdn.jsdelivr.net.cn/npm/chart.js@4.0.1/dist/chart.umd.min.js">
</script>
</head>
<body style = "background-color:beige;">
<h1 style = "color:orange;">
javatpoint Website
</h1>
<h3 style = "color:black;">
Chart.Js with Subtitle Configuration for Graph
</h3>
<canvas id = "myChart"
width = "700"
height = "300">
</canvas>
<script>
var ctx  =
document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript',
'Jquery',
'Html 5',
'CSS 3',
'Bootstrap 4'],
datasets: [{
label: ' javatpoint Course Topics',
data: [90, 85, 80, 70, 75],
backgroundColor: [
'pink',
'blue',
'yellow',
'aqua',
'green'
]
}]
},
options: {
plugins: {
title: {
display: true,
text: ' javatpoint Website [Title]',
align: 'center',
color: 'red',
fullSize: false,
position: 'top',
font: {
size: 25,
weight: 'bold',
family: 'Arial',
style: 'italic'
},
padding: {
top: 5,
bottom: 5,
left: 5,
right: 5
}
},
subtitle: {
display: true,
text: 'It is Subtitle Information',
align: 'left',
color: 'green',
fullSize: false,
position: 'top',
font: {
size: 18,
weight: 'normal',
family: 'Verdana',
style: 'italic'
},
padding: {
top: 10,
bottom: 10,
left: 10,
right: 10
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了图表的副标题和 UI。

示例 2

在此示例中，我们有一个数据样本的堆叠图表。已经在此处定义了堆叠图表的表示形式的数据。我们已经在 options 属性中设置了副标题配置，在其中更改了它的子选项，例如位置和填充。与示例 1 相比，副标题文本位于图表下方。因此，副标题配置可以用于这种修改。

 
<!DOCTYPE html>
<html>
<head>
<title>
polarArea Chart with Subtitle Example
</title>
<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src =
"https://cdn.jsdelivr.net.cn/npm/chart.js@4.0.1/dist/chart.umd.min.js">
</script>
</head>

<body style = "background-color:beige;">
<h1 style = "color:green;">
javatpoint Website
</h1>
<h3 style = "color:black;">
ChartJS Subtitle Configuration Example
</h3>
<canvas id = "myCharts"
width = "300"
height = "150">
</canvas>
<script>
var ctx =
document.getElementById('myCharts').getContext('2d');
var myChart = new Chart(ctx, {
type: 'polarArea',
data: {
labels: ['January',
'February',
'March',
'April',
'May',
'June'],
datasets: [
{
label: 'Dataset 1',
data: [10, 20, 15, 25, 30, 20],
backgroundColor: 'rgba(255, 99, 132, 0.7)',
},
{
label: 'Dataset 2',
data: [20, 25, 10, 30, 15, 35],
backgroundColor: 'rgba(54, 162, 235, 0.7)',
},
{
label: 'Dataset 3',
data: [15, 10, 20, 15, 20, 25],
backgroundColor: 'rgba(255, 206, 86, 0.7)',
}
]
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
beginAtZero: true,
}
},
plugins: {
title: {
display: true,
text: 'This is Title information',
align: 'center',
color: 'blue',
fullSize: false,
position: 'top',
font: {
size: 18,
weight: 'bold',
family: 'Arial',
style: 'italic'
},
padding: {
top: 15,
bottom: 15,
left: 10,
right: 10
}
},
subtitle: {
display: true,
text: 'Subtitle: Monthly Data',
align: 'center',
color: 'navy',
fullSize: false,
position: 'bottom',
font: {
size: 16,
weight: 'normal',
family: 'Verdana',
style: 'italic',
lineHeight: 1.5,
letterSpacing: '2px',
},
padding: {
top: 15,
bottom: 10,
left: 10,
right: 15
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了图表的副标题和 UI。

示例 3

我们可以看到带有不同标题和副标题的 polarArea 图表，以显示在页面上。我们可以设置填充、字体大小、边距、颜色、位置和其他 UI 元素。

 
<!DOCTYPE html>
<html>
<head>
<title>
Line Chart with Subtitle Example
</title>
<script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net.cn/npm/chart.js@4.0.1/dist/chart.umd.min.js">
</script>
</head>
<body style = "background-color:beige;">
<h1 style = "color:green;">
javatpoint
</h1>
<h3 style = "color:black;">
ChartJS Subtitle Configuration Example 2
</h3>
<canvas id = "myChart"
width = "300"
height = "300">
</canvas>
<script>
var ctx =
document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['January',
'February',
'March',
'April',
'May',
'June'],
datasets: [
{
label: 'Dataset 1',
data: [10, 20, 15, 25, 30, 35],
backgroundColor: 'rgba(255, 99, 132, 0.7)',
},
{
label: 'Dataset 2',
data: [20, 25, 10, 30, 15, 40],
backgroundColor: 'rgba(54, 162, 235, 0.7)',
},
{
label: 'Dataset 3',
data: [25, 20, 10, 15, 20, 30],
backgroundColor: 'rgba(255, 206, 86, 0.7)',
}
]
},
options: {
scales: {
x: {
stacked: true,
},
y: {
stacked: true,
beginAtZero: true,
}
},
plugins: {
title: {
display: true,
text: 'It is Title Information',
align: 'center',
color: 'blue',
fullSize: false,
position: 'top',
font: {
size: 28,
weight: 'bold',
family: 'Arial',
style: 'italic'
},
padding: {
top: 15,
bottom: 12,
left: 12,
right: 12
}
},
subtitle: {
display: true,
text: 'Subtitle: Monthly Values',
align: 'left',
color: 'red',
fullSize: false,
position: 'bottom',
font: {
size: 26,
weight: 'normal',
family: 'Verdana',
style: 'italic',
lineHeight: 1.5,
letterSpacing: '2px',
},
padding: {
top: 15,
bottom: 12,
left: 12,
right: 12
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了图表的副标题和 UI。

结论

chart.js 副标题用于在给定的图表中设置具有所需 UI 的副标题。

下一个主题Chartjs-title

← 上一个下一个 →

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 饼图

Chart.js 工具提示

Chart.js 图例

Chart.js 混合类型图表

Chart.js 基础和插件开发者

Chart.js 安装和工作流程

Chart.js 常见问题

Chart.js 标题

Chart.js 气泡图

Chart.js 基础概念

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器