ให้เรตสมาชิก: 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 กราฟได้ หรือจะลากเส้นเองทั้งหมดก็ทำได้ แล้วพบกันใหม่ในบทความต่อไป
ตัวอย่าง กราฟดูที่นี่
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามเกี่ยวกับการ บวก ลบ ใน Tuple ทำยังไงครับ ภาษา Python
โดย fuyuppe อ 18 ส.ค. 2019 3:20 pm บอร์ด Programming - C/C++ & java & Python
0
10
อ 18 ส.ค. 2019 3:20 pm โดย fuyuppe
น้องเมย์ค่ะ
โดย frenchfriesday อ 18 ส.ค. 2019 1:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
อ 18 ส.ค. 2019 1:14 pm โดย frenchfriesday
หลักการ วิธีการทำเว็บไซต์แสดงได้หลายภาษา ด้วย PHP เขียนเว็บสองภาษา
โดย jamepiyawat ส 17 ส.ค. 2019 10:17 pm บอร์ด PHP Knowledge
0
38
ส 17 ส.ค. 2019 10:17 pm โดย jamepiyawat
ขอคำแนะนำ เว็บไซด์ค่ะ
โดย Luckluck ส 17 ส.ค. 2019 8:35 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
33
ส 17 ส.ค. 2019 8:40 pm โดย mindphp
Joomla website
โดย Luckluck ส 17 ส.ค. 2019 8:17 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
16
ส 17 ส.ค. 2019 8:37 pm โดย mindphp
Socratic แอปช่วยทำการบ้านและค้นหาบทเรียน
โดย jamepiyawat ส 17 ส.ค. 2019 5:56 pm บอร์ด Share Knowledge
0
14
ส 17 ส.ค. 2019 5:56 pm โดย jamepiyawat
สอบถามการใช้อัตราแลกเปลี่ยนในการบันทึกเจ้าหนี้ต่างประเทศ
โดย EyePornnipa ส 17 ส.ค. 2019 4:06 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
2
26
ส 17 ส.ค. 2019 4:09 pm โดย EyePornnipa
คำสั่งนี้คืออะไรครับ เหมือน short if หรือเปล่าครับ
โดย jamepiyawat ส 17 ส.ค. 2019 2:22 pm บอร์ด Programming - PHP
4
44
ส 17 ส.ค. 2019 3:40 pm โดย jamepiyawat
การลงทะเบียนผู้ค้ากับภาครัฐในระบบ e-GP
โดย EyePornnipa ส 17 ส.ค. 2019 1:53 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
0
15
ส 17 ส.ค. 2019 1:53 pm โดย EyePornnipa
หากจ่ายชำระค่าโทรศัพท์เกิน ควรบันทึกบัญชียังไง
โดย EyePornnipa ศ 16 ส.ค. 2019 12:10 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
34
ส 17 ส.ค. 2019 11:06 am โดย Amp_Audit
ยาหม่องสมุนไพรอินเดีย Himalaya Pain Balm 45 g กระปุกใหญ่ ใช้ดม ทาแก้วิงเวียนศีรษะ หอมสดชื่น ส่ง Kerry ถึงภายใน 1-3 วัน
โดย Tanadet ส 17 ส.ค. 2019 10:58 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
ส 17 ส.ค. 2019 10:58 am โดย Tanadet
สอบถาม การทำ web 2 ภาษา หน่อยครับ
โดย jirawoot ส 17 ส.ค. 2019 10:58 am บอร์ด Programming - C/C++ & java & Python
1
45
ส 17 ส.ค. 2019 10:19 pm โดย jamepiyawat
งานประจำวันที่ 17 กรกฎาคม 2562
โดย jamepiyawat ส 17 ส.ค. 2019 10:16 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
11
ส 17 ส.ค. 2019 7:19 pm โดย jamepiyawat
งานประจำวันที่ 17 สิงหาคม 2562
โดย jirawoot ส 17 ส.ค. 2019 10:02 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
3
9
ส 17 ส.ค. 2019 10:54 pm โดย jirawoot
งานประจำวันที่ 17 สิงหาคม 2562
โดย EyePornnipa ส 17 ส.ค. 2019 10:02 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
5
35
ส 17 ส.ค. 2019 7:06 pm โดย EyePornnipa
Google Assistant เพิ่มฟีเจอร์ใหม่ สามารถเตือนความจำเราได้
โดย jamepiyawat ศ 16 ส.ค. 2019 6:41 pm บอร์ด Share Knowledge
0
21
ศ 16 ส.ค. 2019 6:41 pm โดย jamepiyawat
วิธีการดึกข้อมูลโพสต์โดยไม่ให้ มีการ Query Sql ที่มาเกิน ใน phpbb
โดย Ittichai_chupol ศ 16 ส.ค. 2019 6:08 pm บอร์ด PHP Knowledge
0
16
ศ 16 ส.ค. 2019 6:08 pm โดย Ittichai_chupol
พิสูจน์รักแท้ 3,790 ขั้น ที่… เขาวงพระจันทร์ จ.ลพบุรี (รอย้ายไปในบอร์ด Thailand Hotel)
โดย Patipat ศ 16 ส.ค. 2019 5:47 pm บอร์ด M088 - ปฏิภัทร สารธรรม
0
4
ศ 16 ส.ค. 2019 5:47 pm โดย Patipat
B - กด Save สร้างรายการ Product บนเมนู HR ไม่ได้
โดย EyePornnipa ศ 16 ส.ค. 2019 3:25 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
1
6
ศ 16 ส.ค. 2019 3:47 pm โดย thatsawan
Q - ต้องการทำรายการจ่ายค่าใช้จ่ายจ่ายล่วงหน้า บนเมนู HR
โดย EyePornnipa ศ 16 ส.ค. 2019 3:00 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
2
10
ศ 16 ส.ค. 2019 3:43 pm โดย EyePornnipa