如何在chart.js散点图的末尾添加垂直线

var chartConfig = {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'Scatter Dataset',
      data: [
        { x: 1, y: 2 },
        { x: 2, y: 3 },
        { x: 3, y: 4 },
        // 添加更多数据点...
      ],
      borderColor: 'rgba(0, 0, 0, 1)', // 散点图边框颜色
      backgroundColor: 'rgba(0, 0, 0, 1)', // 散点图填充颜色
    }]
  },
  options: {
    // 配置其他图表选项，如标题、轴标签等
  }
};

var scatterChart = new Chart(canvas, chartConfig);

Chart.plugins.register({
  afterDraw: function(chart) {
    // 在图表绘制之后执行的操作
  }
});

var ctx = chart.ctx; // 获取图表的上下文对象
var xAxis = chart.scales['x-axis-0']; // 获取X轴对象
var yAxis = chart.scales['y-axis-0']; // 获取Y轴对象
var dataset = chart.data.datasets[0]; // 获取散点图的数据集对象
var data = dataset.data; // 获取散点图的数据数组

var lastData = data[data.length - 1]; // 获取最后一个数据点
var x = xAxis.getPixelForValue(lastData.x); // 获取最后一个数据点的X坐标
var yTop = yAxis.getPixelForValue(yAxis.min); // 获取Y轴的顶部边界坐标
var yBottom = yAxis.getPixelForValue(yAxis.max); // 获取Y轴的底部边界坐标

ctx.save();
ctx.beginPath();
ctx.moveTo(x, yTop);
ctx.lineTo(x, yBottom);
ctx.strokeStyle = 'rgba(255, 0, 0, 1)'; // 设置线条颜色
ctx.lineWidth = 1; // 设置线条宽度
ctx.stroke();
ctx.restore();