ให้เรตสมาชิก: 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 กราฟได้ หรือจะลากเส้นเองทั้งหมดก็ทำได้ แล้วพบกันใหม่ในบทความต่อไป
ตัวอย่าง กราฟดูที่นี่
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการ ลงเวลา โดย Python
โดย bolue พฤ 04 มิ.ย. 2020 4:09 pm บอร์ด Python Knowledge
0
71
พฤ 04 มิ.ย. 2020 4:09 pm โดย bolue
การยื่นแบบ ภ.ง.ด. 53 ออนไลน์ สอนวิธีการยื่นแบบออนไล์ ทำได้ด้วยตัวเอง
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 3:51 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
65
พฤ 04 มิ.ย. 2020 4:16 pm โดย natthanit.r2538
วิธีการ โชว์ข้อมูลด้วยการ Format วันที่ โดย Python
โดย bolue พฤ 04 มิ.ย. 2020 3:38 pm บอร์ด Python Knowledge
0
64
พฤ 04 มิ.ย. 2020 3:38 pm โดย bolue
การยื่นแบบ ภ.ง.ด. 3 ออนไลน์ สรุปขั้นตอนยื่นแบบภาษี ออนไลน์
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 2:54 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
52
พฤ 04 มิ.ย. 2020 3:08 pm โดย natthanit.r2538
วิธีการเดินทางจาก ปทุมธานี มา กรุงเทพฯ
โดย bolue พฤ 04 มิ.ย. 2020 1:59 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
40
พฤ 04 มิ.ย. 2020 1:59 pm โดย bolue
วิธีการ Search database แบบพื้นฐานๆ โดย Python
โดย bolue พฤ 04 มิ.ย. 2020 1:55 pm บอร์ด Python Knowledge
0
72
พฤ 04 มิ.ย. 2020 1:55 pm โดย bolue
การยื่นแบบ ภ.ง.ด.1 ออนไลน์ ขั้นตอนการยืนแบบออนไลน์
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 12:35 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
2
58
พฤ 04 มิ.ย. 2020 1:40 pm โดย natthanit.r2538
สอบถามเรื่องการแนบรูปในกระทู้ค่ะ
โดย natthanit.r2538 พฤ 04 มิ.ย. 2020 12:34 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
65
พฤ 04 มิ.ย. 2020 2:31 pm โดย natthanit.r2538
B - ยังขาดหน้าผลการค้นหา จาก search.php
โดย mindphp ศ 29 พฤษภาคม 2020 6:11 am บอร์ด FDD (Main)
0
1
ศ 29 พฤษภาคม 2020 6:11 am โดย mindphp
B - กล่องค้นหาจากหน้า index ใช้งานไม่ได้ กดแล้วไม่ไปหน้าค้นหา
โดย mindphp ศ 29 พฤษภาคม 2020 5:39 am บอร์ด FDD (Main)
1
1
ศ 29 พฤษภาคม 2020 5:53 am โดย mindphp
B - ไม่ใช่แค่โชว์ icon facebook มันต้องทำลิงค์เพื่อให้คลิกไป
โดย mindphp ศ 29 พฤษภาคม 2020 4:39 am บอร์ด FDD (Main)
1
2
ศ 29 พฤษภาคม 2020 4:51 am โดย mindphp
อัพเดท phpbb 3.3 เเล้ว extenstion ใช้งานไม่ได้
โดย thatsawan พฤ 28 พฤษภาคม 2020 10:08 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
4427
พฤ 28 พฤษภาคม 2020 10:10 pm โดย thatsawan
วิธีการสร้าง css ที่ใช้งานเฉพาะในบราวเซอร์ safari เท่านั้น
โดย Ittichai_chupol พฤ 28 พฤษภาคม 2020 6:06 pm บอร์ด CSS Knowledge
0
159
พฤ 28 พฤษภาคม 2020 6:06 pm โดย Ittichai_chupol
อยากทราบวิธีการกำหนด ค่า css ให้กับ button โดยกำหนดเฉพาะแต่ละบราวเซอร์
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 8:39 pm บอร์ด HTML CSS
1
88
พ 27 พฤษภาคม 2020 9:15 pm โดย mindphp
อัพเดท Changelog flask framework ของภาษา Python (ver 1.1.2 ล่าสุด)
โดย jirawoot พ 27 พฤษภาคม 2020 12:19 pm บอร์ด Python Knowledge
0
150
พ 27 พฤษภาคม 2020 12:19 pm โดย jirawoot
งานประจำวันที่ 27 พฤษภาคม 2563
โดย yositacha26 พ 27 พฤษภาคม 2020 12:13 pm บอร์ด MP011 - โยษิตา จันทะวงษ์
1
25
พ 27 พฤษภาคม 2020 12:15 pm โดย yositacha26
อยากทราบว่า วิธีการกำหนดการตั้งค่า ภาษาไทย ใน Netbeans
โดย Ittichai_chupol พ 27 พฤษภาคม 2020 10:13 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
152
พ 27 พฤษภาคม 2020 10:13 am โดย Ittichai_chupol
อยากทราบวิธีการแก้ไข ภาษาไทยกลายอักษรแปลกๆ
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 4:35 pm บอร์ด Programming - PHP
2
186
จ 01 มิ.ย. 2020 6:33 am โดย mindphp
อยากทราบวิธีการ แบบคอลัมเป็น 3 คอลีม โดยใช้ tag <dl>
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 11:56 am บอร์ด HTML CSS
2
187
จ 01 มิ.ย. 2020 4:14 pm โดย LEG
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
176
จ 25 พฤษภาคม 2020 8:03 pm โดย ขุนพล ตั้นตระกูล