Chart.js 字体配置

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

所有 Chart 的字体都可以使用特定的全局设置进行更改。 Chart.defaults.font 包含这些参数。只有在配置中缺少更专门的选择时，全局字体设置才会生效。

默认配置

我们可以在表中看到默认配置。

名称	类型	默认	描述
族	string	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	CSS font-family 选择用作所有文本的默认字体系列。
大小	数字	12	默认文本字体大小（以像素为单位）。不影响径向和线性刻度点上的标签。
style	string	'normal'	默认字体样式。它不适用于工具提示页脚或标题。图表的标题不受影响。符合 CSS 设置的 font-style 设置（normal、italic、oblique、initial、inherit）。
体重	normal \| bold \| lighter \| bolder \| number	undefined	默认情况下为粗体（字体粗细）。
lineHeight	number\|string	1.2	单行文本的高度

语法

Chart 的字体语法如下所示

 
options: {
        plugins: {
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 25,
                        family: 'Helvetica',
                        style: 'bold',

                    }
                }
                
            }
        }   

示例

以下示例显示了画布 Chart 的字体大小、字体颜色、字体粗细和行高。

示例 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 label fontSize </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,
        plugins: {
            legend: {
                labels: {
                    font: {
                        size: 18
                    }
                }
                
            }
        }
    }
  });
  </script>
</body>
</html>   

输出

输出显示了不同字体大小的图表。

示例 2

以下示例显示了带有所有数据的标签的字体大小。我们可以使用 option 和 label 参数设置字体样式和字体宽度。

 
<!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 label fontSize </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,
        plugins: {
            legend: {
                labels: {
                    font: {
                        size: 25,
                        family: 'Helvetica',
                        style: 'bold',
                    }
                }
                
            }
        }
    }
  });
  </script>
</body>
</html>   

输出

输出显示了不同字体大小的图表。

结论

Chart.js 具有默认字体样式和 CSS 来显示数据。我们可以使用字体及其带有必需值的参数来设置图表标签。

下一主题Chartjs-interactions

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

Chart.js 副标题

Chart.js 饼图

Chart.js 选项和内边距

Chart.js 散点图

Chart.js 交互

Chart.js 标题

Chart.js API 开发者

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

Chart.js 混合类型图表

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器