Question

我想从表单输入文本框中收集数据，其中用户填写不同饼图元素的值，然后当他单击提交按钮时，会生成带有标记的饼图。我在这里构建了一个具有固定值的测试版本：

<form style="margin-bottom: 50px;">
1 value: <input type="number" placeholder="In 100% percentage.." name="first" max="100"><br/>
2 value: <input type="number" placeholder="In 100% percentage.." name="second"max="100" ><br>
3 value: <input type="number" placeholder="In 100% percentage.." name="third" max="100"><br/>
4 value: <input type="number" placeholder="In 100% percentage.." name="fourth" max="100"><br>
</form>

<input type="submit" name="submit" value="Generate Pie-Chart" style="margin-bottom: 30px;">



<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">

var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"];
var myData = [100,30,20,60,40];

function getTotal(){
    var myTotal = 0;
    for (var j = 0; j < myData.length; j++) {
        myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
    }
    return myTotal;
}

function plotData() {
    var canvas;
    var ctx;
    var lastend = 0;
    var myTotal = getTotal();

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < myData.length; i++) {
        ctx.fillStyle = myColor[i];
        ctx.beginPath();
        ctx.moveTo(200,150);
        ctx.arc(200,150,150,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false);
        ctx.lineTo(200,150);
        ctx.fill();
        lastend += Math.PI*2*(myData[i]/myTotal);
    }
}

plotData();

</script>

但我希望var myData = [100,30,20,60,40];读取输入表单中用户插入的值。我怎么能正确地做到这一点？

如何在用户点击生成按钮后绘制饼图？

Answer 1

首先，我会在表单元素中添加ID，以便更容易访问它们：

<form style="margin-bottom: 50px;">
1 value: <input type="number" placeholder="In 100% percentage.." id="first" name="first" max="100"><br/>
2 value: <input type="number" placeholder="In 100% percentage.." id="second" name="second" max="100" ><br>
3 value: <input type="number" placeholder="In 100% percentage.." id="third" name="third" max="100"><br/>
4 value: <input type="number" placeholder="In 100% percentage.." id="fourth" name="fourth" max="100"><br>
</form>

<input type="submit" name="submit" value="Generate Pie-Chart" style="margin-bottom: 30px;" id="plotSubmit">

其次，在提交按钮中添加一个处理程序，如下所示：

document.getElementById("plotSubmit").onclick = generatePie;

然后，定义你的处理函数：

function generatePie() {
    // Grab values from inputs and put them in the data array:
    myData[1] = document.getElementById("first").value;
    myData[2] = document.getElementById("second").value;
    myData[3] = document.getElementById("third").value;
    myData[4] = document.getElementById("fourth").value;

    // Call plotData again:
    plotData();
}

以下是一个工作示例：http://jsfiddle.net/F5YRL/

使用一些jQuery会更容易，但是在这个简单的形式中它并不可怕。

您可能还需要考虑为数据添加一些验证。例如，它们都应该是合法的数字。这些值是否需要加起来为100？他们都需要定义吗？

无论如何都要考虑一下。

Answer 2

我有一个稍微不同的解决方案，它允许用户直接操作饼图楔形。使用d3.js和jQuery。欢迎反馈！

http://pehrlich.github.com/piechart_inputs/

如何存储用户数据以创建饼图？

2 个答案: