如何将点击的点在dygraphs中突出显示？

Question

我正在使用选定的形状在我的图表上绘制更大的菱形。当用户点击某个点时。我在另一个div中显示数据，但我希望突出显示单击的点。换句话说，我想切换＆＃39;打开和关闭点后面的数据以及点击的点需要显示它们是否包含在数据集中。我相信我已经在某个地方见过这个，但我找不到它。是否有标准＆＃39;将点击的点留在“突出显示”中的方法。点击后鼠标离开时的状态？

这是我的代码。 pointClickCallback通过ajax获取数据并将其显示在另一个div中。那部分有效。我只想强调这一点，以便知道我点击了哪些点。

当我再次点击时，我还需要恢复正常。这是一个允许我选择和取消选择点的切换。

编辑：我发现了交互模型示例，但是当我将其添加到我的代码中时，我失去了我的pointClickCallback功能。我看到了对captureCanvas的调用和交互模型结构。

    var g = new Dygraph(document.getElementById('rothmangraph'), lines, {
        //showRangeSelector: true,
        title: "Personal Wellness Index (PWI)",
        labels: ['Date', 'Index'],
        color: ['#006699'],
        valueRange: [0, 101],
        axisLabelFontSize: 12,
        drawPoints: true,
        gridLineColor: "#aaaaaa",
        includeZero: true,
        strokeWidth: 2,
        rightGap: 20,
        pointSize: 4,
        highlightCircleSize: 8,
        series : {
            Index: {
                drawHighlightPointCallback : Dygraph.Circles.DIAMOND
            },
        },
        axes: {
            y: {
                pixelsPerLabel: 20,
            },
            x: {
                valueFormatter: function(ms) {
                    return ' ' + strftime('%m/%d/%Y %r',new Date(ms)) + ' ';
                },
                axisLabelWidth: 60,
                axisLabelFormatter: function(d, gran) {
                    return strftime('%m/%d %I:%M %p',new Date(d.getTime())) ;
                }
            }
        },
        underlayCallback: function (canvas, area, g) {
            var warning = g.toDomCoords(0,41);
            var critical = g.toDomCoords(0,66);

            // set background color
            canvas.fillStyle = graphCol;
            canvas.fillRect(area.x, area.y, area.w, area.h);

            // critical threshold line
            canvas.fillStyle = "#cc0000";
            canvas.fillRect(area.x,warning[1],area.w,2);

            // warning threshold line
            canvas.fillStyle = "#cccc00";
            canvas.fillRect(area.x,critical[1],area.w,2);
        },
        pointClickCallback: function(e,point) {
            var idx = point.idx;
            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) {
                    // parse and add row to table if not exists.
                    var data = JSON.parse(result);
                    var aid = data['id'];
                    var indexCol = "#a9cced"
                    if (line[1] <= 65) indexCol = "#ede1b7";
                    if (line[1] <= 40) indexCol = "#e5bfcc";
                    var headerinfo = '<th class="'+aid+'"><span class="showindex" style="background-color:'+indexCol+'">'+line[1]+'</span></th>';
                    var fixdate = dispdate.replace(' ','<br>');
                    var headerdate = '<th class="'+aid+'">'+fixdate+'</th>';

                    // skip if already exists
                    var found = false;
                    var whichone = false;
                    $('#headerdate tr th').each(function(idx, item) {
                        if (fixdate == $(this).html()) {
                            found = true;
                            whichone = idx;
                        }
                    });

                    if (!found) {
                        $.each(data, function (idx, item) {
                            $('#' + idx).append('<td  class="'+aid+'" style="width:70px">' + item + '</td>');
                        });
                        $('#headerdate tr').append(headerdate);
                        $('#headerinfo tr').append(headerinfo);
                    } else {
                        $('tr').each(function() {
                            $('.'+aid).remove();
                        });
                    }
                }
            });
        }
    });
}