ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 
มาทำความรู้จัก Highcharts กันก่อน Highcharts คือ javascript ไลบรารี่ สำหรับไว้สร้างกราฟบนหน้าเว็บ ซึ่ง Highcharts สร้างสามรถสร้างกราฟ ได้หลายรูปแบบ เช่น line, spline, area, areaspline, column, bar, pie and scatter  สามารถแสดงผลได้ทุก web browser รวมทั้ง iPhone/iPad ก็ได้  ไลบรารี่ ตัวนี้เราสามารถดาวน์โหลดมาใช้งานได้ฟรี

วิธีนำ Highcharts มาใช้ ในที่นี้จะใช้ร่วมกับ Jquery สำหรับคนที่ถนัด MooTools หรือ Prototype ก็ทำได้คล้ายๆกัน
1. ดาวน์โหลด Highcharts จาก http://www.highcharts.com/download  เวอร์ชั่นล่าสุด ณ ตอนเขียนบทความ คือ Highcharts 2.2.5
2. เมื่อได้ไฟล์มาแล้วให้ unzip ไว้ใน folder งานของเรา เช่นไว้ใน folder /js/
3. include jquery, และ HighCharts เข้าในงานของเรา
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

4. ใน tag ก่อน ปิด head ให้สร้าง object จาก highcharts
var chart1; // กำหนดให้เป็นตัวแปลโกลบอลของ Javascript 
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });
ทำความรู้จำคำสั่ง Jquery การใช้ $(document).ready(function()

5.เพิ่ม tag div เพื่อให้กราฟของเราแสดงผล
<div id="container" style="width: 100%; height: 400px"></div>
เท่านี้เราก็จะได้กราฟแสดงผลที่หน้าเว็บเราแล้วครับ ข้อมูลของเราจะอยู่ใน ตัวแปล series เราสามารถเปลี่ยนค่าในนั้นตามข้อมูลของเรา หรือจะดึงออกมาจาก ฐานข้อมูลก็ได้

นอกจากนี้ Highcharts ยังมี themes แถมมาให้เราด้วย themes คือการแสดงผลของ สีตัวอักษร, ขนาดตัวอักษรบนกราฟ, ฉากหลัง, ฯลฯ
เพียงแค่ include
<script type="text/javascript" src="/js/themes/gray.js"></script>
ใน tag body ก็ได้แล้วครับโดยที่  gray.js สามารถแทนที่ด้วย themes แบบอื่นๆ ได้  ดังนี้ dark-blue.js, dark-green.js, grid.js, skies.js

นอกจากนี้ Highcharts ยังมีความสามารถอื่นๆ อีกมากมาย เช่น การ export กราฟออกเป็นไฟล์ภาพ, การใช้ข้อมูล จาก csv, xml, json มา plot กราฟได้ หรือจะลากเส้นเองทั้งหมดก็ทำได้ แล้วพบกันใหม่ในบทความต่อไป
ตัวอย่าง กราฟดูที่นี่
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เจอปัญหา Forbidden You don't have permission to access /index.php on this server. Additionally, a 403 Forbidden error
โดย mindphp อ 22 ก.ย. 2020 12:58 am บอร์ด Programming - PHP
1
134
อ 22 ก.ย. 2020 7:44 pm โดย mindphp
มาแล้ว!!! MDSMS component สำหรับส่งข้อความผ่านทาง SMS บน Joomla
โดย bolue จ 21 ก.ย. 2020 5:17 pm บอร์ด MindPHP News & Feedback
0
61
จ 21 ก.ย. 2020 5:17 pm โดย bolue
สอบถามเรื่องการอ่านค่าสีสถานะของปุ่ม
โดย blebee90 จ 21 ก.ย. 2020 2:03 pm บอร์ด Programming - C/C++ & java & Python
1
31
จ 21 ก.ย. 2020 3:10 pm โดย mindphp
ต้องการกำหนดรุปแบบของช่องกรอกให้เป็นเเพทเทิร์นของเบอร์โทร เเต่ไม่ต้องการให้กรอกตัวหนังสือ
โดย thatsawan พฤ 17 ก.ย. 2020 3:18 pm บอร์ด JavaScript & Jquery Ajax
5
1143
พ 23 ก.ย. 2020 2:54 pm โดย thatsawan
สถานที่จัดงานแต่งงานชิคๆ แบบไม่ง้อโรงแรม
โดย Anonymous พฤ 17 ก.ย. 2020 2:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
47
พฤ 17 ก.ย. 2020 2:10 pm โดย บุคคลทั่วไป
วิธีแก้ ean13 ปัญหาที่เจอคืออะไร แก้ยังไง
โดย bolue พ 16 ก.ย. 2020 6:38 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
43
พ 16 ก.ย. 2020 6:38 pm โดย bolue
สอบวิธีการ check user ว่าเราใช้ user ไหนอยู่ตอนนี้ ได้มั้ยครับ ใน command บน Ubuntu
โดย jirawoot พ 16 ก.ย. 2020 11:25 am บอร์ด Programming - C/C++ & java & Python
3
81
พ 16 ก.ย. 2020 11:52 am โดย mindphp
หน้าเว็บ phpBB เจอปัญหาโหลด 404 บ้างครั้งไม่รู้ว่าเป็นเพราะอะไรได้บ้าง
โดย thatsawan พ 16 ก.ย. 2020 11:17 am บอร์ด Programming - PHP
5
75
อ 22 ก.ย. 2020 1:00 am โดย mindphp
phpBB เป็นโปรแกรมประเภทไหนมาดูกัน
โดย Udomsak2539 อ 15 ก.ย. 2020 6:25 pm บอร์ด phpBB user Guide Knowledge
0
59
อ 15 ก.ย. 2020 6:25 pm โดย Udomsak2539
รวบรวมข้อมูลเบื้องต้น phpBB คืออะไร ฟีเจอร์ และประวัติ
โดย fhakun อ 15 ก.ย. 2020 6:14 pm บอร์ด PHP Knowledge
0
57
อ 15 ก.ย. 2020 6:14 pm โดย fhakun
สอบถาม วิธีเปิดแจ้งเตือน skype ค่ะ
โดย fhakun อ 15 ก.ย. 2020 6:07 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
66
อ 15 ก.ย. 2020 6:07 pm โดย fhakun
ฟีเจอร์พื้นฐานของ phpBB
โดย fhakun อ 15 ก.ย. 2020 5:33 pm บอร์ด PHP Knowledge
0
61
อ 15 ก.ย. 2020 5:33 pm โดย fhakun
สอบถาม วิธีแทรกลิ้งค์ให้ข้อความค่ะ
โดย fhakun อ 15 ก.ย. 2020 4:42 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
5
129
อ 15 ก.ย. 2020 5:05 pm โดย fhakun
สอบถาม วิธีติดตั้ง kazaam ใน ubantu ค่ะ
โดย fhakun อ 15 ก.ย. 2020 3:26 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
7
107
อ 15 ก.ย. 2020 4:38 pm โดย mindphp
ไม่ทราบว่า viewtopic ทำยังไง
โดย Udomsak2539 จ 14 ก.ย. 2020 6:47 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
64
อ 15 ก.ย. 2020 10:06 am โดย Udomsak2539
แนะนำโปรแกรม ibis paint และเครื่องมือตัดต่อง่ายๆใน 1 นาที สำหรับมือใหม่
โดย fhakun จ 14 ก.ย. 2020 6:45 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
69
จ 14 ก.ย. 2020 6:45 pm โดย fhakun
รวมวิธี การเดินจาก สงขลา มา กทม.
โดย Udomsak2539 จ 14 ก.ย. 2020 5:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
88
อ 15 ก.ย. 2020 12:14 pm โดย mindphp
ความแตกต่างระหว่างภาษาอังกฤษและภาษาฝรั่งเศส
โดย fhakun จ 14 ก.ย. 2020 5:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
46
จ 14 ก.ย. 2020 5:03 pm โดย fhakun
วิธีเดินทางจากเมืองทองมาเกษตร
โดย fhakun จ 14 ก.ย. 2020 3:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
58
จ 14 ก.ย. 2020 3:03 pm โดย fhakun
พิมพ์ข้อความเว็บบอร์ด แล้วกดไปโดยเว็บบอร์ดที่โชว์ในรูปแบบโทรศัพท์ทำยังไง
โดย Udomsak2539 จ 14 ก.ย. 2020 2:59 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
64
จ 14 ก.ย. 2020 3:05 pm โดย tsukasaz