如何更改 react-chartjs-2 中的默认字体系列

Question

我有带有“react-chartjs-2”的条形图，我应该把我的字体系列放在 xAxes 中的图表标签的什么位置：这样：（无效）

<Bar
    data={chartData}
    options={{ defaults: { global: { defaultFontFamily:"iransans} }}}
/>

这种方式不适用于：

    <Bar
        data={chartData}
        options={{ font: { family: "iransans" }}}
    />

有人知道吗？？？？

Answer 1

所以在 github 中看到 post 后，这种方法奏效了：首先导入默认值：

import { defaults } from 'react-chartjs-2';

然后在某处设置这样的字体：

defaults.font.family = 'font name...';

Answer 2

如果您使用的是 chart.js 3.x+，请参考以下代码以更改刻度、工具提示和图例的字体：

    // inside data.js(or your own data file)
 
    const options = {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: true,
          labels: {
            color: "rgb(255, 99, 132)",
            font: {
              family: "Montserrat" // Add your font here to change the font of your legend label
            }
          },
          tooltip: {
            bodyFont: {
              family: "Montserrat" // Add your font here to change the font of your tooltip body
            },
            titleFont: {
              family: "Montserrat" // Add your font here to change the font of your tooltip title
            }
          }
        }
      },
      tooltips: {
        backgroundColor: "#f5f5f5",
        titleFontColor: "#333",
        bodyFontColor: "#666",
        bodySpacing: 4,
        xPadding: 12,
        mode: "nearest",
        intersect: 0,
        position: "nearest"
      },
      scales: {
        yAxes: {
          barPercentage: 1.6,
          grid: {
            display: false,
            color: chartLineColor,
            zeroLineColor: "transparent"
          },
          ticks: {
            suggestedMin: 0,
            suggestedMax: 125000,
            padding: 2,
            backdropPadding: 2,
            backdropColor: "rgba(255,255,255,1)",
            color: chartLineColor,
            font: {
              family: "Montserrat", // Add your font here to change the font of your y axis
              size: 12
            },
            major: {
              enable: true
            }
          }
        },
        xAxes: {
          barPercentage: 1.6,
          grid: {
            display: false,
            zeroLineColor: "transparent"
          },
          ticks: {
            padding: 20,
            color: chartLineColor,
            font: {
              family: "Montserrat", // Add your font here to change the font of your x axis
              size: 12
            },
    
            major: {
              enable: false
            }
          }
        }
      }
    };

在你的 React 组件中：

import {someData,options} from './data.js'
function SomeComponent{
   return(
       <>
        <Line data={someData} options={options} />
       </>
     )
}

希望这有用。如需进一步参考，请参阅此 article

Answer 3

react-chartjs-2 库 v4 中缺少默认值，因此应直接从 chart.js 导入：

import { defaults } from 'chart.js';

然后在某处设置这样的字体：

defaults.font.family = 'font name...';

如何更改 react-chartjs-2 中的默认字体系列

how to change default font family in react-chartjs-2

chart.js

font-family

react-chartjs-2