ให้เรตสมาชิก: 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 กราฟได้ หรือจะลากเส้นเองทั้งหมดก็ทำได้ แล้วพบกันใหม่ในบทความต่อไป
ตัวอย่าง กราฟดูที่นี่
กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ตัวอย่างคำสั่ง การใช้ API ส่งภาพ ผ่าน curl ด้วย binary data
โดย mindphp อ 30 ส.ค. 2020 11:54 pm บอร์ด Linux - Web Server
0
170
อ 30 ส.ค. 2020 11:54 pm โดย mindphp
สอบถามเรื่อง local,server ครับ
โดย nai_cyp พฤ 27 ส.ค. 2020 7:19 pm บอร์ด Programming - C/C++ & java & Python
4
410
จ 31 ส.ค. 2020 5:03 pm โดย mindphp
วิธีใส่รูปภาพประกอบในวิดีโอด้วย DaVinci Resolve 16
โดย nai_cyp พฤ 27 ส.ค. 2020 6:59 pm บอร์ด Graphic design
0
276
พฤ 27 ส.ค. 2020 6:59 pm โดย nai_cyp
Drop off กับ fulfillment เหมือนหรือ ต่างกันมั้ย
โดย thatsawan พ 26 ส.ค. 2020 4:57 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
176
พ 26 ส.ค. 2020 4:57 pm โดย thatsawan
สอบถามกรณีที่มีการจ่ายบิลล่วงหน้าในระบบ Petty cash
โดย natthanit.r2538 พ 26 ส.ค. 2020 4:51 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
3
433
พฤ 27 ส.ค. 2020 4:04 pm โดย natthanit.r2538
การคิด ภพ.36 และการยื่นภพ.36
โดย natthanit.r2538 พ 26 ส.ค. 2020 2:44 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
145
พ 26 ส.ค. 2020 2:52 pm โดย natthanit.r2538
อัพเดทกันเลย Joomla 3.9.21 ปรับปรุงทั้งความปลอดภัยและระบบหลักให้ดีขึ้น
โดย tsukasaz พ 26 ส.ค. 2020 12:14 pm บอร์ด MindPHP News & Feedback
0
208
พ 26 ส.ค. 2020 12:14 pm โดย tsukasaz
สอบถามวิธีดึงข้อมูลจาก Youtube ครับ
โดย nai_cyp พ 26 ส.ค. 2020 11:05 am บอร์ด Programming - C/C++ & java & Python
2
266
พ 26 ส.ค. 2020 11:33 am โดย nai_cyp
แสดงวิธีการขนส่งสินค้าในร้านค้าออนไลน์ด้วย Module Shipping Method ใน MooZiiCart
โดย bolue อ 25 ส.ค. 2020 6:49 pm บอร์ด MindPHP News & Feedback
0
141
อ 25 ส.ค. 2020 6:49 pm โดย bolue
แท็กชื่อสินค้าในร้านค้าออนไลน์ด้วย Module Products tags name ใน MooZiiCart
โดย bolue อ 25 ส.ค. 2020 6:29 pm บอร์ด MindPHP News & Feedback
0
159
อ 25 ส.ค. 2020 6:29 pm โดย bolue
วิธีรันโปรแกรม .bat file ใน task schedule โดยไม่เปิด windows ขึ้นมาให้กวนใจ
โดย jirawoot อ 25 ส.ค. 2020 4:46 pm บอร์ด Python Knowledge
0
215
อ 25 ส.ค. 2020 4:46 pm โดย jirawoot
Tracking prevention คืออะไร และมีประโยชน์อย่างไร?
โดย nai_cyp อ 25 ส.ค. 2020 4:21 pm บอร์ด Share Knowledge
0
194
อ 25 ส.ค. 2020 4:21 pm โดย nai_cyp
สอบถามการ ใช้งาน module filter ของ MooZiiCart ค่ะ
โดย bolue อ 25 ส.ค. 2020 4:06 pm บอร์ด MindPHP News & Feedback
4
191
พ 26 ส.ค. 2020 10:27 am โดย bolue
การเช็คข้อมูลการนำส่ง ภ.ง.ด. 90/91
โดย natthanit.r2538 อ 25 ส.ค. 2020 3:51 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
163
อ 25 ส.ค. 2020 4:25 pm โดย natthanit.r2538
มาแล้ววว MDImporter ตัวช่วยในการ import ข้อมูลจากไฟล์ excel เข้าระบบ Joomla!!!!
โดย bolue อ 25 ส.ค. 2020 1:01 pm บอร์ด MindPHP News & Feedback
0
116
อ 25 ส.ค. 2020 1:01 pm โดย bolue
สินค้าที่มีผู้เข้าชมมากที่สุดในร้านค้าออนไลน์ด้วย Module Top Hits ใน MooZiiCart
โดย bolue อ 25 ส.ค. 2020 12:15 pm บอร์ด MindPHP News & Feedback
0
135
อ 25 ส.ค. 2020 12:15 pm โดย bolue
สินค้าที่ได้คะแนนมากสุดในร้านค้าออนไลน์ด้วย Module Top rating ใน MooZiiCart
โดย bolue อ 25 ส.ค. 2020 11:59 am บอร์ด MindPHP News & Feedback
0
133
อ 25 ส.ค. 2020 11:59 am โดย bolue
ความคิดเห็นล่าสุดในร้านค้าออนไลน์ด้วย Module Recent Comment ใน MooZiiCart
โดย bolue อ 25 ส.ค. 2020 11:41 am บอร์ด MindPHP News & Feedback
0
123
อ 25 ส.ค. 2020 11:41 am โดย bolue
แสดงผู้ผลิตสินค้าในร้านค้าออนไลน์ด้วย Module Manufacturer ใน MooZiiCart
โดย bolue จ 24 ส.ค. 2020 7:25 pm บอร์ด MindPHP News & Feedback
0
146
จ 24 ส.ค. 2020 7:25 pm โดย bolue
แสดงราคาสินค้าได้หลายสกุลเงินในร้านค้าออนไลน์ด้วย Module Currency ใน MooZiiCart
โดย bolue จ 24 ส.ค. 2020 5:50 pm บอร์ด MindPHP News & Feedback
0
147
จ 24 ส.ค. 2020 5:50 pm โดย bolue