我有一个饼图页面(canvas 2d),它使用 js 函数创建。 有了这个功能,我就可以在 html 中输入一些值来绘制饼图。 它在代码中看起来像这样
<script id="chart">
piechart("piechart1", ["cyan", "yellow", "green"], [ 75, 75, 75]);
</script>
这意味着我可以为我的图表输入固定的颜色/Angular 。 我想要做的是尝试制作一些文本输入区域,以便我可以输入数字,并且脚本可以自动更改为正在输入的数字或使用提交按钮。
这就是我目前所有的东西,有人可以帮我吗?
<canvas id="piechart1"></canvas>
<script id="chart">
piechart("piechart1", ["cyan", "yellow", "green"], [ 75, 75, 75]);
</script>
<form action="" method="post">
<label>Angle 1</label>
<label>Angle 2</label>
<label>Angle 3</label>
<br>
<input name="" id="angle1" value="" type="number">
<input name="" id="angle2" value="" type="number">
<input name="" id="angle3" value="" type="number">
<input type="submit" id="submitBtn" value="submit">
</form>
假设我在第一个文本区域输入 100 并单击提交,然后单击我的
piechart("..........[ 75, 75, 75]);
会变成
饼图(".........[ 100, 75, 75]);
或
piechart("..........[ 100, 0, 0]);
因为我没有在第二和第三个文本区域输入任何内容
提前致谢。
最佳答案
这并不是真正的传递值。它只是在您按下按钮时调用一个函数:
$(document).ready(function() {
$('form').on('submit', function(e) {
e.preventDefault(); // we don't want to submit the form
$('#piechart').each(function() { // only do this if the element is found
// clear the canvas
this.getContext('2d').clearRect(0, 0, this.width, this.height);
});
var angles = [
$('#angle1').val() || 0,
$('#angle2').val() || 0,
$('#angle3').val() || 0
];
piechart("piechart1", ["cyan", "yellow", "green"], angles);
});
});
val()
获取 input
元素的值。我们做|| 0
将其设置为 0
以防浏览器不理解 type="number"
并向我们发送一个空字符串。
关于javascript - 如何使用 jQuery/javascript 传递值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19855709/