如何在Angular框架的ChartJS图表中高亮设置当前月份样式

该需求可通过ChartJS原生的可脚本化配置直接实现，无需引入额外依赖，适配Angular下的ng2-charts或原生ChartJS调用场景，具体操作如下：

• 首先对齐你X轴标签的输出格式，生成当前月份的匹配值。例如X轴展示1月/2月这类中文月份，就按对应格式生成当前月份标识。
• 再在X轴的ticks配置项中，通过回调函数动态匹配当前月份，自定义对应标签的颜色、字体粗细样式。

示例代码（Angular环境+ChartJS 3.x/4.x版本）：

import { ChartConfiguration } from 'chart.js';

// 按你X轴的标签格式生成当前月份匹配值，此处为中文月份示例
const currentMonth = `${new Date().getMonth() + 1}月`;

public chartOptions: ChartConfiguration['options'] = {
  scales: {
    x: {
      ticks: {
        // 动态设置标签颜色
        color: (context) => {
          return context.label === currentMonth ? '#000000' : '#666666';
        },
        // 动态设置字体样式
        font: (context) => {
          return {
            weight: context.label === currentMonth ? 'bold' : 'normal'
          }
        }
      }
    }
  }
};

若使用ChartJS 2.x版本，配置层级调整为scales.xAxes[0].ticks即可，匹配逻辑完全一致。
若X轴为时间类型坐标轴，将匹配逻辑替换为时间戳/日期对象对比即可。

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