ให้เรตสมาชิก: 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 กราฟได้ หรือจะลากเส้นเองทั้งหมดก็ทำได้ แล้วพบกันใหม่ในบทความต่อไป
ตัวอย่าง กราฟดูที่นี่
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Influencer Marketing คือ ? มีกี่ประเภท? บทความนี้มีคำตอบ
โดย ploypola จ 12 ต.ค. 2020 6:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
74
จ 12 ต.ค. 2020 6:30 pm โดย ploypola
Function sort() และ rsort()
โดย makup จ 12 ต.ค. 2020 5:38 pm บอร์ด PHP Knowledge
1
63
จ 12 ต.ค. 2020 6:36 pm โดย prmindphp
คำสั่ง While loop คำสั่งทำงานซ้ำ
โดย makup อ 11 ต.ค. 2020 3:23 pm บอร์ด PHP Knowledge
0
64
อ 11 ต.ค. 2020 3:23 pm โดย makup
วิธี Update งาน Project laravel บน Gitlab
โดย makup อ 11 ต.ค. 2020 2:29 pm บอร์ด PHP Knowledge
0
73
อ 11 ต.ค. 2020 2:29 pm โดย makup
วิธีเปิด Debug SQL Explain and Load time บน phpBB 3.3.x
โดย thatsawan อ 11 ต.ค. 2020 11:26 am บอร์ด PHP Knowledge
1
67
อ 18 ต.ค. 2020 2:00 am โดย mindphp
วิธีการ Set-up Package Laravel Framework บน Netbeans
โดย makup ส 10 ต.ค. 2020 6:25 pm บอร์ด PHP Knowledge
0
65
ส 10 ต.ค. 2020 6:25 pm โดย makup
ขั้นตอนการทำงาน : Loop do while
โดย makup ส 10 ต.ค. 2020 4:56 pm บอร์ด PHP Knowledge
0
52
ส 10 ต.ค. 2020 4:56 pm โดย makup
วิธีการสร้างตาราง Database ใน Project laravel
โดย makup ส 10 ต.ค. 2020 3:45 pm บอร์ด PHP Knowledge
0
72
ส 10 ต.ค. 2020 3:45 pm โดย makup
ย้ายหมวดบทความทำยังไงคะ?
โดย nalinthip ศ 09 ต.ค. 2020 6:09 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
48
ศ 09 ต.ค. 2020 6:09 pm โดย nalinthip
StartUp ที่ชื่อว่า Hackerone สามารถช่วยเหลือในการติดตั้ง phpBB อย่างไร
โดย Anonymous ศ 09 ต.ค. 2020 5:47 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
58
ศ 09 ต.ค. 2020 5:47 pm โดย บุคคลทั่วไป
StartUp ที่ชื่อว่า Hackerone สามารถช่วยเหลือในการติดตั้ง phpBB อย่างไร
โดย PhoorichayaM ศ 09 ต.ค. 2020 4:58 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
54
ศ 09 ต.ค. 2020 5:41 pm โดย PhoorichayaM
สอบถามเรื่องการพัฒนาระบบของ phpBB
โดย PhoorichayaM ศ 09 ต.ค. 2020 2:50 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
45
ศ 09 ต.ค. 2020 2:50 pm โดย PhoorichayaM
งานประจำวันที่ 9 ตุลาคม 2563
โดย nalinthip ศ 09 ต.ค. 2020 10:07 am บอร์ด M111 - นลินทิพย์ พันชน
11
46
ศ 09 ต.ค. 2020 6:51 pm โดย nalinthip
IT Infrastructure กับองค์กรไอที เพื่อการทำงานที่ไม่ติดขัด
โดย PhoorichayaM ศ 09 ต.ค. 2020 1:07 pm บอร์ด Linux - Web Server
0
52
ศ 09 ต.ค. 2020 1:07 pm โดย PhoorichayaM
การบริการ
โดย nalinthip ศ 09 ต.ค. 2020 12:58 pm บอร์ด Share Knowledge
0
44
ศ 09 ต.ค. 2020 12:58 pm โดย nalinthip
สอบถามเรื่องการพัฒนาระบบของ phpBB
โดย PhoorichayaM ศ 09 ต.ค. 2020 12:40 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
47
ศ 09 ต.ค. 2020 12:41 pm โดย mindphp
ตั้ง พาสเวิร์ด อย่างไรปลอดภัยต่อผู้ใช้งาน
โดย PhoorichayaM ศ 09 ต.ค. 2020 12:27 pm บอร์ด phpBB user Guide Knowledge
0
39
ศ 09 ต.ค. 2020 12:27 pm โดย PhoorichayaM
สามารถดาวน์โหลด phpBB 3.3.1 ได้ที่ไหน
โดย PhoorichayaM ศ 09 ต.ค. 2020 11:58 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
3
42
ศ 09 ต.ค. 2020 12:02 pm โดย PhoorichayaM
Forum ของ phpBB มีกี่รูปแบบ
โดย PhoorichayaM ศ 09 ต.ค. 2020 11:28 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
44
ศ 09 ต.ค. 2020 11:34 am โดย PhoorichayaM
Upgrade กับ Update ทำความเข้าใจ เพื่อความไม่สับสน
โดย PhoorichayaM ศ 09 ต.ค. 2020 11:00 am บอร์ด Share Knowledge
0
28
ศ 09 ต.ค. 2020 11:00 am โดย PhoorichayaM