:: How to Build ::
- สร้างอ็อบเจกต์ GraphObj() มี Properties 4 ตัวคือ
- data เป็นอาเรย์ใช้เก็บชื่อของข้อมูลแต่ละตัว
- value เป็นอาเรย์ใช้เก็บค่าสถิติของข้อมูล
- color เป็นอาเรย์ใช้เก็บสีของกราฟ
- maxdata เป็นค่าสูงสุดที่อนุญาติให้กราฟแสดงได้ เพื่อจำกัดความกว้างของกราฟ
และมีเมธอด 2 ตัวคือ
- adddata() ใช้เพิ่มข้อมูลลงไปในกราฟ
- display() ฟังก์ชั่นนี้จะ generate โค้ด HTML เพื่อแสดงกราฟออกมา
<![CDATA[
function GraphObj()
{
this.data = new Array();
this.value = new Array();
this.color = new Array();
this.maxdata = 300;
this.adddata = Graph_add;
this.display = Graph_display;
}
]]>
- ฟังก์ชั่น Graph_add จะรับค่าพารามิเตอร์แล้วเอาไปใส่ในพรอเพอร์ตีทั้ง 3 ตัว
<![CDATA[
function Graph_add(dataName,value,Graphcolor)
{
this.data[this.data.length]=dataName;
this.value[this.value.length]=value;
this.color[this.color.length]=Graphcolor;
}
</form>
]]>
- ฟังก์ชั่น Graph_display จะนำค่าที่อยู่ในพรอเพอร์ตีมาสร้างกราฟ โดยการกำหนดตำแหน่งและความกว้างของตาราง
<![CDATA[
function Graph_display()
{
document.write('<table cellpadding=0 cellspacing=0>');
document.write('<tr><td width=50><b>ผลไม้</b></td>');
document.write('<td bgcolor=0 width=1 rowspan=100>
</td><td></td></tr>');
for (var i=0;i<this.data.length;i++)
{
var glong=this.value[i];
if (glong>this.maxdata) {glong=this.maxdata;}
document.write('<tr><td>'+this.data[i]+'</td><td>');
document.write('<table border=0 cellpadding=0
cellspacing=0><tr>');
document.write('<td width='+glong+'
bgcolor='+this.color[i]+'></td>');
document.write('<td width='+(this.maxdata-glong)+'>');
document.write('<i>'+this.value[i]+'</i></td>');
document.write('</tr></table>');
document.write('</td></tr>');
document.write('<tr><td width=10></td><td></td></tr>');
}
document.write('<tr><td></td><td bgcolor=0 height=1></td></tr>');
document.write('</table>');
}
</form>
]]>
- เวลานำมาใช้ ก็แค่ประกาศอ็อบเจกต์ แล้วใส่ค่าต่างๆลงไป แล้วก็เรียกฟังก์ชั่น display()
<![CDATA[
<script language="JavaScript">
var sellstat=new GraphObj();
sellstat.adddata('เงาะ','60','red');
sellstat.adddata('กล้วย','100','yellow');
sellstat.adddata('ส้ม','30','orange');
sellstat.adddata('องุ่น','200','#FF00FF');
sellstat.display();
</script>
]]>
|
