當在網頁中輸入表單數據時，以繪圖方式更新繪圖

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...
}