Chart.js 3.x及以上版本如何自定义Y轴实现指定标签样式效果

Chart.js 3.x版本完全支持自定义Y轴样式，你要的带背景的类标签效果无需使用已废弃的generateLegend方法，可通过以下两种核心方案实现：

方案1：直接使用Y轴ticks原生配置（无需额外插件） #

通过Y轴刻度的原生配置项即可直接实现带背景的标签效果，同时可自定义刻度线的虚线样式，核心代码如下：

options: {
  plugins: {
    legend: {
      display: false
    }
  },
  responsive: true,
  spanGaps: true,
  scales: {
    y: {
      min: 0,
      max: max, // 替换为你的Y轴最大值
      ticks: {
        stepSize: 0.2,
        showLabelBackdrop: true, // 开启标签背景
        backdropColor: 'rgb(255, 99, 132)', // 标签背景色
        backdropPadding: 4, // 标签内边距
        color: '#ffffff', // 标签文字颜色
        // 仅展示需要的特殊刻度，其他刻度隐藏
        callback: function(value) {
          const targetTicks = [2.2, 2.4]; // 替换为你需要显示的刻度值
          return targetTicks.includes(value) ? value : null;
        }
      },
      grid: {
        // 自定义对应刻度的网格线为虚线
        color: function(context) {
          const targetTicks = [2.2, 2.4];
          return targetTicks.includes(context.tick.value) ? 'rgb(255, 99, 132)' : 'transparent';
        },
        borderDash: function(context) {
          const targetTicks = [2.2, 2.4];
          return targetTicks.includes(context.tick.value) ? [4, 3] : [];
        },
        drawBorder: false
      }
    },
    x: {
      grid: {
        display: false
      }
    }
  }
}

方案2：调整现有annotation插件配置 #

如果你要保留现有annotation插件的使用逻辑，只需要调整标注标签的偏移量，将其移动到Y轴外侧即可：

1. 先隐藏Y轴默认的刻度标签：在scales.y.ticks中配置display: false
2. 给annotation的label添加x负偏移，核心修改如下：

annotation: {
  annotations: {
    line2: {
      type: 'line',
      yMin: 2.2,
      yMax: 2.2,
      borderDash: [4, 3],
      borderColor: 'rgb(255, 99, 132)',
      borderWidth: 2,
      label: {
        enabled: true,
        position: 'start',
        content: 2.2,
        backgroundColor: 'rgb(255, 99, 132)',
        color: '#fff',
        xAdjust: -40 // 调整数值直到标签移动到Y轴外侧合适位置
      }
    }
    // 其他标注线同理配置
  }
}

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