Как сохранить пользовательские данные для создания круговой диаграммы?

Я хочу собирать данные из текстовых полей ввода формы, где пользователь заполняет свои значения для различных элементов круговой диаграммы, а затем, когда он нажимает кнопку отправки, создается круговая диаграмма с тегом. Я построил тестовую версию с фиксированными значениями здесь:

<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]; читал значения, вставленные пользователем в формы ввода. Как я могу сделать это правильно?

И как я могу нарисовать круговую диаграмму после того, как пользователь нажмет кнопку создания?


javascript canvas pie-chart
person a.litis    schedule 06.01.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Во-первых, я бы добавил идентификаторы к элементам формы, чтобы они были более доступными:

<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? Все ли они должны быть определены?

В любом случае есть над чем подумать.

person Jeff B    schedule 06.01.2012
comment
Привет, ребята, я не могу не заметить, что ваш вопрос немного связан с моим вопросом здесь: stackoverflow.com/questions/9781012/ Надеюсь, вы сможете помогите мне с Джеффом Б. Просто дайте мне знать, если что-то неясно. - person Tristan Jade Awat; 21.03.2012

arrow_upward
0
arrow_downward

У меня есть немного другое решение, которое позволяет пользователю напрямую манипулировать клиньями круговой диаграммы. Использует d3.js и jQuery. Приветствуется обратная связь!

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

person Peter Ehrlich    schedule 25.01.2013