如何在dygraphs图表中添加背景水印图片？

dygraphs本身没有内置的水印功能，但可以通过直接操作其底层Canvas元素来实现背景水印效果，具体步骤如下：

实现步骤 #

• 初始化dygraphs图表后，获取对应的Canvas元素
• 加载水印图片，在图表绘制完成后通过Canvas 2D上下文绘制水印
• 监听图表的重绘事件，确保每次图表更新后水印能重新渲染（避免被重绘覆盖）

示例代码 #

1. 初始化dygraphs图表 #

// 假设页面中有id为"graph"的容器
const graph = new Dygraph(
  document.getElementById('graph'),
  [
    [new Date(2024, 0, 1), 10],
    [new Date(2024, 0, 2), 20],
    [new Date(2024, 0, 3), 15]
  ],
  {
    labels: ['日期', '数值'],
    // 其他图表配置项
  }
);

2. 定义水印绘制函数 #

/**
 * 给Canvas添加水印
 * @param {HTMLCanvasElement} canvas - 目标Canvas元素
 * @param {HTMLImageElement} watermarkImg - 水印图片对象
 */
function addWatermark(canvas, watermarkImg) {
  const ctx = canvas.getContext('2d');
  // 保存当前上下文状态，防止影响图表原有绘制
  ctx.save();
  // 设置水印透明度（可根据需求调整）
  ctx.globalAlpha = 0.15;
  // 绘制水印：参数依次为图片、X坐标、Y坐标、宽度、高度
  // 这里示例将水印居中放置，大小为200x100，可自行调整
  const imgWidth = 200;
  const imgHeight = 100;
  ctx.drawImage(
    watermarkImg,
    (canvas.width - imgWidth) / 2,
    (canvas.height - imgHeight) / 2,
    imgWidth,
    imgHeight
  );
  // 恢复上下文状态
  ctx.restore();
}

3. 加载水印并绑定到图表 #

const watermarkImg = new Image();
// 替换为你的水印图片路径（需同域或配置CORS）
watermarkImg.src = '/path/to/your/watermark.png';

watermarkImg.onload = function() {
  // 首次绘制水印
  addWatermark(graph.canvas_, watermarkImg);
  
  // 监听图表重绘事件，每次重绘后重新添加水印
  graph.updateOptions({
    drawCallback: function() {
      addWatermark(graph.canvas_, watermarkImg);
    }
  });
};

注意事项 #

• 水印图片需满足同域要求，否则Canvas会因跨域被污染无法绘制；若使用跨域图片，需在图片服务器配置CORS头，并设置watermarkImg.crossOrigin = 'anonymous'
• 可通过调整globalAlpha（透明度）和drawImage的位置、大小参数，优化水印的显示效果
• dygraphs的canvas_属性是主图表的Canvas元素，若需要给图例等区域添加水印，可找到对应的Canvas元素重复上述操作

内容的提问来源于stack exchange，提问作者aleg