เริ่มต้นสร้าง Chart อย่างเทพกับ jqPlot
ส่วนเจ้าตัวนี้มีชื่อว่า 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 ครับ ดังรูป
$.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
ขอบคุณมากๆครับ ทำได้ซักที :)
ตอบลบด้วยความยินดีครับ
ลบขอบคุณครับ ><
ตอบลบ