ให้เรตสมาชิก: 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 กราฟได้ หรือจะลากเส้นเองทั้งหมดก็ทำได้ แล้วพบกันใหม่ในบทความต่อไป
ตัวอย่าง กราฟดูที่นี่
mindphp
, สร้างกราฟ ด้วย Highcharts Jquery Javascript Graph - by Jquery,
3 24 1 5
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - สอบถามทำให้ mouse over ที่ไอคอนรูปวงกลม แล้วให้แสดงรูปที่เป็นข้อความขึ้น
โดย eange08 ศ 05 มี.ค. 2021 4:52 pm บอร์ด Joomla Dev
1
4
ศ 05 มี.ค. 2021 5:47 pm โดย tsukasaz
กลุ่มประเทศผู้ส่งออกข้าว
โดย jataz2 ศ 05 มี.ค. 2021 11:07 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
4
ศ 05 มี.ค. 2021 11:07 am โดย jataz2
Q - พอมี module หรือ plugin ที่เป็นพวก social อย่าง line, ig บ้างไหมค่ะ
โดย eange08 พฤ 04 มี.ค. 2021 5:21 pm บอร์ด Joomla Dev
1
7
พฤ 04 มี.ค. 2021 5:26 pm โดย tsukasaz
reboot เครื่องไม่ได้ครับ
โดย chakirin.bfds พฤ 04 มี.ค. 2021 12:25 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
27
พฤ 04 มี.ค. 2021 3:14 pm โดย chakirin.bfds
แก้ css ส่วน padding ด้วย override แล้วไม่เปลี่ยนตาม
โดย eange08 พ 03 มี.ค. 2021 4:43 pm บอร์ด Joomla Development
1
19
พ 03 มี.ค. 2021 4:47 pm โดย tsukasaz
Joomla PDPA ใช้ EB Sticky Cookie Notice โมดูล แสดงแจ้งเตือนการเก็บข้อมูล Cookie ของผู้ใช้งาน
โดย tsukasaz พ 03 มี.ค. 2021 4:39 pm บอร์ด Joomla Extension Review
0
16
พ 03 มี.ค. 2021 4:39 pm โดย tsukasaz
อัพเดทหรือยัง? ปรับปรุงเรื่องความปลอดภัย 9 จุด ใน Joomla 3.9.25
โดย tsukasaz พ 03 มี.ค. 2021 12:28 pm บอร์ด MindPHP News & Feedback
0
38
พ 03 มี.ค. 2021 12:28 pm โดย tsukasaz
B - เปิดหน้าเว็บด้วย template เป็น Shaper_megadeal_ii แล้ว Error 404
โดย eange08 พ 03 มี.ค. 2021 12:04 pm บอร์ด เว็บไซต์ Rnyard - Tester
2
7
พ 03 มี.ค. 2021 7:25 pm โดย tsukasaz