Пользовательская подвижная горизонтальная линия в диаграмме флота jQuery

Question

Я создал линейную диаграмму с Flot. Шкала Y достигает, например, от 0 до 100. Теперь у меня есть поле ввода, в котором пользователь может ввести число от 0 до 100.

Если он хочет, скажем, 80, я хочу создать горизонтальную линию на диаграмме при Y = 80, указав выбранное значение. Эта линия должна быть настроена в любое время.

Я ничего не нашел до сих пор, но надеюсь, что кто-то может мне помочь.

Answer 1

Используйте опцию markings для чтения значения из входного и перерисовывать диаграмму при изменении входной величины, что-то вроде этого:

var yvalue = parseInt($('#yvalue').val()); 
plot.getOptions().grid.markings = [ { yaxis: { from: yvalue, to: yvalue}, color: "#0000bb" } ]; 
plot.setupGrid(); 
plot.draw(); 

Вот fiddle с подобным примером.