如何使用dygraphs将风向时间序列图的点替换为方向箭头

核心是利用dygraphs开放的drawPointCallback自定义点绘制钩子，直接替换默认圆点为风向箭头，不需要修改库源码。

具体实现步骤 #

• 避免默认样式冲突：初始化dygraphs时开启点绘制drawPoints: true，设置pointSize作为箭头的尺寸基准，屏蔽默认圆点渲染。
• 角度适配转换：注意气象风向定义和Canvas绘制坐标系的差异——气象风向0度为正北、角度顺时针递增，Canvas 0度为正东、角度逆时针递增，绘制前需要做角度换算对齐规则。
• 编写箭头绘制逻辑：在回调中拿到每个数据点的Canvas坐标、对应风向值，通过Canvas原生路径API绘制箭头，支持自定义颜色、大小、描边样式。
• （可选）风向颜色编码：如果需要按风向区间区分箭头颜色，提前维护角度区间和颜色的映射表，绘制时根据当前点风向取值匹配颜色即可。

可直接复用的代码示例 #

// 自定义风向箭头绘制回调
function renderWindArrow(g, seriesName, ctx, cx, cy, seriesColor, pointSize, dataIdx) {
  // 取当前点的风向值：索引0为x轴时间，若风向在其他列修改第二个参数即可
  const windDirection = g.getValue(dataIdx, 1);
  // 气象风向转Canvas绘制弧度
  const drawRad = (90 - windDirection) * Math.PI / 180;
  const arrowLength = pointSize;

  ctx.save();
  // 把画布原点移到当前点坐标，旋转到对应角度
  ctx.translate(cx, cy);
  ctx.rotate(drawRad);

  // 绘制箭头轮廓（箭头指向风来的方向，符合气象风向规范）
  ctx.beginPath();
  ctx.moveTo(arrowLength, 0);
  ctx.lineTo(-arrowLength / 2, -arrowLength / 3);
  ctx.lineTo(-arrowLength / 2, arrowLength / 3);
  ctx.closePath();

  // 填充箭头、加白色描边提升辨识度
  ctx.fillStyle = seriesColor;
  ctx.fill();
  ctx.strokeStyle = '#ffffff';
  ctx.lineWidth = 1;
  ctx.stroke();

  ctx.restore();
}

// 初始化图表
const windPlot = new Dygraph(
  document.getElementById('your-chart-container'),
  // 输入数据集：格式为[时间戳, 风向角度(0~359°)]
  yourDataset,
  {
    drawPoints: true,
    pointSize: 11, // 箭头大小
    strokeWidth: 1.5, // 点之间的连线宽度，不需要连线设为0即可
    drawPointCallback: renderWindArrow,
    ylabel: '风向角度(°)',
    xlabel: '时间',
    axes: {
      y: {
        valueRange: [0, 360], // 固定y轴范围匹配风向取值
        axisLabelFormatter: val => `${val}°`
      }
    }
  }
);

调整提示：如果需要箭头指向风的去向，直接在计算drawRad时给风向值加180即可；多序列场景下可以给不同序列单独配置drawPointCallback，不会互相干扰。

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