与数据点交互 - float

发布于 2025-01-06 22:42:19 字数 337 浏览 1 评论 0 原文

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

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

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

明白了吗？

你能帮助我吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

海未深 2025-01-13 22:42:19

首先，你想要一个十字架。在 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);
}

所以这部分很简单。然后，如果您希望能够在图表中滑动它，您可以创建一些 jQuery UI 滑块控制 x 和 y，并在每次移动滑块时重新绘制：

$('#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/

First off, you want a cross. In the flot API, it actually gives us that function!

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);
}

So that part is easy enough. Then, if you want to be able to slide it around the graph, you can create some jQuery UI sliders that control x and y, and have it replot every time a slider is moved:

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

Where plotSlide does something like this:

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

See it in action here: http://jsfiddle.net/ryleyb/2Xn9f/5/

回复收藏 0 原文

~没有更多了~