如何隐藏ChartJS气泡图背景的一部分？

我设法弄清楚如何提高我在这里找到了计算器的解决方案添加垂直线和水平线在ChartJS折线图V2 +适用于气泡图ChartJS泡泡瓦特/线（我建议跳过我更新的寻求更好的方法）

 var originalBubbleDraw = Chart.controllers.bubble.prototype.draw;
  Chart.helpers.extend(Chart.controllers.bubble.prototype, {
    draw: function() {
      originalBubbleDraw.apply(this, arguments);

      var chart = this.chart;
      var ctx = chart.chart.ctx;
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      var xvalue = chart.config.data.queryLimits['x'];
      var yvalue = chart.config.data.queryLimits['y'];
      var xcolor = chart.config.data.queryLimits['xcolor'];
      var ycolor = chart.config.data.queryLimits['ycolor'];
      var lineThickness = 3;

      function drawLine(x1,y1,x2,y2,color) {
        console.log("color="+color+", x1="+x1+", x2="+x2+", y1="+y1+", y2="+y2);
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.strokeStyle = color;
        ctx.lineWidth=lineThickness;
        ctx.lineTo(x2, y2);
        ctx.stroke();
        ctx.restore();
      }

      // draw vertical line
      if (xvalue) {
        x1 = xaxis.getPixelForValue(xvalue);
        x2 = xaxis.getPixelForValue(xvalue);
        y1 = yaxis.top;
        y2 = yaxis.bottom;
        drawLine(x1,y1,x2,y2,xcolor);
      }

      // draw horizontal line
      if (yvalue) {
        x1 = xaxis.left;
        x2 = xaxis.right;
        y1 = yaxis.getPixelForValue(yvalue);
        y2 = yaxis.getPixelForValue(yvalue);
        drawLine(x1,y1,x2,y2,ycolor);
      }
    }
  });

var config = {
  type: 'bubble',
  data: {
    queryLimits: {x: 42, y: 21, xcolor: '#00FF00', ycolor: '#0000ff'},
    datasets: [
      {
          label: '',
          data: [
              {x: 20, y: 30, r: 15},
              {x: 40, y: 10, r: 10},
              {x: 100, y: 15, r: 10},
              {x: 50, y: 22, r: 5},
              {x: 80, y: 26, r: 3},
              {x: 63, y: 28, r: 10},
              {x: 71, y: 18, r: 12}
          ],
          backgroundColor:"#FF6384",
          hoverBackgroundColor: "#FF6384",
      }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

我需要进一步采取这一步骤，并在垂直线的一侧和水平线上方或下方的图表区域/背景阴影不同的颜色（例如浅灰色或一些细微的颜色）。

我不确定该方法是尝试更改背景的一部分，还是添加大小和位置均能模拟背景阴影的矩形。

有想法吗？

这是目标的样机示例：

更新

对于将来查看此书的用户来说，我最终发现了一种更好的方法，即使用在此处https://github.com/chartjs/chartjs-的chartjs的注释插件来处理线条和矩形。插件注释。使用起来要容易得多，并且不会产生触发代码以画出不必要的线条和矩形的后果。我最终也能够使用另一个插件https://github.com/compwright/chartjs-plugin-draggable用于拖动从第一个插件创建的注释。我按原样保留了接受的答案，因为它确实回答了我在遵循原始扩展方法后如何解决矩形阴影区域的上下文中遇到的问题，但是在学习了更多有关此内容之后，我还是建议使用插件方法。