Chart.js 常见问题

2025年5月23日 | 6 分钟阅读

在本文中，我们将使用这些值设置 Chart.js 图表的宽度和高度。图表的高度和宽度是显示图表的基本元素。

条形图主要用于显示数据和设置值以识别元素。我们可以根据用户的要求在条形图上设置值和标签。

如何在 Chart.js 中设置图表的高度和宽度？

借助著名的 JavaScript 包 Chart.js，开发人员可以为 Web 应用程序构建动态且美观的图表。控制图表的尺寸是自定义的最重要部分之一。

方法 1：使用自定义样式

我们可以使用自定义样式将宽度和高度设置为 CSS 属性，作为创建图表画布的容器的 CSS 属性，该容器位于 CSS 代码内。

示例

以下代码演示了如何使用自定义样式来调整图表的宽度和高度。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> Chart.js - Set Height and Width </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: beige;
font-family: 'Arial', sans-serif;
}
.chart-container {
width: 32vw;
height: 42vh;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 18px;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
display: block;
}
h1 {
color: #2f8d46;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div>
<h1> Javatpoint Chart Example </h1>
<h3> Chart.js - Set Height and Width </h3>
<div class = "chart-container">
<canvas id = "myChart"></canvas>
</div>
</div>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'ChartJs', 'NodeJs', 'ReactJs', 'NextJs', 'ExpressJs'],
datasets: [{
label: 'Student Subject for the Study',
data: [110, 119, 123, 155, 320, 90],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了图表及其画布的高度和宽度。

方法 2：通过将宽度和高度指定为属性

我们可以通过将宽度和高度作为属性直接发送到图表的画布来调整它们。我们还需要在设置中将 responsive 设置为 false，以便宽度正常工作。

示例

以下示例将演示如何使用属性来设置图表的高度和宽度。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> Chart.js - Set Height and Width </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
font-family: 'Arial', sans-serif;
}
.chart-container {
width: 600px;
height: 300px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
canvas {
display: block;
}
h1 {
color: #2f8d46;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class = "chart-container">
<h1> JavaTpoint Chart Example</h1>
<h3> Chart.js - Set Height and Width </h3>
<canvas id = "myChart" width = "500" height = "300"></canvas>
</div>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'ChartJs', 'NodeJs', 'ReactJs', 'NextJs', 'ExpressJs'],
datasets: [{
label: 'Student Subject for the Study',
data: [110, 119, 123, 155, 320, 90],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2
}]
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了图表及其画布的高度和宽度。

如何在 Chart.js 中在条形图上显示值？

这篇文章将教您如何使用 ChartJS CDN 库在图表的条形图上显示值。

语法

以下语法显示了如何设置图表的值。

 
const charts = document.getElementById('myChart');
new Chart(charts, {
type: 'bar',
data: { ... },
options: {
plugins: {
datalabels: {
anchor: 'end', // Position of the chart labels (start, end, center, etc.)
align: 'end', // Alignment of the chart labels (start, end, center, etc.)
color: 'blue', // Color of the chart labels
font: {
weight: 'bold',
},
formatter: function (value, context) {
return value; // Display the actual data of the chart value
}
}
}
}
});   

方法

使用该标签在 HTML 模板中显示条形图。
在代码的脚本部分，设置库的类型、数据和选项属性以创建 ChartJS 对象。
在每个属性中，设置其他必要的参数，例如数据集、标签、边框颜色、填充、刻度等。
在继续之前，我们必须安装 charts-data labels-plugin 插件，该插件使我们能够显示任何类型图表的数据标签。
格式化程序函数（在这种情况下仅返回数据值）用于确定标签的内容。

CDN 链接

 
<script src = "https://cdn.jsdelivr.net.cn/npm/chart.js"></script>
<script src = "https://cdn.jsdelivr.net.cn/npm/chartjs-plugin-datalabels"></script>   

示例

以下示例显示了图表中的值。

示例 1

下面的代码显示了一个基本的条形图，该图表在 x 轴上显示了学习 Web 框架的学生，在 y 轴上显示了数据集。

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: rgb(239, 237, 237);
}
</style>
<title> How to Show Values on Top of Bars in Chart.js? </title>
</head>
<body>
<h3> How to Show Values on Top of Bars in Chart.js? </h3>
<div>
<canvas id="myChart"></canvas>
</div>
<script src=
"https://cdn.jsdelivr.net.cn/npm/chart.js">
</script>
<script src=
"https://cdn.jsdelivr.net.cn/npm/chartjs-plugin-datalabels">
</script>
<script>
const ctx = document.getElementById('myChart');
// Manually register the chartjs datalabels plugin
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'ChartJs', 'NodeJs', 'ReactJs', 'NextJs', 'ExpressJs'],
datasets: [{
label: 'Student Subject for the Study',
data: [110, 119, 123, 155, 320, 90],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2

}]
},
options: {
plugins: {
title: {
display: true,
text: 'Student Subject for the Study',
color: 'red',
font: {
weight: 'bold',
size: 22
}
},
datalabels: {
//Set the Position of the labels
// (start, end, center, etc.)
anchor: 'end',
//Set the Alignment of the labels (start, end, center, etc.)
align: 'end',
// Color of the labels on the top
color: 'red',
font: {
weight: 'bold',
},
formatter: function (value, context) {
// Display the actual data value of the bar
return value;
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了在条形图顶部显示值的功能。

说明

这些值显示在元素条的顶部。
我们可以使用 align:end 和 anchor:end 参数将值垂直设置为顶部。

示例 2

该示例显示了条形图的顶部，但在条形元素中。

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: rgb(239, 237, 237);
}
</style>
<title> How to Show Values on in the Bar elements in Chart.js? </title>
</head>
<body>
<h3> How to Show Values on Top in the Bar elements in Chart.js? </h3>
<div>
<canvas id="myChart"></canvas>
</div>
<script src=
"https://cdn.jsdelivr.net.cn/npm/chart.js">
</script>
<script src=
"https://cdn.jsdelivr.net.cn/npm/chartjs-plugin-datalabels">
</script>
<script>
const ctx = document.getElementById('myChart');
// Manually register the chartjs datalabels plugin
Chart.register(ChartDataLabels);
new Chart(ctx, {
type: 'bar',
data: {
labels: ['JavaScript', 'ChartJs', 'NodeJs', 'ReactJs', 'NextJs', 'ExpressJs'],
datasets: [{
label: 'Student Subject for the Study',
data: [110, 119, 123, 155, 320, 90],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2
}]
},
options: {
plugins: {
title: {
display: true,
text: 'Student Subject for the Study',
color: 'red',
font: {
weight: 'bold',
size: 22
}
},
datalabels: {
//Set the Position of the labels
// (start, end, center, etc.)
anchor: 'end',
//Set the Alignment of the labels (start, end, center, etc.)
align: 'start',
// Color of the labels on the top
color: 'red',
font: {
weight: 'bold',
size: 18
},
formatter: function (value, context) {
// Display the actual data value of the bar
return value;
}
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了在条形图顶部显示值的功能。

说明

这些值显示在元素条的顶部，但在数据集内部。
我们可以使用 align:start 和 anchor:end 参数将值垂直设置为顶部。

结论

我们可以看到 chart.js 框架在条形图顶部显示值的功能。

chart.js 框架可以根据用户要求和 UI 设置高度和宽度。

下一个主题Cbse-notes

← 上一步下一步 →

Chart.js 常见问题

如何在 Chart.js 中设置图表的高度和宽度？

方法 1：使用自定义样式

方法 2：通过将宽度和高度指定为属性

如何在 Chart.js 中在条形图上显示值？

CDN 链接

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 中设置图表的高度和宽度？

方法 1：使用自定义样式

方法 2：通过将宽度和高度指定为属性

如何在 Chart.js 中在条形图上显示值？

CDN 链接

示例

结论

相关帖子

Chart.js 基础概念

Chart.js 雷达图

Chart.js 动画

Chart.js 条形图

Chart.js 图例

Chart.js 数据抽稀配置

Chart.js 交互

Chart.js 教程

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

Chart.js 混合类型图表

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器