Chart.js 选项和内边距

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

options 函数用于设置和解析从上到下的元素，这需要 options。“options”函数需要能够应用样式元素。你将在本章中发现 chart.js 的样式和选择。

响应式图表是通过 options 函数创建的。图表的宽度和高度根据应用程序进行维护。
options 函数包含图表的“font”和“padding”设置。
要向图表元素内部添加空间，请使用 padding 函数。
标题的宽度、样式和大小使用 font 函数进行调整。

语法

chart.js. options 函数显示以下语法。

 
options: {
responsive: false,
write code here...
},   

Chart.js 选项示例

这些示例显示了 chart.js 选项及其参数的 UI 和样式。

示例 1

chart.js 选项用于为图表和图形添加填充。

 
<!DOCTYPE>
<html>
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>chart.js</title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js option structure with padding </h1>
<canvas id = "chartName" aria-label = "chart" height = "800" 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("chartName").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: true,
layout: {
padding: {
left: 5,
right: 10,
}
}
},
});
</script>
</body>
</html>   

输出

输出显示图表中元素的填充。

示例 2

chart.js 选项用于为图表和图形添加所有填充。

 
<!DOCTYPE>
<html>
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>chart.js</title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> Basic chart.js option with padding </h1>
<canvas id = "chartName" aria-label = "chart" height = "800" 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("chartName").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,
layout: {
padding: 40
},
plugins: {
legend: {
labels: {
font: {
size: 15,
family: 'Helvetica',
style: '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</title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js option structure with X and Y padding </h1>
<canvas id = "chartName" aria-label = "chart" height = "800" 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("chartName").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,
scales: {
r: {
ticks: {
backdropPadding: {
x: 10,
y: 4
}
}
}
}

},
});
</script>
</body>
</html>   

输出

输出显示图表中元素的填充。

示例 4

chart.js 选项用于为图表和图形添加所有填充。

 
<!DOCTYPE>
<html>
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>chart.js</title>
</head>
<body style = "background-color:#f3f2dc;">
<h1> chart.js option structure with font and padding </h1>
<canvas id = "chartName" aria-label = "chart" height = "800" 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("chartName").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,
layout: {
padding: 40
},
plugins: {
legend: {
labels: {
font: {
size: 10,
family: 'Helvetica'
}
}
}
}
},
});
</script>
</body>
</html>   

输出

输出显示图表中元素的填充。

结论

chart.js 选项元素和填充设置图表的 UI 和样式。在图表元素的选项功能中，我们可以设置不同的填充、边框、颜色和其他样式元素。

下一主题Chartjs-饼图

Chart.js 选项和内边距

语法

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 教程

如何在 ChartJS 中动态更新值

Chart.js 散点图

Chart.js 交互

Chart.js 动画

Chart.js API 开发者

Chart.js 条形图

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

Chart.js 常见问题

Chart.js 安装和工作流程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器