与数据点交互-FLOT

Question

我使用此网站作为参考： http : //astro.unl.edu/naap/hr/animations/hrExplorer.html

我需要添加一个指针“ x”作为链接并操纵幻灯片，使指针移动x和y轴。

看到我的代码： http : //jsfiddle.net/2Xn9f/4/

了解？

你能帮助我吗？

Answer 1

首先，你想要一个十字架。 在flot API中 ，它实际上为我们提供了该功能！

function cross(ctx, x, y, radius, shadow) {
    var size = radius * Math.sqrt(Math.PI) / 2;
    ctx.moveTo(x - size, y - size);
    ctx.lineTo(x + size, y + size);
    ctx.moveTo(x - size, y + size);
    ctx.lineTo(x + size, y - size);
}

因此，这部分很容易。 然后，如果您希望能够在图形上滑动它，则可以创建一些控制x和y的jQuery UI滑块 ，并在每次移动滑块时重新绘制它：

$('#xslide').slider({
    value: 1,
    min: 0,
    max: 2,
    step: 0.1,
    slide: function(e, ui) {
        plotSlide([[ui.value, $('#yslide').slider('value')]]);
    }
});

如果plotSlide执行以下操作：

function plotSlide(data2) {
    $.plot($("#chart1"), [{
        data: data1},
    {
        data: data2,
        color: 'red',
        points: {
            show: true,
            symbol: cross
        },
        lines: {
            show: false
        }
    }], 
    options1);
}

在此处查看其运行情况： http : //jsfiddle.net/ryleyb/2Xn9f/5/