Javascript 与数据点交互-flot

我将此网站用作参考：

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

请参阅我的代码：

明白吗

---

你能帮我吗？

首先，你想要一个十字架。在flot中，它实际上给了我们这个功能

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的控件，并在每次移动滑块时使其重新打印：

$('#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);
}

---

在这里看到它的作用：

首先，你想要一个十字架。在flot中，它实际上给了我们这个功能

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的控件，并在每次移动滑块时使其重新打印：

$('#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);
}

---

在这里查看它的实际操作：

嗯……我已经有了滑块。查看我的代码：但我无法添加十字滑块。因此，当我尝试添加控制x和y的滑块部分时，图形和十字滑块消失。请查看此链接：它使用滑块在太阳和恒星之间创建动画。它旁边显示了一个图形，所以当我控制幻灯片的温度或亮度时，横轴在x轴或y轴上移动。明白吗？对，但你这里的问题是关于图形本身的，我在你的JSFIDLE中没有看到。是的，但这两个JSFIDLE是相关的。这个：有滑块，这个：有图表。嗯……我已经有了滑块。查看我的代码：但我无法添加十字滑块。因此，当我尝试添加控制x和y的滑块部分时，图形和十字滑块消失。请查看此链接：它使用滑块在太阳和恒星之间创建动画。它旁边显示了一个图形，所以当我控制幻灯片的温度或亮度时，横轴在x轴或y轴上移动。明白吗？对，但你这里的问题是关于图形本身的，我在你的JSFIDLE中没有看到。是的，但这两个JSFIDLE是相关的。这个有滑块，这个有图表。