如何存儲用戶數據以創建餅圖？

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/