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

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

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>

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

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

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

为了实现你想要的，你有两种一般的可能性：

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

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中也有一些错误/改进。

&字符是 html 中的特殊实体。使用&.
不要在head中创建可见的html(您的div在那里，div属于body标签(
添加label标记。否则，用户在开始键入时无法看到该字段的内容。
尽量避免使用 html 进行布局。为此使用 CSS。在您的示例中，删除所有br元素，例如在包装div上使用网格布局。
将脚本移动到正文标记的末尾，而不是头部。这不是错误，但建议用于 html5，因此正文已完全初始化，用户可以在 javascript 解析需要时间之前看到内容。

相关内容

最新更新

热门标签：