如何更改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

如果您使用的是 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
            }
          }
        }
      }
    };

在你的反应组件中：

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

希望这有用。如需进一步参考，请参阅这篇文章