当在网页中输入表单数据时，以绘图方式更新绘图

Question

js新手在这里。 我正在尝试在如下所示的网页上创建一个交互式绘图。 更改字段中的值时，可以更新图吗？

我的js代码如下所示：

function generate_x(low, high) {
  var x = [];
  for (var i = low; i <= high; i++) {
      x.push(i);
  }
  return x;
}
function f1(x, n_beds){
  //do something
  var y = x
  return y;
}
function f2(x, n_beds){
  //do something
  var y = x
  return y;
}

var v1 = document.getElementById("v1").value;
var v2 = document.getElementById("v2").value;
var v3 = document.getElementById("v3").value;
var v4 = document.getElementById("v4").value;

var x = generate_x(0, 100)
var trace1 = {
  x: x,
  y: f1(x, n_beds),
  type: "scatter"
};
var trace2 = {
  x: x,
  y: f2(x, n_beds),
  type: "scatter"
};
Plotly.newPlot("plot", data);

Answer 1

很多人使用jquery使其更易于实现。 我看不到您的HTML，但是我敢肯定变量v1，v2，v3和v4对应于上面的屏幕快照中的四个文本输入。 因此，jQuery使您可以处理诸如change之类的事件。 您可以在编写的函数中更新PLotly数据，以处理输入中的更改事件。

$("#v1").change(function () {
   //Update your Plotly data here...
}