咨询dygraphs中y2轴反向可视化且不影响图表的配置方法

要实现你需要的Y2轴效果，可通过自定义绘制逻辑达成，具体方案如下：

核心实现思路 #

• 仅可视化不干扰图表：不绑定任何数据系列，完全通过渲染回调手动绘制Y2轴
• 零点对齐红线：基于红线固定数值计算其像素位置，以此为基准映射Y2轴零点
• 反向计数：反转刻度值的生成逻辑，实现从大到小的刻度显示

具体代码实现 #

// 初始化图表实例
const graph = new Dygraph(
  document.getElementById("target-container"),
  mainData, // 仅绑定Y1轴的主数据
  {
    ylabel: "Y1轴（正向计数）",
    // 关闭默认Y2轴
    showY2Axis: false,
    // 自定义绘制回调，在图表渲染完成后添加Y2轴
    drawCallback: function(dygraph, isInitialRender) {
      if (!isInitialRender) return;

      const ctx = dygraph.canvas.getContext("2d");
      const layout = dygraph.layout_;
      const redLineFixedValue = 100; // 替换为你的红线固定数值

      // 计算Y1轴零点和红线的像素位置
      const yZeroPixel = layout.toDomYCoord(0);
      const redLinePixel = layout.toDomYCoord(redLineFixedValue);

      // 定义Y2轴参数
      const y2Min = -50;
      const y2Max = 50;
      const tickCount = 5;
      const y2AxisXPos = layout.xAxisRight_;

      ctx.save();
      ctx.font = "12px Arial";
      ctx.textAlign = "left";
      ctx.fillStyle = "#333";

      // 遍历生成反向刻度
      for (let i = 0; i <= tickCount; i++) {
        // 反向计算刻度值：从max到min
        const y2TickValue = y2Max - (i * (y2Max - y2Min)) / tickCount;
        // 基于红线位置映射刻度像素坐标
        const pixelOffset = (y2TickValue / y2Max) * (yZeroPixel - redLinePixel);
        const tickYPos = redLinePixel + pixelOffset;

        // 绘制刻度线
        ctx.beginPath();
        ctx.moveTo(y2AxisXPos - 5, tickYPos);
        ctx.lineTo(y2AxisXPos, tickYPos);
        ctx.stroke();

        // 绘制刻度标签
        ctx.fillText(y2TickValue.toString(), y2AxisXPos + 5, tickYPos + 3);
      }

      // 绘制Y2轴标题
      ctx.save();
      ctx.translate(y2AxisXPos + 20, layout.yAxisCenter_);
      ctx.rotate(Math.PI / 2);
      ctx.fillText("Y2轴（反向计数）", 0, 0);
      ctx.restore();

      ctx.restore();
    }
  }
);

关键说明 #

• 该方案完全独立于图表的核心数据逻辑，不会对Y1轴的渲染或数据计算产生任何影响
• 通过像素位置映射保证Y2轴零点与红线精准对齐
• 反转刻度值生成顺序，实现与Y1轴相反的计数方向

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