1

我有一个带有饼图（canvas 2d）的页面，它使用 js 函数创建。使用该功能，我可以在 html 中输入一些值来绘制饼图。它只是在代码中看起来像这样

  <script id="chart">
     piechart("piechart1", ["cyan", "yellow", "green"], [ 75, 75, 75]);
  </script>

这意味着我可以为我的图表输入固定的颜色/角度。我想要做的是尝试制作一些文本输入区域，以便我可以输入数字，并且脚本可以自动更改为正在输入的数字或使用提交按钮。

这就是我目前所拥有的一切，有人可以帮我解决这个问题吗？

<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]);会变成

piechart("..........[ 100, 75, 75]); 或者

piechart("..........[ 100, 0, 0]);因为我没有在第二和第三文本区域输入任何内容

提前致谢。

4

3 回答 3

2

这并不是真正的传递值。当您按下按钮时，它只是调用一个函数：

$(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"并向我们发送一个空字符串。

于 2013-11-08T09:41:31.090 回答
1

试试这个，根据需要更改代码

<canvas id="piechart1"></canvas>
<script type="text/javascript" >
$(function() {
$("#submitBtn").click(function() 
    {   
    var input1 = $("#angle1").val();
    if($("#angle1").val()=='') input1="";

    var input2 = $("#angle2").val();
    if($("#angle2").val()=='') input2="";

    var input3 = $("#angle3").val();
    if($("#angle3").val()=='') input3="";

    piechart("piechart1", ["cyan", "yellow", "green"], [input1, input2, input3]);

    });
});
</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>
于 2013-11-08T09:55:01.597 回答
0

我会这样做：

$('form').on('submit', function (e) {
    e.preventDefault();
    var angles = $('input[id^="angle"]').map(function () {
        return (this.value !== "") ? this.value : 0;
    }).get();
    console.log(angles);
    piechart("piechart1", ["cyan", "yellow", "green"], angles);
});

在这里试用小提琴

于 2013-11-08T09:51:58.323 回答