如何在ChartJS中修改饼图、折线图的标签与图例字体系列

问题原因 #

你采用的是Chart.js v2版本的旧配置语法，当前主流的v3/v4版本配置结构有较大调整，且存在两个错误操作：

1. Chart.js绘制的图表内容是canvas图形，内部文本不继承父容器的CSS字体属性，所以父容器加!important强制字体的方案无效
2. 配置项中给fontFamily加!important属于无效语法，Chart.js配置不识别CSS规则语法

前置检查 #

先确认你已经在项目全局通过@font-face正确引入了IranYekanFa字体，且字体名称拼写完全匹配。

正确实现方案 #

方案1：单组件单独配置

适配Pie、Line等所有react-chartjs-2组件，以Pie组件为例，正确配置如下：

<Pie
  data={state}
  defaultValue={resources.length + other}
  options={{
    plugins: {
      title: {
        display: true,
        text: "",
        color: 'rgb(160,0,255)',
        // 字体配置统一放在font对象中
        font: {
          size: 30,
          family: 'IranYekanFa',
          weight: 'bold'
        }
      },
      // 图例配置必须放在plugins节点下
      legend: {
        labels: {
          font: {
            family: 'IranYekanFa',
            size: 14
          }
        }
      }
    },
    animation: {
      duration: 0
    }
  }}
/>

如果是折线图需要修改x/y轴刻度标签的字体，额外补充scales配置即可：

options={{
  plugins: {
    // 同上legend、title配置
  },
  scales: {
    x: {
      ticks: {
        font: {
          family: 'IranYekanFa'
        }
      }
    },
    y: {
      ticks: {
        font: {
          family: 'IranYekanFa'
        }
      }
    }
  }
}}

方案2：全局统一配置

如果所有图表都要使用该字体，可以在项目入口文件（如main.jsx/app.jsx）中直接修改全局默认配置，不需要每个组件单独写：

import { Chart } from 'chart.js';

// 全局默认字体
Chart.defaults.font.family = 'IranYekanFa';
// 单独指定图例默认字体，不需要可以省略
Chart.defaults.plugins.legend.labels.font.family = 'IranYekanFa';
// 单独指定标题默认字体，不需要可以省略
Chart.defaults.plugins.title.font.family = 'IranYekanFa';

内容的提问来源于stack exchange，提问作者flow