ส่วนเจ้าตัวนี้มีชื่อว่า jqPlot ครับ เราสามารถเอามาพัฒนาดัดแปลงใช้กับเว็บไซต์ที่แสวงผลกำไรอย่างเช่นเว็บอีคอมเมิร์ซได้แบบไม่ต้องกลัวโดนฟ้องว่าละเมิดลิขสิทธิ์ และถึงแม้หน้าตาหรือลุกเล่นจะสู้ Highchart ไม่ได้ และแสดงผลอาจจะเพี๊ยนอยู่บ้างบน IE แต่ก็มีวิธีแก้ปัญหานี้ได้ เดี๋ยวผมจะสอนทีหลังว่าต้องแก้ไขยังไงครับ ถึงแม้ว่ามันจะทำงานแบบ Javascript แต่ก็สามารถใช้ภาษา PHP ดึงข้อมูลจากฐานข้อมุล MySQL มาแสดงได้นะครับ
1.ให้ดาวน์โหลดได้จากเว็บไซต์ https://bitbucket.org/cleonello/jqplot/downloads/ ถ้าได้ไฟล์มาแล้ว ก็ให้ Extract จะได้โฟลเดอร์ชื่อ dist ให้เปลี่ยนชื่อใหม่เป็น jqplot เพื่อจะได้สื่อความหมายหน่อยแล้วเอาไปติดตั้งไว้ใน Web Server ของเรา
2. jqplot มันพัฒนาจาก jQuery คับ ถ้าจะใช้งานก็ต้องมีการเรียกไฟล์ jquery.js เข้ามาในโปรเจ็คของเราก่อน
ถ้าเราใส่โค๊ดนี้เข้าไป ในส่วนของ <head>
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- เรียกไฟล์ jquery--> <script class="include" type="text/javascript" src="jquery.jqplot.min.js"></script><!-- core หลักของ jqplot--> <script class="include" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script><!-- plugin แสดงแท่ง chart แบบแยกเป็นกลุ่มหรือประเภท (category)--> <script class="include" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script><!-- plugin แสดงค่าบนแท่ง chart--> <script class="include" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script><!-- ชนิด chart ในที่นี้คือ bar chart --> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--><!-- เพื่อรองรับ IE6-9--> <script type="text/javascript"> $(document).ready(function() { var s1 = [212, 625, 736, 1004];//แกน Y กลุ่มที่ 1 คือ ต้นทุน var s2 = [750, 5050, 3020, 2014];//แกน Y กลุ่มที่ 2 คือ รายรับ var label = [{label: 'ต้นทุน'}, {label: 'รายรับ'}];//แสดงใน label var ticks = ['2009', '2010', '2011', '2012'];//แกน X ชื่อกลุ่ม plot2 = $.jqplot('showchart', [s1, s2], {//showcart คือ id="showchart" ของ div seriesDefaults: { renderer: $.jqplot.BarRenderer,//ประเภท Chart ในที่นี้ผมเลือกใช้ Bar Chart shadow: false,//ไม่แสดงเงาบนแท่งชาร์ต pointLabels: {show: true}//แสดงค่าบนแท่งชาร์ต }, axes: { xaxis: {//แกน X renderer: $.jqplot.CategoryAxisRenderer,//เรียกประเภทการแสดงผลบน Bar Chart ticks: ticks//แสดงค่าปี 2009-2012 } }, series: label, //เชตชื่อ Label legend: { show: true//แสดง Label } }); });
และในส่วนของ <body> ให้ใช้คำสั่ง
<div style="margin-left:50px;">
<h3>Chart แสดงรายได้ประจำปี</h3>
<div id="showchart" style="width:500px;"></div>
</div>
ผลลัพธ์ที่ได้จะมีปัญหาตอนสั่งพิมพ์บน IE ครับ ดังรูป
วิธีแก้ปัญหา คือเราจะต้องปรับการแสดงผลของ canvas ซึ่งจะมีปัญหากับ IE6-IE8 ซึ่งเป็นเบราเซอร์รุ่นเก่า และทำงานกับแท็ก canvas ยังไม่ค่อยสมบูรณ์มากนัก ให้ใส่โค๊ดfunctionนี้เข้าไปครับ
$.fn.CanvasHack = function() {//function แก้ปัญหาตอน print บน IE var canvases = this.find('canvas').filter(function() { return $(this).css('position') == 'absolute'; }); canvases.wrap(function() { var canvas = $(this); var div = $('<div />').css({ position: 'absolute', top: canvas.css('top'), left: canvas.css('left') }); canvas.css({ top: '0', left: '0' }); return div; }); return this; };
เวลาเรียกใช้งาน $('#พื้นที่แสดง Chart).CanvasHack();//แก้ปัญหาตอน print บน IE
ผลลัพธ์หลังใช้ function CanvasHack
มาดูโค๊ดทั้งหมดกันเลยครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" /> <title>ทดสอบ jqplot</title> <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><!-- เรียกไฟล์ jquery--> <script class="include" type="text/javascript" src="jquery.jqplot.min.js"></script><!-- core หลักของ jqplot--> <script class="include" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script><!-- plugin แสดงแท่ง chart แบบแยกเป็นกลุ่มหรือประเภท (category)--> <script class="include" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script><!-- plugin แสดงค่าบนแท่ง chart--> <script class="include" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script><!-- ชนิด chart ในที่นี้คือ bar chart --> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]--><!-- เพื่อรองรับ IE6-9--> <script type="text/javascript"> $(document).ready(function() { var s1 = [212, 625, 736, 1004];//แกน Y กลุ่มที่ 1 คือ ต้นทุน var s2 = [750, 5050, 3020, 2014];//แกน Y กลุ่มที่ 2 คือ รายรับ var label = [{label: 'ต้นทุน'}, {label: 'รายรับ'}];//แสดงใน label var ticks = ['2009', '2010', '2011', '2012'];//แกน X ชื่อกลุ่ม plot2 = $.jqplot('showchart', [s1, s2], {//showcart คือ id="showchart" ของ div seriesDefaults: { renderer: $.jqplot.BarRenderer,//ประเภท Chart ในที่นี้ผมเลือกใช้ Bar Chart shadow: false,//ไม่แสดงเงาบนแท่งชาร์ต pointLabels: {show: true}//แสดงค่าบนแท่งชาร์ต }, axes: { xaxis: {//แกน X renderer: $.jqplot.CategoryAxisRenderer,//เรียกประเภทการแสดงผลบน Bar Chart ticks: ticks//แสดงค่าปี 2009-2012 } }, series: label, //เชตชื่อ Label legend: { show: true//แสดง Label } }); $('#showchart').CanvasHack();//แก้ปัญหาตอน print บน IE }); $.fn.CanvasHack = function() {//function แก้ปัญหาตอน print บน IE var canvases = this.find('canvas').filter(function() { return $(this).css('position') == 'absolute'; }); canvases.wrap(function() { var canvas = $(this); var div = $('<div />').css({ position: 'absolute', top: canvas.css('top'), left: canvas.css('left') }); canvas.css({ top: '0', left: '0' }); return div; }); return this; }; </script> </head> <body> <div style="margin-left:50px;"> <h3>Chart แสดงรายได้ประจำปี</h3> <div id="showchart" style="width:500px;"></div> </div> </body> </html>
สำหรับตัวอย่างสามารถดูตัวอย่างได้จาก http://localhost/โฟลเดอร์jqplotของคุณ/examples/ หรือจากในเว็บ jqplot.com เลยก็ได้ ไม่เข้าใจตรงไหน สามารถสอบถามได้ครับ หวังว่าบทความที่ผมสอนบทความนี้จะมีประโยชน์กับทุกคน
ปล.เว็บพันทิปก็ใช้ปลั๊กอินตัวนี้เหมือนกันนะครับ ผมเห็นเขาเอาไปใช้ในการแสดงผลโหวตจากสมาชิก ซึ่งให้แสดงเป็น chart แท่งแนวนอน จึงเป็นตัวอย่างตอนเวลาเอามาใช้งานได้เลยครับ สามารถ View Code เพื่อ Copy ได้สบายๆเลย อิอิ ดูตามลิงค์นี้เลย -> http://pantip.com/topic/30332727/result
ขอบคุณมากๆครับ ทำได้ซักที :)
ตอบลบด้วยความยินดีครับ
ลบขอบคุณครับ ><
ตอบลบ