Freecode
>  Home   HTML   CSS   JavaScript   PHP   Perl   Photoshop   TCP/IP 

จาวาสคริปต์วาดกราฟแนวนอน

          สคริปต์นี้สามารถวาดกราฟได้โดยไม่ต้องใช้รูปภาพให้เปลืองเวลา และสามารถเลือกสีกราฟได้ด้วย

:: How to Build ::
  1. สร้างอ็อบเจกต์ GraphObj() มี Properties 4 ตัวคือ
    • data เป็นอาเรย์ใช้เก็บชื่อของข้อมูลแต่ละตัว
    • value เป็นอาเรย์ใช้เก็บค่าสถิติของข้อมูล
    • color เป็นอาเรย์ใช้เก็บสีของกราฟ
    • maxdata เป็นค่าสูงสุดที่อนุญาติให้กราฟแสดงได้ เพื่อจำกัดความกว้างของกราฟ
    และมีเมธอด 2 ตัวคือ
    • adddata() ใช้เพิ่มข้อมูลลงไปในกราฟ
    • display() ฟังก์ชั่นนี้จะ generate โค้ด HTML เพื่อแสดงกราฟออกมา
    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; }
  2. ฟังก์ชั่น Graph_add จะรับค่าพารามิเตอร์แล้วเอาไปใส่ในพรอเพอร์ตีทั้ง 3 ตัว 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>
  3. ฟังก์ชั่น Graph_display จะนำค่าที่อยู่ในพรอเพอร์ตีมาสร้างกราฟ โดยการกำหนดตำแหน่งและความกว้างของตาราง 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>
  4. เวลานำมาใช้ ก็แค่ประกาศอ็อบเจกต์ แล้วใส่ค่าต่างๆลงไป แล้วก็เรียกฟังก์ชั่น display() <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>

Back to top





© copyright 2001 Sorrawut Korsuwansiri