能否在Chart.js中添加自定义字体？

Question

我想在使用Chart JS绘制的图表中使用外部字体。有人知道是否可能吗？我已经查阅了文档，但没有找到解决方案。

- Stijn Westerhof

---

可以的。参见这个问题。请注意，chart.js使用<canvas>元素进行绘制，因此你的问题与如何在canvas元素上使用自定义字体相同。 - Spencer Wieczorek

我理解你为什么认为我的问题是你给我的那个问题的重复。但是，如果你查看Chart JS的文档，你会发现它的工作方式不同。 - Stijn Westerhof

Answer 1

确实是可能的。

如果您已经导入了字体（例如来自GoogleFonts），
您只需像这样编辑您的图表选项中的defaultFontFamily属性:

var options = {
    // 'Raleway' is the name of the fond I imported from GoogleFonts
    defaultFontFamily: Chart.defaults.global.defaultFontFamily = "'Raleway'"
}

请参考Lolka的回答，了解有关defaultFontFamily属性的更多信息。

一个完整的工作示例：

Chart.defaults.global.defaultFontFamily = "Indie Flower";
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
  
<canvas id="myChart" width="400" height="400"></canvas>

- tektiv

---

哦，我明白了！谢谢，你知道我能不能在1.x版本中使用它吗？ - Stijn Westerhof

我有一个.ttf文件，我必须使用它。有没有办法使用它？ - Stijn Westerhof

@StijnWesterhof 当然，看一下MDN关于@font-face的文档。然后你只需要用你导入的字体的名称（@font-face的font-family属性）替换Chart.defaults...中的"Indie Flower"即可。 - tektiv

@StijnWesterhof 它可以工作，但加载字体有一些延迟。我已经添加了CSS文件并在index.html上加载它，然后在chart.js文件中使用该字体，如下所示： @font-face { font-family: "IRANSansMobile"; src: url("../fonts/IRANSansMobile.ttf"); } @font-face { font-family: "IRANSansMobile"; src: url("../fonts/IRANSansMobile_bold.ttf"); font-weight: bold; } 这是chart.js文件： Chart.defaults.global.defaultFontFamily = 'IRANSansMobile, Tahoma, Arial, sans-serif'; - jsina

我尝试了使用Roboto，但是没有成功，我正在从Google Fonts下载。 - Guilherme Flores

Answer 2

谷歌搜索的第一个结果 Chart.JS 自定义字体

来自 文档:

有4个特殊的全局设置可以更改图表中所有字体。这些选项在 Chart.defaults.global 中。

...

defaultFontFamily 字符串 "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" 所有文字的默认字体系列

- vaso123

---

这不是回答OP的问题，它们都不是定制的外部字体。 - Spencer Wieczorek

正如Spencer Wieczorek所说。 - Stijn Westerhof

如果您查看文档，您会发现这是实际的默认设置，而不是选项。因此，您可以更改此设置以适应您的自定义字体系列。 - vaso123