XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 2 ปูพื้น

 

หลังจากที่คุณดาวน์โหลด XML/SWF Charts มาแล้ว และทำการแตกซิปออก จะได้ไฟล์ดังนี้

 

|– Charts

|—- charts.swf

|—- charts_library

|—— .DS_Store

|—— arno.swf

|—— arst.swf

|—— brfl.swf

|—— brno.swf

|—— brst.swf

|—— cl3d.swf

|—— clfl.swf

|—— clno.swf

|—— clp3.swf

|—— cls3.swf

|—— clst.swf

|—— cnno.swf

|—— lnno.swf

|—— mxno.swf

|—— pi3d.swf

|—— pino.swf

|—— pono.swf

|—— scno.swf

 

อันที่จริงแล้ว สิ่งที่อยู่ในโฟลเดอร์ charts_library เราไม่ต้องสนใจเท่าไร มันจะเป็นไลบรารี่ ที่จะนำไปใช้กับไฟล์ charts.swf ซึ่ง

ตัว charts.swf เขาเรียกใช้ของเขาเอง เราไม่ต้องไปจัดการอะไร

 

เอาล่ะ เรามาเริ่มเรียกชาร์ทตัวนี้มาแสดงผล กันแบบปูพื้นกันก่อนดีกว่า

 

1. สร้างไฟล์ชื่อ sample.xml และพิมพ์คำสั่งนี้ลงไป ไฟล์ตัวนี้จะเป็นตัวเก็บข้อมูลที่จะแสดงและคอนฟิกต่างๆของชาร์ท

<chart> </chart>

 

2. สร้างไฟล์ชื่อ example.php และใส่โค้ดเรียกใช้ไฟล์แฟลชเข้าไป ดังนี้ ก้อปไปก็ได้นะ

 

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>

<body>

<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″
width=”400″
height=”250″
align=””
id=”charts”>

<PARAM NAME=movie VALUE=”utils/charts/charts.swf?library_path=utils/charts/charts_library&xml_source=sample.xml“>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#666666>

<EMBED src=”utils/charts/charts.swf?library_path=utils/charts/charts_library&xml_source=sample.xml”
quality=high
bgcolor=#666666
width=”400″
height=”250″
name=”charts”
align=””
swLiveConnect=”true”
type=”application/x-shockwave-flash”
pluginspage=”http://www.macromedia.com/go/getflashplayer”>

</EMBED>
</OBJECT>

</body>
</html>

 

จริงๆแล้วโค้ดก็ไม่มีอะไรเลย เป็นการใส่ไฟล์แฟลชเข้าไปในเพจ แค่นั้นเอง

 

แต่จะมีพิเศษอยู่ก็ตรงที่ผมทำสีแดงไว้

utils/charts/charts.swf?library_path=utils/charts/charts_library&xml_source=sample.xml

จะแบ่งออกเป็น 3 ส่วน คือ

utils/charts/charts.swf : ระบุพาธไปยังไฟล์ charts.swf

library_path=utils/charts/charts_library : ตัวแปร library_path ให้ระบุไปยังโฟลเดอร์ charts_library

xml_source=sample.xml : ตัวแปร xml_source ให้ระบุไปยังไฟล์ sample.xml ที่เราสร้างไว้

 

ลองรันไฟล์ดูนะครับ ถ้าหากทุกอย่างถูกต้อง จะต้องแสดงกราฟออกมาดังนี้

 

 

ถ้าหากไม่แสดงอะไรออกมา ให้ดูการระบุพาธต่างๆ ให้ละเอียดอีกรอบ และอีกอย่างที่ขาดไม่ได้ก็คือ เครื่องของคุณต้องสามารถแสดง
ไฟล์แฟลชได้

 

เห็นมั้ยไม่มีไรยาก บทต่อไปจะแสดงการปรับแต่งและใช้งานชาร์ทนี้ให้ลึกอีกระดับ ซึ่งจะทำกับไฟล์ sample.xml ไฟล์เดียว เพราะทุก

สิ่งทุกอย่างอยู่ที่ไฟล์นี้

chart Content Type EMBED OBJECT VALUE
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ