(( Смогла сделать только подсказки у квадратиков Кто нибудь может подсказать как это сделать? в интернете нечего путного не нашла...Вот скрипт:
<html>
<head>
<title>Анкеты</title>
<style type="text/css">
#txt {
height: 20px;
}
#box {
position: absolute;
top: 0%;
left: 120%;
width: 100px;
height: 20px;
color: grey;
display: none;
}
#txt:hover > #box {
display: block;
}
</style>
</head>
<script language='JavaScript'>
function get_result(obj)
{
var a=[]
a[0]=obj.kat1.value;
a[1]=obj.kat2.value;
a[2]=obj.kat3.value;
a[3]=obj.kat4.value;
a[4]=obj.kat5.value;
a[5]=obj.kat6.value;
nice=0;
norm=0;
bad=0;
for (i=0; i<=5; i++)
{
if (a[i]=="Отличники")
{
nice++
}
else
{
if (a[i]=="Неуспевающие")
{
bad++
}
else
{
norm++
}
}
};
obj.st0.value=nice;
obj.st1.value=norm;
obj.st2.value=bad;
}
function check_input(obj)
{
if (obj.fam1.value.length<2 || obj.fam2.value.length<2 || obj.fam3.value.length<2||
obj.fam4.value.length<2 || obj.fam5.value.length<2 || obj.fam6.value.length<2)
{
alert("Проверьте, заполнены ли все поля с фамилиями!")
}
else {return true}
}
function check(mark)
{
return (mark>=2 && mark<6);
}
function check_user(obj,obj1)
{
var mrks=[];
pos=0;
for (i=0; i<obj.value.length; i++)
{
if (check(obj.value[i]))
{
mrks[pos]=obj.value[i];
pos++;
}
};
if (pos<4)
{
alert("Проверьте правильность и корректность введенных данных!")
}
else
{
if (mrks[0]==5 && mrks[1]==5 && mrks[2]==5 && mrks[3]==5)
{
obj1.value="Отличники"
}
else
{
if (mrks[0]==2 || mrks[1]==2 || mrks[2]==2 || mrks[3]==2)
{
obj1.value="Неуспевающие"
}
else
{
obj1.value="Успевающие"
}
}
}
}
function go()
{
if (check_input(form1))
{
check_user(form1.marks1,form1.kat1);
check_user(form1.marks2,form1.kat2);
check_user(form1.marks3,form1.kat3);
check_user(form1.marks4,form1.kat4);
check_user(form1.marks5,form1.kat5);
check_user(form1.marks6,form1.kat6);
get_result(form1)
}
}
function pieChart(canvas, data, cx, cy, r, colors, labels, lx, ly)
{
if (typeof canvas == "string") canvas = document.getElementById(canvas);
var g = canvas.getContext("2d");
// граница
g.lineWidth = 2; g.strokeStyle = "black";
// сумма
var total = 0;
for(var i = 0; i < data.length; i++) total += data[i];
// углы
var angles = [];
for(var i = 0; i < data.length; i++) angles[i] = data[i]/total*Math.PI*2;
startangle = - Math.PI/2;
// секторы
for(var i = 0; i < data.length; i++)
{
var endangle = startangle + angles[i];
g.beginPath();
g.moveTo(cx,cy);
g.arc(cx,cy,r,startangle, endangle, false);
g.closePath();
g.fillStyle = colors[i];
g.fill();
g.stroke();
startangle = endangle;
// легенда
g.fillRect(lx, ly+30*i, 20, 20);
g.strokeRect(lx, ly+30*i, 20, 20);
var label = document.createElement("div");
label.setAttribute('id', 'txt');
var l = document.createElement("div");
l.setAttribute('id', 'box');
l.appendChild(document.createTextNode(data[i]+ " студента"));
label.style.position = "absolute";
label.style.left = (canvas.offsetLeft + lx+30)+"px";
label.style.top = (canvas.offsetTop+ly+30*i-4) + "px";
label.style.fontFamily = "sans serif";
label.style.fontSize = "16px";
label.appendChild(document.createTextNode(labels[i]));
label.appendChild(l);
document.body.appendChild(label);
}
}
function init()
{
arr_ysp = [form1.st0.value *1,form1.st1.value*1, form1.st2.value*1];
pieChart("canvas", arr_ysp, 200, 200, 150, ["IndianRed", "DarkOrange", "BlueViolet"], ["Отличники","Успевающие","Неуспевающие"], 400, 100);
}
</script>
<body>
<form name=form1>
<h3>Успеваемость студентов</h3>
<table border>
<tr><td>№</td><td>Фамилия</td><td>Оценки за сессию</td><td>Категория студента</td><tr>
<tr><td><center>1</td><td><input type=text name=fam1 value="Сидоров"></td><td><input type=text name=marks1 value="5555"></td><td><input type=text name=kat1 ></td><tr>
<tr><td><center>2</td><td><input type=text name=fam2 value="Иванов"></td><td><input type=text name=marks2 value="5453"></td><td><input type=text name=kat2 ></td><tr>
<tr><td><center>3</td><td><input type=text name=fam3 value="Петров"></td><td><input type=text name=marks3 value="3255"></td><td><input type=text name=kat3 ></td><tr>
<tr><td><center>4</td><td><input type=text name=fam4 value="Жуков"></td><td><input type=text name=marks4 value="4444"></td><td><input type=text name=kat4 ></td><tr>
<tr><td><center>5</td><td><input type=text name=fam5 value="Мышкин"></td><td><input type=text name=marks5 value="3244"></td><td><input type=text name=kat5 ></td><tr>
<tr><td><center>6</td><td><input type=text name=fam6 value="Кошкин"></td><td><input type=text name=marks6 value="5555"></td><td><input type=text name=kat6 ></td><tr>
</table>
<h3>Статистика студентов по категориям</h3>
<table border>
<tr><td>Отличников</td><td>Успевающих</td><td>Неуспевающих</t d>
<tr><td><input type=text name=st0></td>
<td><input type=text name=st1></td>
<td><input type=text name=st2></td>
</table>
<br>
<input type=button value="Провести расчеты" OnClick='go()'>
<input type="button" value="Построить диаграмму" onClick = "init()">
<div id= "st"></div>
<canvas id = 'canvas' width = '600' height='400'></canvas>
</form>
</body>
</html>