根据输入范围更新图形
[英]Updating graph based on input range
问题描述
这个论坛总是对不同的编码问题提供快速和好的评论。 今天我需要你的帮助！ 请！
我在 HTML 有一个项目，我想添加一些功能。 我必须基于 function (f(x_r))创建一个图表。 这个 function 将取决于两个参数，x1 和 x2。
我希望这两个参数来自输入范围（ E_sursa和r_intern ）。 我尝试了不同的方法，但我无法使例如x1或x2成为参数或常量（来自 function citire ）。 我也尝试了这个论坛中介绍的一些旧方法，但它们不起作用。
抱歉，代码中的一些单词是罗马尼亚语。
目标：“var x1=1；var x2=1；” 根据 function citire 中的 (E_sursa 和 r_intern 或 ) x1 更新它们的值，以用于第一个 sript (这个带有 var x1=1;)
编辑我如何替换 var x1; 使用来自 var 'x1 = document.getElementById("r_sursa").value;' 的值我尝试将其作为参数读取（以调用函数），但它不起作用：'function 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>
1 个解决方案
解决方案1
0 已采纳 2020-04-04 18:25:16
您应该重新分配chart object 的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>
根据输入范围更新显示的文本量
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.