作为巴拉圭培训项目的一部分，我尝试将函数图集成到 JavaScript 脚本中。浏览网页时，我发现一个选项不太适合我，所以我将图表放入页面内。我正在分享我的基础水合作用计算器的代码以及我一直在尝试获取图表的 JavaScript 脚本：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculadora de hidratación</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<div id="calculadora">
<h2>Hidratación Basal</h2>
<input type="number" id="peso" placeholder="Indicar peso en kilogramos" />
<button onclick="calcular(); mostrarGrafica(parseInt(document.getElementById('peso').value))" </button>
</div>
<div>
<p1>
<output id="Resultado"></output>
</p1>
</div>
<div id="descripcion">
<h3>¿Cómo se calcula?</h3>
<ul>
<li>De 0kg a 10kg, se calcula 100cc por cada kilo.</li>
<li>Se suman 50cc por cada kilo de peso por arriba de 10kg, hasta 20kg</li>
<li>De 20kg y hasta 30kg, se suman 20cc por cada kilo adicional</li>
<li>De 30kg para arriba, se determina mediante la superficie corporal del paciente </li>
</ul>
</div>
</div>
<div>
<canvas id="grafica" width="400" height="200"></canvas>
</div>
<script src="./index-calculadoralucas.js"></script>
</body>
</html>
Javascript
function calcular() {
var number = parseInt(document.getElementById("peso").value);
var resultado = document.getElementById("Resultado");
if (number >= 0 && number <= 10) {
resultado.innerHTML = "La cantidad necesaria es: " + (number * 100 / 16) + "cc/hr";
} else if (number > 10 && number <= 20) {
resultado.innerHTML = "La cantidad necesaria es: " + (((number - 10) * 50 + 1500) / 16) + "cc/hr";
} else if (number > 20 && number <= 30) {
resultado.innerHTML = "La cantidad necesaria es: " + (((number - 20) * 20 + 1500) / 16) + "cc/hr";
} else if (number > 30) {
resultado.innerHTML = "La cantidad necesaria es: " + (((((number * 4 + 7) / (number + 90)) * 2000) / 24).toFixed(2)) + "cc/hr";
} else {
resultado.innerHTML = "Ingrese un número válido";
}
}
function mostrarGrafica(peso) {
var ctx = document.getElementById('grafica').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['0', '10', '20', '30'],
datasets: [{
label: 'Función de cálculo',
data: calcularFuncion(peso),
borderColor: '#e50914',
borderWidth: 2,
fill: false
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
},
y: {
min: 0
}
}
}
});
}
其目的是，当用户输入权重时，脚本会识别要在二维坐标图中计算的函数。这不是该计划中的必要要求，但我发现有趣的是，根据为体重超过 30 公斤的患者提供的公式，当极限接近无穷大时，基础水合值趋于等于 333.33。
你的代码有很多问题。脚本不应该在 html 之后。您错过了calcularFunction，您的按钮内部没有任何文本。 style.css 也丢失了。此代码是您的代码的更正版本，带有 calularFunction，也许您想更改它。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculadora de hidratación</title>
<link rel="stylesheet" href="./style.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div>
<div id="calculadora">
<h2>Hidratación Basal</h2>
<input type="number" id="peso" placeholder="Indicar peso en kilogramos"/>
<button onclick="calcular(); mostrarGrafica(parseInt(document.getElementById('peso').value))">x
</button>
</div>
<div>
<p1><output id="Resultado"></output></p1>
</div>
<div id="descripcion">
<h3>¿Cómo se calcula?</h3>
<ul>
<li>De 0kg a 10kg, se calcula 100cc por cada kilo.</li>
<li>Se suman 50cc por cada kilo de peso por arriba de 10kg, hasta 20kg</li>
<li>De 20kg y hasta 30kg, se suman 20cc por cada kilo adicional</li>
<li>De 30kg para arriba, se determina mediante la superficie corporal del paciente
</li>
</ul>
</div>
</div>
<div>
<canvas id="grafica" width="400" height="200"></canvas>
</div>
<script >
function calcularFuncion(peso) {
var values = [];
for (var i = 0; i <= 30; i++) {
if (i >= 0 && i <= 10) {
values.push(i * 100 / 16);
} else if (i > 10 && i <= 20) {
values.push(((i - 10) * 50 + 1500) / 16);
} else if (i > 20 && i <= 30) {
values.push(((i - 20) * 20 + 1500) / 16);
} else if (i > 30) {
values.push(((((i * 4 + 7) / (i + 90)) * 2000) / 24).toFixed(2));
}
}
return values;
}
function calcular(){
var number = parseInt(document.getElementById("peso").value);
var resultado = document.getElementById("Resultado");
if (number >= 0 && number <= 10) {
resultado.innerHTML = "La cantidad necesaria es: " + (number * 100 / 16) + "cc/hr";
} else if (number > 10 && number <= 20) {
resultado.innerHTML = "La cantidad necesaria es: " + (((number - 10) * 50 + 1500) / 16) + "cc/hr";
} else if (number > 20 && number <= 30) {
resultado.innerHTML = "La cantidad necesaria es: " + (((number - 20) * 20 + 1500) / 16) + "cc/hr";
} else if (number > 30) {
resultado.innerHTML = "La cantidad necesaria es: " + (((((number * 4 + 7) / (number + 90)) * 2000) / 24).toFixed(2)) + "cc/hr";
} else {
resultado.innerHTML = "Ingrese un número válido";
}
}
function mostrarGrafica(peso) {
var ctx = document.getElementById('grafica').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['0', '10', '20', '30'],
datasets: [{
label: 'Función de cálculo',
data: calcularFuncion(peso),
borderColor: '#e50914',
borderWidth: 2,
fill: false
}]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
},
y: {
min: 0
}
}
}
});
}
</script>
</body>
</html>