如何在Dygraphs中实现点击点的高亮持久化与切换功能？

我明白你的需求啦——就是要让点击过的数据点保持高亮（用更大的菱形），再点一次就恢复原样，同时原来的Ajax加载数据功能还得正常跑。之前加交互模型导致点击回调失效？别担心，咱们不用那个，换个更直接的方式就行，核心就是自己维护选中状态，然后自定义绘制逻辑。

步骤1：维护选中点的状态 #

首先在代码开头定义一个集合，用来存已经选中的点的索引（用Set来做添加/删除操作特别方便）：

// 存储选中的点索引，方便快速切换状态
var selectedPoints = new Set();

步骤2：修改点击回调，切换选中状态 #

在你的pointClickCallback里，先处理选中状态的切换，然后触发图表重绘让高亮立即更新，同时保留你原来的Ajax逻辑：

pointClickCallback: function(e, point) {
  var idx = point.idx;
  // 切换选中状态：已选中就移除，未选中就添加
  if (selectedPoints.has(idx)) {
    selectedPoints.delete(idx);
  } else {
    selectedPoints.add(idx);
  }
  // 触发图表重绘，让高亮样式生效
  g.updateOptions({});

  // --- 下面保留你原来的Ajax逻辑，完全不动 ---
  var line = lines[idx];
  var sqltime = strftime('%Y-%m-%d %H:%M:%S',new Date(line[0]));
  var dispdate = strftime('%m/%d %r',new Date(line[0]));
  _secureAjax({
    url: '/ajax/getDataPoint',
    data: {'patient_id': pid, "rdate": sqltime},
    success: function (result) {
      // 你的原有处理逻辑（解析数据、更新表格等）保持不变
    }
  });
}

步骤3：自定义高亮绘制函数，区分选中和悬停状态 #

原来的drawHighlightPointCallback只处理了悬停的菱形，现在要改成：如果点是选中状态，就画更大的菱形；如果是普通悬停，就用原来的大小。替换你原来的series.Index.drawHighlightPointCallback：

series : {
  Index: {
    drawHighlightPointCallback : function(g, canvas, seriesName, ctx, cx, cy, color, radius, idx) {
      // 判断当前点是否被选中
      var isSelected = selectedPoints.has(idx);
      // 选中的点用更大的半径（比如12），未选中用默认的8
      var useRadius = isSelected ? 12 : radius;
      // 调用Dygraph内置的菱形绘制函数
      Dygraph.Circles.DIAMOND(g, canvas, seriesName, ctx, cx, cy, color, useRadius, idx);
    }
  },
}

额外优化：区分选中与悬停的视觉效果 #

如果你希望选中的点和临时悬停的点有更明显的区分，可以给选中点换个颜色，比如加深原色系：

drawHighlightPointCallback : function(g, canvas, seriesName, ctx, cx, cy, color, radius, idx) {
  var isSelected = selectedPoints.has(idx);
  var useRadius = isSelected ? 12 : radius;
  // 选中的点用更深的蓝色，和原颜色#006699区分开
  var useColor = isSelected ? '#004466' : color;
  Dygraph.Circles.DIAMOND(g, canvas, seriesName, ctx, cx, cy, useColor, useRadius, idx);
}

这样改完之后，点击点会切换选中状态，选中的点会一直显示大菱形（或深色菱形），再点一次就变回原来的大小，同时你的Ajax加载数据的功能完全不受影响——完美解决你之前加交互模型导致回调失效的问题！

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