这个论坛总是对不同的编码问题提供快速而好的评论。今天我需要你的帮助！请
我有一个HTML项目，我想添加一些功能。我必须在函数(f(x_r))的基础上创建一个图。该函数将取决于两个参数x1和x2。
我希望这两个参数来自输入范围(E_sursa和r_intern(。我尝试过不同的方法，但无法将例如x1或x2作为参数或常数(来自函数citire(。我也尝试了这个论坛上提出的一些旧方法，但它们都不起作用。
抱歉，代码中的某些单词是罗马尼亚语。
目标："var x1=1；var x2=1；"根据(E_sursa和r_intern or(更新其值x1来自函数citire，将在第一个srpt中使用(这个函数的var x1=1；(
编辑如何替换var x1；使用var中的值'x1=document.getElementById("r_sursa"(.value；'我试着把它作为一个参数来读取(调用一个函数(，但它没有起作用：'函数Resis((｛return document.getElementById("r_sursa"(.value；｝var x1=Resis(((；'
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
zoomEnabled: true,
title:{
text: "power"
},
axisY :{
includeZero:false
},
data: data // random generator below
});
chart.render();
}
var limit = 100;
var x1=1;
var x2=1;
var y = 0;
var data = [];
var dataSeries = { type: "line" };
var dataPoints = [];
for (var i = 0; i < limit; i += 1)
{ x_r = i/10;
y = x2*x2*x_r/((parseFloat(x1)+x_r)*(parseFloat(x1)+x_r));
dataPoints.push({
x: x_r,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 370px; width: 50%;">
</div>
<label for="r_sursa">resistance</label>
<input type="range" id="r_sursa" name="r_sursa" min="0" max="10" step="0.1">
<b id="demo1"></b>
<br>
<label for="E_sursa">voltage</label>
<input type="range" id="E_sursa" name="E_sursa" min="0" max="12" step="0.1">
<b id="demo2"></b>
<br>
<label for="R_sarcina">ohms</label>
<input type="range" id="R_sarcina" name="R_sarcina" min="0" max="10" step="0.1">
<b id="demo3"></b>
<br>
amps
<b id="demo4"></b>
<br>
power
<b id="demo5"></b>
<br>
<script>
function citire() {
var x1 = document.getElementById("r_sursa").value;
var x2 = document.getElementById("E_sursa").value;
var x3 = document.getElementById("R_sarcina").value;
var curent, putere;
y=parseFloat(x1)+parseFloat(x3);
curent = x2/(parseFloat(x1)+parseFloat(x3));
putere = x2*x2*x3/((parseFloat(x1)+parseFloat(x3))*(parseFloat(x1)+parseFloat(x3)));
document.getElementById("demo1").innerHTML = x1 + " Ω";
document.getElementById("demo2").innerHTML = x2 + " V";
document.getElementById("demo3").innerHTML = x3 + " Ω";
document.getElementById("demo4").innerHTML = curent.toFixed(2)+ " A";
document.getElementById("demo5").innerHTML = putere.toFixed(2)+ " W";
}
setInterval(function() { citire(); },0);
</script>
</body>
</html>
您应该重新分配chart对象的data属性，然后在每次有新数据集时调用render()方法。
为了满足您在加载时将x1分配给滑块值的需要，您可以通过阅读下面的示例代码轻松地自己计算。
<!DOCTYPE HTML>
<html>
<head>
<script>
var limit = 100;
var chart;
function getData() {
var x1 = parseFloat(document.getElementById("r_sursa").value);
var x2 = 1;
var y = 0;
var data = [];
var dataSeries = {
type: "line"
};
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
x_r = i / 10;
y = x2 * x2 * x_r / ((parseFloat(x1) + x_r) * (parseFloat(x1) + x_r));
dataPoints.push({
x: x_r,
y: y
});
}
dataSeries.dataPoints = dataPoints;
data.push(dataSeries);
return data
}
window.onload = function() {
chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
zoomEnabled: true,
title: {
text: "power"
},
axisY: {
includeZero: false
},
data: getData() // random generator below
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 50%;">
</div>
<label for="r_sursa">resistance</label>
<input type="range" id="r_sursa" name="r_sursa" min="0" max="10" step="0.1">
<b id="demo1"></b>
<br>
<label for="E_sursa">voltage</label>
<input type="range" id="E_sursa" name="E_sursa" min="0" max="12" step="0.1">
<b id="demo2"></b>
<br>
<label for="R_sarcina">ohms</label>
<input type="range" id="R_sarcina" name="R_sarcina" min="0" max="10" step="0.1">
<b id="demo3"></b>
<br>
amps
<b id="demo4"></b>
<br>
power
<b id="demo5"></b>
<br>
<script>
function citire() {
var x1 = document.getElementById("r_sursa").value;
var x2 = document.getElementById("E_sursa").value;
var x3 = document.getElementById("R_sarcina").value;
var curent, putere;
y = parseFloat(x1) + parseFloat(x3);
curent = x2 / (parseFloat(x1) + parseFloat(x3));
putere = x2 * x2 * x3 / ((parseFloat(x1) + parseFloat(x3)) * (parseFloat(x1) + parseFloat(x3)));
document.getElementById("demo1").innerHTML = x1 + " Ω";
document.getElementById("demo2").innerHTML = x2 + " V";
document.getElementById("demo3").innerHTML = x3 + " Ω";
document.getElementById("demo4").innerHTML = curent.toFixed(2) + " A";
document.getElementById("demo5").innerHTML = putere.toFixed(2) + " W";
chart.options.data = getData();
chart.render()
}
setInterval(function() {
citire();
}, 0);
</script>
</body>
</html>