วันอาทิตย์ที่ 31 มีนาคม พ.ศ. 2556

เริ่มต้นสร้าง Chart อย่างเทพกับ jqPlot


     ผมสนใจตัวทำแผนภูมิหรือ Charts ซึ่งเป็น Plugin ของ jQuery อยู่ตัวนึง  ที่ฟรีแบบไม่มีเงื่อนไขใดๆ  ซึ่งจะไม่เหมือนกับ Highchart  ที่หลายคนอาจรู้จักและเคยใช้ แต่เราไม่สามารถเอามาใช้ในเชิงพาณิชย์แบบฟรีๆได้
     ส่วนเจ้าตัวนี้มีชื่อว่า 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

3 ความคิดเห็น :