javascript - 如何对ChartJS气泡图的一部分背景进行阴影处理？

Question

我设法弄清楚如何增强我在 stackoverflow 中找到的解决方案，以便将垂直线和水平线添加到 ChartJS v2+ 中的折线图以应用于气泡图 ChartJS Bubble w/Lines (我建议跳到最后的更新以获得更好的方法)

 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);

我需要更进一步，在垂直线的一侧和水平线上方或下方用不同的颜色(如浅灰色或其他微妙的颜色)为图表的区域/背景着色。

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

想法？

这是目标模型示例:

更新

对于将来观看此内容的人来说，我最终发现了一种更好的方法来绘制线条和矩形，方法是使用此处的 chartjs 注释插件 https://github.com/chartjs/chartjs-plugin-annotation .使用它要容易得多，并且不会产生不必要的触发代码来绘制线条和矩形的后果。此外，我最终能够使用另一个插件 https://github.com/compwright/chartjs-plugin-draggable用于拖动从第一个插件创建的注释。我将按原样保留已接受的答案，因为它确实回答了我从如何按照原始扩展方法解决矩形阴影区域的上下文中提出的问题，但是在了解更多相关信息之后，我现在推荐使用插件方法。

Answer 1

正如您对 queryLimits 属性所做的那样，您可以用相同的方式填充您想要的部分的属性。

通过将以下属性添加到您的图表数据集:

fillBackground: {
    // In this porperty, add the string portion you want to fill
    // Inputs are : "tr" for top-right
    //              "tl" for top-left 
    //              "br" for bottom-right 
    //              "bl" for bottom-left 
    pos: ["tr", "bl", "br"],

    // A single color will be used in all the portions
    // But you can also set an array of colors which must have the same length as the pos
    // i.e color: ["rgba(0, 0, 0, 0.1)", "rgba(30, 30, 30, 0.3)", "rgba(60, 60, 60, 0.5)"]
    color: "rgba(30, 30, 30, 0.15)"
}

然后在您的draw() 函数中添加以下代码:

function drawRect(x1, y1, x2, y2, color) {
    ctx.save();
    ctx.fillStyle = color;
    ctx.fillRect(x1, y1, x2, y2, color);
    ctx.restore();
}

// Checks if you have the attribute in your dataset
if (chart.config.data.fillBackground) {

    // Make sure you have portions in your chart
    if (!xvalue || !yvalue) return;

    var pos = chart.config.data.fillBackground.pos;
    var color = chart.config.data.fillBackground.color;

    // For every position in your array ..
    for (p in pos) {

        // Based on the string code, fills the right portion
        switch (pos[p]) {
            case "tl":
                drawRect(xaxis.left, yaxis.top, xaxis.getPixelForValue(xvalue) - lineThickness / 2 - xaxis.left, yaxis.getPixelForValue(yvalue) - lineThickness / 2 - yaxis.top, (Array.isArray(color)) ? color[p] : color);
                break;
            case "tr":
                drawRect(xaxis.getPixelForValue(xvalue) + lineThickness / 2, yaxis.top, xaxis.right, yaxis.getPixelForValue(yvalue) - lineThickness / 2 - yaxis.top, (Array.isArray(color)) ? color[p] : color);
                break;
            case "bl":
                drawRect(xaxis.left, yaxis.getPixelForValue(yvalue) + lineThickness / 2, xaxis.getPixelForValue(xvalue) - lineThickness / 2 - xaxis.left, yaxis.bottom - (yaxis.getPixelForValue(yvalue) + lineThickness / 2), (Array.isArray(color)) ? color[p] : color);
                break
            case "br":
                drawRect(xaxis.getPixelForValue(xvalue) + lineThickness / 2, yaxis.getPixelForValue(yvalue) + lineThickness / 2, xaxis.right, yaxis.bottom - (yaxis.getPixelForValue(yvalue) + lineThickness / 2), (Array.isArray(color)) ? color[p] : color);
                break;
        }
    }
}

---

这应该可以解决您的问题。

您可以在 this fiddle 中查看使用这些函数的示例，结果如下: