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

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

我有一個略有不同的解決方案，它允許用戶直接操作餅圖楔形。 使用d3.js和jQuery。 歡迎反饋！

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

Answer 2

首先，我將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嗎？ 是否都需要定義它們？

無論如何都要考慮一下。