ให้เรตสมาชิก: 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 กราฟได้ หรือจะลากเส้นเองทั้งหมดก็ทำได้ แล้วพบกันใหม่ในบทความต่อไป
ตัวอย่าง กราฟดูที่นี่
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
สอบถามการ ใช้งาน module filter ของ MooZiiCart ค่ะ
โดย bolue อ 25 ส.ค. 2020 4:06 pm บอร์ด MindPHP News & Feedback
4
180
พ 26 ส.ค. 2020 10:27 am โดย bolue
การเช็คข้อมูลการนำส่ง ภ.ง.ด. 90/91
โดย natthanit.r2538 อ 25 ส.ค. 2020 3:51 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
143
อ 25 ส.ค. 2020 4:25 pm โดย natthanit.r2538
มาแล้ววว MDImporter ตัวช่วยในการ import ข้อมูลจากไฟล์ excel เข้าระบบ Joomla!!!!
โดย bolue อ 25 ส.ค. 2020 1:01 pm บอร์ด MindPHP News & Feedback
0
102
อ 25 ส.ค. 2020 1:01 pm โดย bolue
สินค้าที่มีผู้เข้าชมมากที่สุดในร้านค้าออนไลน์ด้วย Module Top Hits ใน MooZiiCart
โดย bolue อ 25 ส.ค. 2020 12:15 pm บอร์ด MindPHP News & Feedback
0
123
อ 25 ส.ค. 2020 12:15 pm โดย bolue
สินค้าที่ได้คะแนนมากสุดในร้านค้าออนไลน์ด้วย Module Top rating ใน MooZiiCart
โดย bolue อ 25 ส.ค. 2020 11:59 am บอร์ด MindPHP News & Feedback
0
121
อ 25 ส.ค. 2020 11:59 am โดย bolue
ความคิดเห็นล่าสุดในร้านค้าออนไลน์ด้วย Module Recent Comment ใน MooZiiCart
โดย bolue อ 25 ส.ค. 2020 11:41 am บอร์ด MindPHP News & Feedback
0
112
อ 25 ส.ค. 2020 11:41 am โดย bolue
แสดงผู้ผลิตสินค้าในร้านค้าออนไลน์ด้วย Module Manufacturer ใน MooZiiCart
โดย bolue จ 24 ส.ค. 2020 7:25 pm บอร์ด MindPHP News & Feedback
0
134
จ 24 ส.ค. 2020 7:25 pm โดย bolue
แสดงราคาสินค้าได้หลายสกุลเงินในร้านค้าออนไลน์ด้วย Module Currency ใน MooZiiCart
โดย bolue จ 24 ส.ค. 2020 5:50 pm บอร์ด MindPHP News & Feedback
0
135
จ 24 ส.ค. 2020 5:50 pm โดย bolue
ตะกร้าสินค้าในร้านค้าออนไลน์ด้วย Module Cart ของ MooZiiCart
โดย bolue จ 24 ส.ค. 2020 5:29 pm บอร์ด MindPHP News & Feedback
0
138
จ 24 ส.ค. 2020 5:29 pm โดย bolue
วิธีการ แปลง รูปภาพ เป็น base64 ใน python
โดย bolue ส 22 ส.ค. 2020 6:40 pm บอร์ด Python Knowledge
0
227
ส 22 ส.ค. 2020 6:40 pm โดย bolue
Work Instruction คืออะไร และมีประโยชน์อย่างไร
โดย natthanit.r2538 ส 22 ส.ค. 2020 5:47 pm บอร์ด Share Knowledge
0
166
ส 22 ส.ค. 2020 5:47 pm โดย natthanit.r2538
วิธีอัดเสียงบน Windows 10
โดย nai_cyp ศ 21 ส.ค. 2020 7:12 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
98
ศ 21 ส.ค. 2020 7:12 pm โดย nai_cyp
สาเหตุที่ทำให้ Account ของคุณถูกแฮก
โดย nai_cyp ศ 21 ส.ค. 2020 6:56 pm บอร์ด Share Knowledge
0
140
ศ 21 ส.ค. 2020 6:56 pm โดย nai_cyp
วิธี Update Microsoft Office ด้วยตนเอง
โดย nai_cyp ศ 21 ส.ค. 2020 6:29 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
92
ศ 21 ส.ค. 2020 6:29 pm โดย nai_cyp
Cryptocurrency คืออะไร?
โดย nai_cyp ศ 21 ส.ค. 2020 1:22 pm บอร์ด Share Knowledge
1
356
ศ 21 ส.ค. 2020 1:37 pm โดย mindphp
สอบถามเขียน script vb เพื่อรัน .exe ใน task scheduler ตัว task ไม่ทำงาน
โดย jirawoot ศ 21 ส.ค. 2020 11:52 am บอร์ด Programming - C/C++ & java & Python
8
271
ศ 21 ส.ค. 2020 5:32 pm โดย jirawoot
สอบถามเรื่อง Unicode Python3 ครับ
โดย nai_cyp ศ 21 ส.ค. 2020 10:37 am บอร์ด Programming - C/C++ & java & Python
2
886
ศ 21 ส.ค. 2020 7:35 pm โดย nai_cyp
Yodo แอปพลิเคชันออกกำลังกาย ยิ่งออกยิ่งได้เงิน
โดย nai_cyp พฤ 20 ส.ค. 2020 7:07 pm บอร์ด Mobile Application Developing- Android, iOS
0
232
พฤ 20 ส.ค. 2020 7:07 pm โดย nai_cyp
แอปกู้ไฟล์ของ Windows 10
โดย nai_cyp พฤ 20 ส.ค. 2020 6:38 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
115
พฤ 20 ส.ค. 2020 6:38 pm โดย nai_cyp
วิธีปรับขนาดรูปบน Windows 10 โดยไม่ต้องใช้แอป หรือโปรแกรมเสริมใดๆ
โดย nai_cyp พฤ 20 ส.ค. 2020 5:16 pm บอร์ด Graphic design
0
185
พฤ 20 ส.ค. 2020 5:16 pm โดย nai_cyp