有没有办法更改 Chart.js 3.x.x 中主要刻度线的字体？

Question

我见过一些较旧的问题（例如这个），它们展示了如何使用

options.scales.xAxes.ticks.major.fontStyle

属性修改 Chart.js 2.x.x 中的主要刻度字体样式。但是，

fontStyle

在 3.x.x 中似乎不是有效属性。我想问题可能是 3.x.x 使用

font

对象，所以我尝试在

options.scales.x.ticks.major

中添加其中一个对象，如下所示：

           ticks: {
                major: {
                    enabled: true,
                    font: {
                       weight: 'bold'
                    },
                },

然而，这没有任何效果。接下来我尝试在

options.scales.x.ticks

中使用回调函数，但无法找到任何方法来访问回调函数中刻度的格式（尽管我至少在主要刻度中添加了“--”作为临时方式将它们分开）：

                callback: function(value, index, ticks) {
                    if(ticks[index].major == true) {
                        return "--" + value + "--";
                    }
                    else {
                        return value;
                    }
                }

最后，我看到了这个问题的“scriptable options”答案，所以我尝试在

options.scales.x.ticks.font.weight

中添加一个脚本，如下面的最终配置所示。我确信这是正确的方法，但我的代码一定有一些问题。有人能弄清楚吗？这是完整的配置：

const bgPlugin = {
    id: 'customBgColor',
    beforeDraw: (chart, args, options) => {
        const {ctx} = chart;
        ctx.save();
        ctx.globalCompositeOperation = 'destination-over';
        ctx.fillStyle = options.color || "#f5f3ef";
        ctx.fillRect(0, 0, chart.width, chart.height);
        ctx.restore();
    }
};

var data = {
  datasets: [{/* formatted data is inserted here by the PHP parent script */}]};
  
var config = {
  type: 'line',
  data: data,
  options: {
    parsing: false,
    animation: false,
    plugins: {
      decimation: {
        enabled: true,
        algorithm: 'min-max',
      },
      customBgColor: {
          color: "#f5f3ef",
      }
    },
    scales: {
        x: {
            type: 'time',
            adapters: {
                date: {
                    zone: "America/Los_Angeles",
                },
            },
            ticks: {
                major: {
                    enabled: true,
                },
                font: {
                    weight: (c) => {
                        if(c.major == true) {
                            return 'bold';
                        }
                        else {
                            return 'normal';
                        }
                    }
                },
            }, 
        },
    },
  },
  plugins: [bgPlugin],
};

以下是上述配置在不同时间范围内生成的两个图表示例，您可以看到第一个图表中的主要刻度是“下午 5 点”等，第二个图表中是日期，但它们不是粗体:

Answer 1

权重回调中的

1. c

   是一个上下文，而不是一个刻度，所以它应该是

   c.tick.major

   ，而不仅仅是

   c.major

2. 对我来说，只有当我为整个字体编写回调，而不仅仅是 font.weight 时，它才有效：

font: context => {
  if (context.tick && context.tick.major) {
    return {
      weight: 'bold'
    };
  }
}

jsFiddle 示例 - https://jsfiddle.net/hrvb0L5y/

文档中的示例（由于某种原因仅在迁移指南中）-https://www.chartjs.org/docs/master/migration/v3-migration.html