Question

我试图在同一个情节上绘制3个不同的系列。我想在剧情中做以下几点：

允许用户选择绘制哪个系列（flot网站上的“Turning series on/off”示例），
允许用户放大和缩小（“Rectangular selection with zooming”示例），
显示用户悬停鼠标时的曲线值（“Tracking curves”示例）。

我一直试图让它工作很长时间，我无法让一切工作。 My current attempt无法正确打开/关闭系列。我一检查一个方框，图表就会变成空白。定义所有绘图函数等的javascript文件是plot_displacement.js。

代码的相关部分是：

var choice_container = jQuery("#choices");
choice_container.find("input").change(do_plot);

HTML是：

<p id="choices">Show:</p> 
<div id="plotdiv" style="width:600px;height:300px;position:static;"></div>

由于this question's answer，我使用的是change而不是click。如果我使用click，则选择/取消选中复选框似乎没有任何效果。

我确信我忽略了一些简单的事情，但我无法弄清楚是什么。我希望能够完成我在flot中尝试做的所有3件事。

谢谢！

Answer 1

你的问题很简单，你的更改事件正在调用do_plot，xmin是一个jQuery Event对象。你希望它是未定义的，然后设置为0，但你将xmin：jQuery.Event传递给flot，它不知道如何处理它。

编辑：由于有人询问您可能想要放入的实际代码，在检查xmin是否未定义时，另外检查它是否是对象（jQuery.Event具有typeof object）：

    if (typeof(xmin) == 'undefined' || typeof(xmin) == 'object') xmin = 0;

Answer 2

点击对我有效。

我使用了Flot示例中的代码：

$("#checkboxes").find("input").click(plotAccordingToChoices);

点击复选框调用：

function plotAccordingToChoices() {
    var data = [];

    $("#checkboxes").find("input:checked").each(function () {
        var key = $(this).attr("name");
        if (key && datasets[key])
            data.push(datasets[key]);
    });

    if (data.length > 0){
        plot = $.plot($("#chart1"), data, options);
    }
}

数据集是由集名称键控的全局数组，在初始化时创建。

flot：缩放，悬停和系列选择在同一个图中

2 个答案: