flot: увеличение, наведение и выбор серии на одном графике

Question

Я пытаюсь нанести 3 разных сериала на один сюжет. Я хочу сделать следующее в сюжете:

• позволяет пользователю выбрать, какие серии будут отображаться (пример " Включение / выключение серии " на веб-сайте flot),
• позволяет пользователю увеличивать и уменьшать масштаб (пример " Прямоугольное выделение с увеличением "),
• показывает значения кривых, когда пользователь наводит мышь (пример " Отслеживание кривых ").

Я давно пытаюсь заставить это работать, и я не могу заставить все работать. Моя текущая попытка не может правильно включить / выключить серию. Как только я поставлю галочку, график станет пустым. Файл 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, а не click из-за ответа на этот вопрос . Если я использую click, то установка / снятие флажков, кажется, не имеет никакого эффекта.

Я уверен, что пропускаю что-то простое, но не могу понять, что. Я хотел бы иметь возможность делать все 3 вещи, которые я пытаюсь сделать во флоте.

Спасибо!

Answer 1

Ваша проблема в том, что do_plot вызывается из вашего события изменения, а xmin является объектом события jQuery.Вы ожидаете, что он будет неопределенным, а затем будете установлены в 0, но вместо этого вы передаете xmin: jQuery.Event для flot, который не знает, что с ним делать.

Редактировать : Так как кто-то спросил, фактический код, который вы, возможно, захотите вставить туда, при проверке, если xmin не определен, дополнительно проверьте, является ли он объектом (jQuery.Event имеет тип object):

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

Answer 2

Click работает для меня.

Я использую код из примера 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);
    }
}

наборы данныхглобальный массив с заданным именем, созданный при инициализации.