react annotation绘制垂直日期标注线失效问题排查

标注线始终为水平状态是3处配置错误导致的：

• 轴ID不匹配：Chart.js 3.x+版本的scales配置直接用x/y作为轴的键名，默认x轴ID为x，你不仅把x轴键名错写为旧版v2的xAxes，还将标注线绑定的scaleID写为不存在的x-axis-1，插件找不到对应x轴时会默认绑定y轴，自然画出水平线。
• 标注值取值域错误：垂直标注线绑定x轴时，value需要传x轴对应的刻度值（月份索引/月份标签文本），你传入的130000是y轴的价格区间数值，不在x轴取值范围内。
• 冗余参数：正确绑定x轴后不需要额外加mode: 'vertical'，绑定x轴的line类型注解默认就是垂直线，绑定y轴默认是水平线。

1. 修正scales中的x轴配置，将xAxes改为x，匹配默认x轴ID：

scales: {
  y: {
    stacked: true,
    grid: {
      circular: true,
      drawTicks: false,
    },
    ticks: {
      padding: 9,
      beginAtZero: true,
      callback(value) {
        return value === 0 ? value : `${numberFormatter.format(value)} TL`;
      },
    },
  },
  x: {
    grid: {
      drawOnChartArea: false,
      drawTicks: true,
      padding: -10,
    },
    ticks: {
      z: 1,
    },
  },
},

2. 修正annotation插件的标注线配置，注意2.x版本annotation插件的annotations为对象格式，id作为对象键名：

plugins: {
  annotation: {
    annotations: {
      'a-line-1': {
        type: 'line',
        borderColor: 'black',
        borderWidth: 1,
        scaleID: 'x',
        // 替换为今日日期对应的x轴值：如果是第n个月份就传n-1（索引从0开始），也可以直接传monthNames里对应的月份字符串
        value: 3,
        label: {
          enabled: true,
          content: 'Bugün',
          position: 'start'
        },
      }
    }
  },
  legend: false,
  tooltip: {
    backgroundColor: '#fcfcfc',
    titleColor: '#2d393e',
    bodyColor: '#8f9fa9',
    borderWidth: 1,
    borderColor: '#bcc2c6',
    displayColors: false,
    callbacks: {
      title: (data) => {
        if (data[0]?.dataset?.type !== 'scatter') {
          return `${data[0].formattedValue} TL`;
        }
        return null;
      },
      label: (labels) => {
        if (labels?.dataset?.type === 'scatter') {
          return `${labels.dataset.label}: ${labels.formattedValue} TL`;
        }
        return labels.label;
      },
    },
  },
},

如果你使用的是Chart.js 2.x + 1.x版本annotation插件，可以保留xAxes数组格式和annotations数组格式，只需要把scaleID对应到你实际的x轴ID，同时把value改为x轴对应的刻度值即可。

• 错误水平效果：
  
• 修正后垂直效果：
  

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