flot：放大，悬停和系列选择在同一个地块

Question

我想在同一个地块上绘制3个不同的系列。我想要做的情节如下：

• 允许用户选择哪个系列的绘制（” 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> 

我使用change并没有因为this question's answerclick。如果我使用click，那么选择/取消选择复选框似乎没有任何作用。

我确定我忽略了一些简单的东西，但我无法弄清楚什么。我希望能够完成我想要做的所有3件事。

谢谢！

Answer 1

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

编辑：既然有人问，实际的代码，你可能想就摆在那里，检查时如果XMIN是不确定的，另外检查是否是一个对象（jQuery.Event有一个typeof运算object）：

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

Answer 2

点击确实对我有效。

我使用的代码从海军报例如：

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

数据集是集名称键和初始化创建一个全局数组。