如何通过画布外的按钮（ChartJs）控制画布图像的可见性？

Posted 2023-03-25

【中文标题】如何通过画布外的按钮（ChartJs）控制画布图像的可见性？

【英文标题】：How to control visibility of canvas image via button outside the canvas(ChartJs)?

【发布时间】：2021-05-01 05:33:48

【问题描述】：

我在下面的图表中放置了带有线条的图像

为此，我使用了Chart.helpers.extend 的draw 函数，如下所示

  let originalLineDraw = Chart.controllers.line.prototype.draw;
    const base_image = new Image();
    base_image.src="https://cdn0.iconfinder.com/data/icons/classic-icons/512/087.png";
Chart.helpers.extend(Chart.controllers.line.prototype, 
    draw: function () 
      originalLineDraw.apply(this, arguments);
      let chart = this.chart;
      let ctx = chart.chart.ctx;
        let xaxis = chart.scales['x-axis-0'];
        let yaxis = chart.scales['y-axis-0'];
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top+40);
        ctx.strokeStyle = '#000';
        ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
        ctx.lineWidth = 2;
        ctx.globalCompositeOperation = 'destination-over';
        ctx.drawImage(base_image, xaxis.getPixelForValue(undefined, index) - 15, 50, 30, 30);
        ctx.stroke();
        ctx.restore();
    
  );

到目前为止，这有点挑战，但最大的挑战是控制插入的所有图像的可见性并通过按钮（如 chartJs 的图例过滤按钮）绘制黑线。

我认为我可以使用clearRect() 来清除我绘制的内容，但问题是由于动态数据导致图像和线条更多。

我该如何解决这个问题？

JSFiddle = https://jsfiddle.net/xazpjqb2/1/

编辑 我想出了一个关于用全局变量包装图表渲染函数以控制它的答案。然后 Chart.update() 就可以了。

这是我的解决方案：https://jsfiddle.net/1nwbv5k9/

【参考方案1】：

您可以通过一个新属性来增强图表的基类，该属性确定是否应显示图像。例如

Chart.showImage=true;

这个属性可以在你的扩展绘图函数中使用，最终调用或不调用ctx.drawImage。

  if (Chart.showImage) 
    ctx.drawImage(base_image, xaxis.getPixelForValue(undefined, index) - 15, 50, 30, 30);
  

有了这个，您可以简单地将showImage 设置为 false 并像这样更新您的图表：

var myChart = new Chart(ctx, options);
createImg(1);
function clearChart(index) 
  //functions will go here to clear placed elements 
  Chart.showImage = false;
  myChart.update();

【讨论】：

感谢您的回答，非常感谢。我也想出了一个解决方案。再次查看我的帖子