如何在 HTML 中绘制多个变量的两个输入

Question

我正在尝试编写一个页面，要求输入用户的生活优先事项，然后输入用户在每个优先事项上花费的时间。最终结果是一个聊天栏，显示花费的时间是否符合生活优先级。我已经将以下代码拼接在一起，但无法正常工作。任何援助将不胜感激。

function addDataPointsAndRender() {
  var car = Number(document.getElementById("Career").value);
  var carT= Number(document.getElementById("CareerT").value);
  var fin = Number(document.getElementById("Finance").value);
  var finT = Number(document.getElementById("FinanceT").value);
  var PG = Number(document.getElementById("PG").value);
  var PGT = Number(document.getElementById("PGT").value);
  var heal = Number(document.getElementById("Health").value);
  var healT = Number(document.getElementById("HealthT").value);
  var fam = Number(document.getElementById("Family").value);
  var famT = Number(document.getElementById("FamilyT").value);
  var rel = Number(document.getElementById("Relationships").value);
  var relT = Number(document.getElementById("RelationshipsT").value);
  var SL = Number(document.getElementById("SL").value);
  var SLT = Number(document.getElementById("SLT").value);
  var att = Number(document.getElementById("Attitude").value);
  var attT = Number(document.getElementById("AttitudeT").value);
}

//Start function to draw chart. End on line XX
function generateChart(){
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Time Graph"

      },   
      data: [{        
        type: "column",
        // Call the entered dataPoints using the variable declared above
        dataPoints: [
        { x: 10, y: "car", label: "Career" },

        { x: 20, y: fin, label: "Finance"},

        { x: 30, y: PG, label: "Personal Growth" },

        { x: 40, y: heal, label: "Health" },

        { x: 50, y: fam, label: "Family" },

        { x: 60, y: rel, label: "Relationships" },

        { x: 70, y: sl, label: "Social Life" },

        { x: 80, y: att, label: "Attitude" },

        ]
      },
      {        
        type: "column",
        dataPoints: [
        { x: 10, y: carT},
        { x: 20, y: finT},
        { x: 30, y: PGT},
        { x: 40, y: healT},
        { x: 50, y: famT},
        { x: 60, y: relT},
        { x: 70, y: SLT},
        { x: 80, y: attT},
        ]
      }        
      ]
    });

    chart.render();
  }
}

(function(){
  var renderButton = document.getElementById("renderButton");
  renderButton.addEventListener("click", addDataPointsAndRender);
})();

    <!DOCTYPE HTML>
    <html>
    <head>
      <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div class="col-sm-4" id="userdata">
      <h3>Enter your data</h3>
      <input type="number" id="Career" placeholder="Career: Rating">
      <input type="number" id="CareerT" placeholder="Career: Time">
      <br>
      <input type="number" id="Finance" placeholder="Finance: Rating">
      <input type="number" id="FinanceT" placeholder="Finance: Time">
      <br>
      <input type="number" id="PG" placeholder="Personal Growth: Rating">
      <input type="number" id="PGT" placeholder="Personal Growth: Time">
      <br>
      <input type="number" id="Health" placeholder="Health: Rating">
      <input type="number" id="HealthT" placeholder="Health: Time">
      <br>
      <input type="number" id="Family" placeholder="Family: Rating">
      <input type="number" id="FamilyT" placeholder="Family: Time">
      <br>
      <input type="number" id="Relationships" placeholder="Relationships: Rating">
      <input type="number" id="RelationshipsT" placeholder="Relationships: Time">
      <br>
      <input type="number" id="SL" placeholder="Social Life: Rating">
      <input type="number" id="SLT" placeholder="Social Life: Time">
      <br>
      <input type="number" id="Attitude" placeholder="Attirude: Rating">
      <input type="number" id="AttitudeT" placeholder="Attitude: Time">
      <br>
      <button id="renderButton">Add DataPoint &amp; Render</button>
    </div>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
  </body>
</html>

Answer 1

以下代码是您的代码的工作片段。

您的问题是，您在页面加载完成后立即初始化图表。用户尚未设置要加载的值（优先级）。此外，您正在读取一个函数中的值，因此它们在函数范围内。但是您正在全局 space 中初始化图形。那里无法访问函数值。

您还向图表中添加了多个图表，并在一个数据点中添加了多个数据点。

要实现您想要的，一般有两种可能性：

在用户单击按钮时创建图表（我在示例中这样做）
创建图形，但在用户单击按钮时添加数据点

function addDataPointsAndRender() {
  var car = Number(document.getElementById("Career").value);
  var carT= Number(document.getElementById("CareerT").value);
  var fin = Number(document.getElementById("Finance").value);
  var finT = Number(document.getElementById("FinanceT").value);
  var PG = Number(document.getElementById("PG").value);
  var PGT = Number(document.getElementById("PGT").value);
  var heal = Number(document.getElementById("Health").value);
  var healT = Number(document.getElementById("HealthT").value);
  var fam = Number(document.getElementById("Family").value);
  var famT = Number(document.getElementById("FamilyT").value);
  var rel = Number(document.getElementById("Relationships").value);
  var relT = Number(document.getElementById("RelationshipsT").value);
  var SL = Number(document.getElementById("SL").value);
  var SLT = Number(document.getElementById("SLT").value);
  var att = Number(document.getElementById("Attitude").value);
  var attT = Number(document.getElementById("AttitudeT").value);
  
  var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "Time Graph"
    },
    data: [{
      type: "column",
      dataPoints: [
        { x: 5, y: car},
        { x: 10, y: carT},
        { x: 15, y: fin},
        { x: 20, y: finT},
        { x: 25, y: PG},
        { x: 30, y: PGT},
        { x: 35, y: heal},
        { x: 40, y: healT},
        { x: 45, y: fam},
        { x: 50, y: famT},
        { x: 55, y: rel},
        { x: 60, y: relT},
        { x: 65, y: SL},
        { x: 70, y: SLT},
        { x: 75, y: att},
        { x: 80, y: attT}
      ]
    }]
  });
  chart.render();
}

window.onload = function () {
  var renderButton = document.getElementById("renderButton");
  renderButton.addEventListener("click", addDataPointsAndRender);
}

<!DOCTYPE HTML>
    <html>
    <head>
      <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    <body>
    <div class="col-sm-4" id="userdata">
      <h3>Enter your data</h3>
      <input type="number" id="Career" placeholder="Career: Rating">
      <input type="number" id="CareerT" placeholder="Career: Time">
      <br>
      <input type="number" id="Finance" placeholder="Finance: Rating">
      <input type="number" id="FinanceT" placeholder="Finance: Time">
      <br>
      <input type="number" id="PG" placeholder="Personal Growth: Rating">
      <input type="number" id="PGT" placeholder="Personal Growth: Time">
      <br>
      <input type="number" id="Health" placeholder="Health: Rating">
      <input type="number" id="HealthT" placeholder="Health: Time">
      <br>
      <input type="number" id="Family" placeholder="Family: Rating">
      <input type="number" id="FamilyT" placeholder="Family: Time">
      <br>
      <input type="number" id="Relationships" placeholder="Relationships: Rating">
      <input type="number" id="RelationshipsT" placeholder="Relationships: Time">
      <br>
      <input type="number" id="SL" placeholder="Social Life: Rating">
      <input type="number" id="SLT" placeholder="Social Life: Time">
      <br>
      <input type="number" id="Attitude" placeholder="Attirude: Rating">
      <input type="number" id="AttitudeT" placeholder="Attitude: Time">
      <br>
      <button id="renderButton">Add DataPoint &amp; Render</button>
    </div>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
  </body>
</html>

PS: 你的html里也有一些errors/improvments.

& 字符是 html 中的一个特殊实体。使用 &.
不要在 head 中创建可见的 html（你的 div 在那里，div 属于 body 标签）
添加 label 标签。否则，用户在开始输入时无法看到该字段的内容。
尽量避免用html布局。为此使用 CSS。在您的示例中，删除所有 br 元素并在包装 div.

grid layout

将脚本移动到 body 标签的末尾，而不是头部。这不是错误，但建议用于 html5，因此正文已完全初始化，用户可以在 javascript 解析花费时间之前看到内容。

如何在 HTML 中绘制多个变量的两个输入

How to chart two inputs of several variables in HTML

html

javascript

charts

user-input