向 Chart.js 添加水印/徽标

Question

我一直在浏览文档和其他帖子，但似乎以前没有人问过这个问题。

有什么方法可以向使用 Chart.js 制作的图表添加水印或徽标吗？

我需要这个主要是因为当人们将图表下载为图像时，我不太关心它是否显示在我的网站上，只要用户下载它时它就在那里。

有人能指出我正确的方向吗？

非常感谢！ :)

Answer 1

我很抱歉在发布问题几分钟后自己找到了答案，但我之前一直找不到这个答案:(

这个 Chart.js 插件将会做到这一点：https://www.npmjs.com/package/chartjs-plugin-watermark

options: {

      watermark: {

          image: "//imgurlhere.jpg",
          x: 20,
          y: 10,
          width: 53,
          height: 60,
          opacity: 0.25,
          alignX: "left",
          alignY: "top",
          alignToChartArea: true,
          position: "back"

      },

}

Answer 2

ChartJS 4.4.6 添加水印：

const myCustomPlugins = {
    // beforeDraw or afterDraw
    beforeDraw:function(chartInstance){
        // Get ctx of chart
        const context = chartInstance.ctx;
        // Set backgournd color for chart
        context.fillStyle = "white";
        // Set sizes and positions
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);
        // Create new image
        let img = new Image();
        // Set srouce of image
        img.src = "assets/images/watermark.svg";
        // Draw the image on the canvas context
        context.drawImage(img,context.canvas.width/4-img.width/2,context.canvas.height/4-img.height/2);
    }
}

new Chart(document.getElementById('myChart'),{

     // Set your chart type, chart data, chart options here 

     plugins: [myCustomPlugins]
});