помогите советом(можно кодом)
Вложений: 1
начал делать курсовую работу задача сделать ежедневник с постройкой гистограммы расхода времени.
сделала набросок но не могу понять как заполнить массив из <input type="text> так как они создаются по нажатию на кнопку "+". и подскажите что почитать для построение гистограмм желательно без css. Как заполнить google.visualization.arrayToDataTable значениями из <input type="text" value="" name="job"> и<input type="text" value="" name="taim">
<!DOCTYPE>
<html>
<head>
<script src="jquery-1.10.2.js"></script>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#te{
background-color: #fffacd;
width: 370px
}
#graf{
background-color: #33ff33;
}
#d{ float:left;width:40%;height:40px;text-align:center;background-color:#FF9999;}
#test1{
float:right;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="d">ЕЖЕДНЕВНИК</div>
<div id="graf">График
<div id="test"></div>
<div id="test1"> <div id="barchart_values" style="width: 900px; height: 300px;"> </div>
</div></div>
</div>
<div id="te">
<div id="newt">
<input type="text" value="" name="taim">
<input type="text" value="" name="job">
<input type="button" value="+" id="cop" onclick="addFie()">
</div>
</div>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "время(ч)", { role: "style" } ],
["сон", 5, "#b87333"],
["завтрак", 0.3, "silver"],
["уход в институт ", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Распорядок дня",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
function addFie()
{
var a=1;
var b=1;
a++;
b++;
var p = document.createElement("div");
var k = document.createElement("div");
p.innerHTML = "<input name=\"taim_" +a+ "\" type=\"text\" />" + "<input name=\"job_" +b+ "\" type=\"text\" />";
document.getElementById("newt").appendChild(p);
document.getElementById("newt").appendChild(k);
}
</script>
</body>
</html>
что впринцепи должно получится гистограмма взята проста для наглядности |
|
почему обновляются текстовые поля http://learn.javascript.ru/play/MEbTQ
|
Не совсем понятно, что именно делать-то надо.
А ближе к курсовой все же было бы хорошо с jQuery познакомиться. Все бы вышло намного быстрее и легче http://jquery-docs.ru/ |
Эллурн,
нужно построить гистограммы. время заполняется из текстовых полей |
А что конкретно не получается? Если абсолютно все - то это в раздел работа (или мне в личку). Если пытаетесь разобраться сами - нужно точное указание, что как делаете и где какой косяк)
|
Эллурн,
не могу понять как сделать массив из <input type="text" value="" name="taim"> |
nub, это на каком языке:
var taimArray;
taimArray =taimArray();
acrinArray=[];
document.getElementsByName('taim')=taimArray;
Вам нужно добавить событие (на кнопку какую-нибудь или отслеживать изменение текстовых полей), как-нибудь так (событие на клике по диву "ежедневник"):
document.getElementById('d').addEventListener('click', function() {
Array.prototype.forEach.call(document.getElementsByName('taim'), function(item, i, arr) {
alert(item.value);
});
});
|
Цитата:
|
<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
height: 500px;
}
#grafic{
background-color: #33ff33;
}
#grafic-d{
height:40px;
text-align:center;
background-color:#FF9999;
width: 100%;
}
.b-container {
width: 100%;
}
.b-container--container-item {
float: left;
}
.b-dairly {
display: inline-block;
width: 700px;
}
.b-grafic {
display: inline-block;
width: 100%;
}
.eRow{
padding: 0;
margin: 0;
border: 1px gray solid;
}
.eColomn {
display: inline-block;
width: 17%;
height: 25px;
padding: 5px;
text-align: center;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div class="b-container">
<div class="clearfix">
<div class="b-container--container-item">
<div class="b-dairly">
<div id="grafic-d">ЕЖЕДНЕВНИК</div>
<div class="eDivTable"></div>
<div>
<input type="button" class="eButtonAdd" value="Add new notice" />
</div>
</div>
</div>
<div class="b-container--container-item">
<div class="b-grafic">
<div id="grafic">График</div>
<div id="test1">
<div id="barchart_values" style="width: 500px; height: 300px;"></div>
</div>
</div>
</div>
</div>
</div>
<script>
function fReturnInitArray(){
return [
["Element", "время(ч)", { role: "style" } ],
["сон", 5, "#b87333"],
["завтрак", 0.3, "silver"],
["уход в институт ", 19.30, "gold"],
["Platinum", 21.45, "color: #e5e4e2"]
];
};
function fBuildArray(eDivTable){
var aArray = new Array();
aArray.push(fReturnInitArray()[0]);
var eRowSum = eDivTable.querySelectorAll('.eRow');
//console.log('eRowSum.length = ' + eRowSum.length);
for(k=0;k<eRowSum.length;k++){
var eColomnSum = eRowSum[k].querySelectorAll('.eColomn');
//console.log(k + ' eColomnSum.length = ' + eColomnSum.length);
var aColomnArray = new Array();
for(l=0;l<eColomnSum.length;l++){
if(k>0 && l<3){
//console.log('value = ' + eColomnSum[l].innerHTML + '; k = ' + k + '; l = ' + l + ';');
if(l == 1){
aColomnArray.push(parseInt(eColomnSum[l].innerHTML));
}else{
aColomnArray.push(eColomnSum[l].innerHTML);
};
};
};
if(k>0){
aArray.push(aColomnArray);
};
};
//console.log('aArray = ' + aArray);
return aArray;
};
google.load("visualization", "1", {packages:["corechart"]});
// google.setOnLoadCallback(drawChart(fReturnInitArray()));
function drawChart(aChartData){
var data = google.visualization.arrayToDataTable(aChartData);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Распорядок дня",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
};
window.onload = function(){
var eDivTable = document.querySelectorAll('.eDivTable')[0];
var aChartInitData = fReturnInitArray();
for(i=0;i<aChartInitData.length;i++){
//console.log('aChartInitData[i] = ' + aChartInitData[i]);
var eDivRow = document.createElement('div');
eDivRow.classList.add('eRow');
eDivTable.appendChild(eDivRow);
for(j=0;j<aChartInitData[i].length;j++){
//console.log('aChartInitData[i][j] = ' + aChartInitData[i][j]);
var eDivColomn = document.createElement('div');
var sTextNode = document.createTextNode(aChartInitData[i][j]);
eDivColomn.classList.add('eColomn');
eDivRow.appendChild(eDivColomn);
eDivColomn.appendChild(sTextNode);
};
if(i>0){
eDivColomn = document.createElement('div');
eDivColomn.classList.add('eColomn');
var eButtonEdit = document.createElement('input');
eButtonEdit.type = 'button';
eButtonEdit.value = 'edit';
eButtonEdit.classList.add('eButtonEdit');
eDivRow.appendChild(eDivColomn);
eDivColomn.appendChild(eButtonEdit);
eDivColomn = document.createElement('div');
eDivColomn.classList.add('eColomn');
var eButtonDelete = document.createElement('input');
eButtonDelete.type = 'button';
eButtonDelete.value = 'delete';
eButtonDelete.classList.add('eButtonDelete');
eDivRow.appendChild(eDivColomn);
eDivColomn.appendChild(eButtonDelete);
};
};
var aConstructedArray = fBuildArray(eDivTable);
drawChart(aConstructedArray);
$('.eButtonAdd').click(function(){
$(this).css('display', 'none');
var eDivTable = document.querySelectorAll('.eDivTable')[0];
eButtonEditSum = eDivTable.querySelectorAll('.eButtonEdit');
for(m=0; m<eButtonEditSum.length; m++){
eButtonEditSum[m].style.display = 'none';
};
eButtonDeleteSum = eDivTable.querySelectorAll('.eButtonDelete');
for(m=0;m<eButtonDeleteSum.length;m++){
eButtonDeleteSum[m].style.display = 'none';
};
var eDivRow = document.createElement('div');
eDivRow.classList.add('eRow');
eDivTable.appendChild(eDivRow);
var eDivColomn01 = document.createElement('div');
var eInputText01 = document.createElement('input');
eInputText01.type = 'text';
var eDivColomn02 = document.createElement('div');
var eInputText02 = document.createElement('input');
eInputText02.type = 'text';
var eDivColomn03 = document.createElement('div');
var eInputText03 = document.createElement('input');
eInputText01.type = 'text';
var eDivColomn04 = document.createElement('div');
var eInputButtonAdd = document.createElement('input');
eInputButtonAdd.type = 'button';
eInputButtonAdd.value = 'Confirm';
eInputButtonAdd.classList.add('eButtonConfirm');
var eDivColomn05 = document.createElement('div');
var eInputButtonCancel = document.createElement('input');
eInputButtonCancel.type = 'button';
eInputButtonCancel.value = 'Cancel';
eInputButtonCancel.classList.add('eButtonCancel');
eDivColomn01.classList.add('eColomn');
eDivColomn02.classList.add('eColomn');
eDivColomn03.classList.add('eColomn');
eDivColomn04.classList.add('eColomn');
eDivColomn05.classList.add('eColomn');
eDivRow.appendChild(eDivColomn01);
eDivRow.appendChild(eDivColomn02);
eDivRow.appendChild(eDivColomn03);
eDivRow.appendChild(eDivColomn04);
eDivRow.appendChild(eDivColomn05);
eDivColomn01.appendChild(eInputText01);
eDivColomn02.appendChild(eInputText02);
eDivColomn03.appendChild(eInputText03);
eDivColomn04.appendChild(eInputButtonAdd);
eDivColomn05.appendChild(eInputButtonCancel);
$('.eButtonConfirm').click(function(){
alert('А тут вообще замена input на его значение ммм..');
});
$('.eButtonCancel').click(function(){
var eDivTable = document.querySelectorAll('.eDivTable')[0];
eButtonEditSum = eDivTable.querySelectorAll('.eButtonEdit');
for(m=0; m<eButtonEditSum.length; m++){
eButtonEditSum[m].style.display = 'block';
};
eButtonDeleteSum = eDivTable.querySelectorAll('.eButtonDelete');
for(m=0;m<eButtonDeleteSum.length;m++){
eButtonDeleteSum[m].style.display = 'block';
};
var eButtonAdd = document.querySelectorAll('.eButtonAdd')[0];
eButtonAdd.style.display = 'block';
eDivRow.remove();
});
});
$('.eButtonEdit').click(function(){
alert('Самое интересное оставил тебе');
});
$('.eButtonDelete').click(function(){
alert('Это тоже интересное');
});
};
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:24. |