Chart.js 字体

有一些特殊的全局设置可以更改图表上的所有字体。 这些选项在 Chart.defaults.font 中。 全局字体设置仅在配置中不包含更具体的选项时适用。

例如,在此图表中,除了图例中的标签外,文本的字体大小为 16 像素。

Chart.defaults.font.size = 16;
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                labels: {
                    // 这个更具体的字体属性会覆盖全局属性
                    font: {
                        size: 14
                    }
                }
            }
        }
    }
});
名称 类型 默认值 描述
family string "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" 所有文本的默认字体系列,遵循 CSS 字体系列选项。
size number 12 文本的默认字体大小(以 px 为单位)。 不适用于径向线性刻度点标签。
style string 'normal' 默认字体样式。 不适用于工具提示标题或页脚。 不适用于图表标题。 遵循 CSS 字体样式选项(即 normal, italic, oblique, initial, inherit)。
weight string undefined 默认字体粗细(粗体)。
lineHeight number string 1.2

缺少字体

如果为系统上确实存在的图表指定了字体,则浏览器在设置时不会应用该字体。 如果发现图表中出现奇怪的字体,请检查应用的字体是否存在于你的系统中。

加载字体

如果字体未缓存且需要加载,则在加载字体后需要更新使用该字体的图表。 这可以使用字体加载 API 来完成。

查看笔记

扫码一下
查看教程更方便