เปรียบเทียบสินค้า 2 รายการขึ้นไป แสดงใน highcharts
เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdeehighcharts chart กราฟ export
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ highcharts chart กราฟ export
ดูแล้ว 6,368 ครั้ง
ไปที่
Copy
จากเนื้อหาตอนที่แล้ว เราได้เข้าใจหลักการดึงข้อมูลจากฐานข้อมูลมาสร้าง
เป็น series หรือชุดข้อมูลสำหรับ highcharts เบื้องต้นอย่างง่าย
ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น
https://www.ninenik.com/content.php?arti_id=641 via @ninenik
แต่ในการใช้งานจริง เราจะพบว่า ข้อมูลนั้นเป็นไปได้ที่จะมีไม่ครบ คอลัมน์
เช่น เรามีคอลัมน์เดือนทั้งหมด 12 คอลัมน์ และมีข้อมูลครบทุกเดือน
กราฟของเราจะทำงานถูกต้อง
แต่ถ้าเรามีบางเดือน ไม่มีข้อมูล ก็จะเป็นผลให้ชุดข้อมูล มีจำนวนไม่ถึง 12
กราฟก็จะทำงานไม่ถูกต้อง ดังนั้นเนื้อหาในตอนนี้ จะเป็นแนวทางการแก้ไข
ปัญหาดังกล่าว รวมถึงการเพิ่มเติมในส่วนของการแสดงข้อมูลเปรียบเทียบ
สินค้าตั้งแต่ 2 รายการขึ้นไปมาแสดง
คำสั่ง sql ตาราง tbl_sell (มีเพิ่มส่วนของสินค้า B เข้ามาสองรายการลำดับที่ 13 และ 14)
CREATE TABLE `tbl_sell` ( `id_sell` int(11) NOT NULL auto_increment, `name` varchar(100) NOT NULL, `qty` int(11) NOT NULL, `date_sell` date NOT NULL, PRIMARY KEY (`id_sell`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=15 ; -- -- Dumping data for table `tbl_sell` -- INSERT INTO `tbl_sell` VALUES (1, 'สินค้า A', 49, '2015-01-01'); INSERT INTO `tbl_sell` VALUES (2, 'สินค้า A', 71, '2015-02-01'); INSERT INTO `tbl_sell` VALUES (3, 'สินค้า A', 106, '2015-03-01'); INSERT INTO `tbl_sell` VALUES (4, 'สินค้า A', 129, '2015-04-01'); INSERT INTO `tbl_sell` VALUES (5, 'สินค้า A', 144, '2015-05-01'); INSERT INTO `tbl_sell` VALUES (6, 'สินค้า A', 176, '2015-06-01'); INSERT INTO `tbl_sell` VALUES (7, 'สินค้า A', 135, '2015-07-01'); INSERT INTO `tbl_sell` VALUES (8, 'สินค้า A', 148, '2015-08-01'); INSERT INTO `tbl_sell` VALUES (9, 'สินค้า A', 216, '2015-09-01'); INSERT INTO `tbl_sell` VALUES (10, 'สินค้า A', 194, '2015-10-01'); INSERT INTO `tbl_sell` VALUES (11, 'สินค้า A', 95, '2015-11-01'); INSERT INTO `tbl_sell` VALUES (12, 'สินค้า A', 54, '2015-12-01'); INSERT INTO `tbl_sell` VALUES (13, 'สินค้า B', 39, '2015-03-01'); INSERT INTO `tbl_sell` VALUES (14, 'สินค้า B', 75, '2015-06-01');
ตารางประกอบคำอธิบาย tbl_sell
id_sell | name | qty | date_sell |
1 | สินค้า A | 49 | 2015-01-01 |
2 | สินค้า A | 71 | 2015-02-01 |
3 | สินค้า A | 106 | 2015-03-01 |
4 | สินค้า A | 129 | 2015-04-01 |
5 | สินค้า A | 144 | 2015-05-01 |
6 | สินค้า A | 176 | 2015-06-01 |
7 | สินค้า A | 135 | 2015-07-01 |
8 | สินค้า A | 148 | 2015-08-01 |
9 | สินค้า A | 216 | 2015-09-01 |
10 | สินค้า A | 194 | 2015-10-01 |
11 | สินค้า A | 95 | 2015-11-01 |
12 | สินค้า A | 54 | 2015-12-01 |
13 | สินค้า B | 39 | 2015-03-01 |
14 | สินค้า B | 75 | 2015-06-01 |
1. เบื้องต้นแก้ไขไฟล์ chartoptions.js เล็กน้อย ปรับหัวข้อใหม่เป็นเปรียบเทียบรายการ
var chartOptions={ chart: { type: 'column' }, title: { text: 'เปรียบเทียบสินค้า A และ B ที่ขายได้แยกรายเดือน' }, subtitle: { text: 'ที่มา: แสดงหัวข้อย่อย' }, xAxis: { categories: [ 'ม.ค.', 'ก.พ.', 'มี.ค.', 'เม.ย.', 'พ.ค.', 'มิ.ย.', 'ก.ค.', 'ส.ค.', 'ก.ย.', 'ต.ค.', 'พ.ย.', 'ธ.ค.' ], crosshair: true }, yAxis: { min: 0, title: { text: 'จำนวน (ชิ้น)' } }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } } }
2. โครงสร้างไฟล์ทดสอบ highcharts_db.php เหมือนเดิมจากตอนที่แล้ว
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Highcharts</title> </head> <body> <div style="width:80%;margin:auto;"> <div id="hc_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="chartoptions.js"></script> <script type="text/javascript"> $(function () { // ดึงข้อมูลจากฐานข้อมูลสร้างตัวแปร object series ข้อมูลสำหรับใช้งาน $.getJSON( "series_db.php",{ year:'2015' // ส่งค่าตัวแปร ไปถ้ามี ในที่นี้ ส่งปีไป เพราะจะดูข้อมูลรายเดือนของปีที่ก่ำหนด },function(data) { var dataSeries=data; // รับค่าข้อมูลตัวแปร object series $('#hc_container').highcharts( $.extend(chartOptions,{ series:dataSeries }) ); }); }); </script> </body> </html>
3. ไฟล์ดึงข้อมูลจากฐานข้อมูลสร้างรูปแบบ json object สำหรับ highcharts
ไฟล์ series_db.php
<?php header("Content-type:application/json; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); // เชื่อมต่อฐานข้อมูล $link=mysql_connect("localhost","root","") or die("error".mysql_error()); mysql_select_db("test",$link); mysql_query("set character set utf8"); $more_q=""; if(isset($_GET['year']) && $_GET['year']!=""){ $more_q.="AND DATE_FORMAT(date_sell,'%Y') ='".$_GET['year']."' "; } // การเรียงข้อมูลหรือ order by ควรใช้ id สินค้าค้าหรือชื่อสินค้า และ วันที่ $q=" SELECT name,date_sell,SUM(qty) as sum_qty FROM tbl_sell WHERE 1 $more_q GROUP BY name,DATE_FORMAT(date_sell,'%Y-%m') ORDER BY name,date_sell "; $qr=mysql_query($q); while($rs=mysql_fetch_array($qr)){ $char_month=substr($rs['date_sell'],5,2); // หาตัวเลขสองตัวระบุเดิอน เช่น 01,12,11 $arr_name[$rs['name']]=$rs['name']; // เก็บชื่อสินค้า key เป็นไปได้ให้ใช้ id แทนชื่อจะดีกว่า $json_data[$rs['name']][$char_month]=intval($rs['sum_qty']); // เก็บข้อมูลแต่ละเดือนถ้ามี } // จัดรูปแบบข้อมูลก่อนแปลงเป็น json object // วนลูปแสดง array โดยยึด key ของชื่อสินค้า ซึ่งในที่นี้จะมีสินค้าสองรายการ if(count($arr_name)>0){ foreach($arr_name as $val_name){ // วนลูปเพื่อใช้งาน ชื่อสินค้า // เทคนิคการกำหนดข้อมูลให้ครบเดือน กรณีข้อมูลของบางเดือนไม่มีในฐานข้อมูล for($i=1;$i<=12;$i++){ $char_chk=str_pad($i,2,"0",STR_PAD_LEFT); if(!isset($json_data[$val_name][$char_chk])){ // ตรวจสอบ key เดือนไหนไม่มี $json_data[$val_name][$char_chk]=0; // .ให้กำหนดค่าเป็น 0 } } ksort($json_data[$val_name]); // จัดเรียง key ข้อมูลใหม่ ให้ไล่จาก 01,02,....,11,12 $json_series[]=array( "name"=>$val_name, "data"=>array_values($json_data[$val_name]) // เปลี่ยน key เป็น 0,1,2,... ); } } $json= json_encode($json_series); // แปลงข้อมูล array เป็น ข้อความ json object นำไปใช้งาน // ทำให้ json ไฟล์รองรับ callback function สำหรับ cross domain if(isset($_GET['callback']) && $_GET['callback']!=""){ echo $_GET['callback']."(".$json.");"; }else{ echo $json; } exit; ?>
จะเห็นว่าในส่วนของไฟล์ series_db.php เราจะมีการปรับการกำหนดค่าต่างๆ ให้เหมาะสม
รวมทั้งเทคนิคการกำหนดค่าให้กับชุดข้อมูลที่ขาดไปให้ครบตามจำนวนคอลัมน์
แนวทางนี้จะกับคอลัมน์ที่เป็น เดือน 12 หากรูปแบบงานอื่น ที่มีจำนวนคอลัมน์หรือเงื่อนไข
ต่างไปจากนี้ ต้องปรับค่าใหม่ให้เหมาะสมตามแต่รูปแบบนั้น
ตัวอย่างผลลัพธ์ที่ได้
เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 13-11-2018
กรณีใช้งาน mysqli
โค้ดไฟล์ dbconnect.php
<?php $mysqli = new mysqli("localhost", "root","","test"); /* check connection */ if ($mysqli->connect_errno) { printf("Connect failed: %sn", $mysqli->connect_error); exit(); } if(!$mysqli->set_charset("utf8")) { printf("Error loading character set utf8: %sn", $mysqli->error); exit(); }
ไฟล์ series_db.php
<?php header("Content-type:application/json; charset=UTF-8"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); require_once("inc/dbconnect.php"); $json_data = array(); $more_sql = ""; $_year = (isset($_GET['year']) && trim($_GET['year'])!="")?trim($_GET['year']):NULL; if(!empty($_year)){ $more_sql.= "AND DATE_FORMAT(date_sell,'%Y') ='".$_year."' "; } // การเรียงข้อมูลหรือ order by ควรใช้ id สินค้าค้าหรือชื่อสินค้า และ วันที่ $sql = " SELECT name,date_sell,SUM(qty) as sum_qty FROM tbl_sell WHERE 1 $more_sql GROUP BY name,DATE_FORMAT(date_sell,'%Y-%m') ORDER BY name,date_sell "; $result = $mysqli->query($sql); if($result && $result->num_rows > 0){ while($row = $result->fetch_assoc()){ $char_month=substr($row['date_sell'],5,2); // หาตัวเลขสองตัวระบุเดิอน เช่น 01,12,11 $arr_name[$row['name']]=$row['name']; // เก็บชื่อสินค้า key เป็นไปได้ให้ใช้ id แทนชื่อจะดีกว่า $json_data[$row['name']][$char_month]=intval($row['sum_qty']); // เก็บข้อมูลแต่ละเดือนถ้ามี } } // จัดรูปแบบข้อมูลก่อนแปลงเป็น json object // วนลูปแสดง array โดยยึด key ของชื่อสินค้า ซึ่งในที่นี้จะมีสินค้าสองรายการ if(count($arr_name)>0){ foreach($arr_name as $val_name){ // วนลูปเพื่อใช้งาน ชื่อสินค้า // เทคนิคการกำหนดข้อมูลให้ครบเดือน กรณีข้อมูลของบางเดือนไม่มีในฐานข้อมูล for($i=1;$i<=12;$i++){ $char_chk=str_pad($i,2,"0",STR_PAD_LEFT); if(!isset($json_data[$val_name][$char_chk])){ // ตรวจสอบ key เดือนไหนไม่มี $json_data[$val_name][$char_chk]=0; // .ให้กำหนดค่าเป็น 0 } } ksort($json_data[$val_name]); // จัดเรียง key ข้อมูลใหม่ ให้ไล่จาก 01,02,....,11,12 $json_series[]=array( "name"=>$val_name, "data"=>array_values($json_data[$val_name]) // เปลี่ยน key เป็น 0,1,2,... ); } } // แปลง array เป็นรูปแบบ json string if(isset($json_data)){ $json= json_encode($json_series); if(isset($_GET['callback']) && $_GET['callback']!=""){ echo $_GET['callback']."(".$json.");"; }else{ echo $json; } } ?>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ
เนื้อหาที่เกี่ยวข้อง
-
08 Jun2015แนะนำ highcharts สร้างกราฟง่ายๆ รองรับการ export อ่าน 10,005
Highcharts เป็นระบบกราฟ API ที่มีความยืดหยุ่นและใช้งานง่าย สามารถสร้างกรา
-
09 Jun2015วิธีการกำหนด option ของ highcharts ให้ดูง่ายขึ้น อ่าน 7,092
เทคนิคเนื้อหาส่วนนี้เป็นวิธีการกำหนด option ให้กับ highcharts เพื่อจัดรูป
-
10 Jun2015ดึงข้อมูลจากฐานข้อมูล มาแสดงใน highcharts เบื้องต้น อ่าน 14,406
พิเศษ เฉพาะสมาชิก เนื้อหาในตอนนี้ จะแสดงแนวทางการดึงข้อมูลจากฐานข้อมูล มาแสดงในรูปแบบกราฟด้
-
กำลังอ่านเนื้อหานี้อยู่12 Jun2015เปรียบเทียบสินค้า 2 รายการขึ้นไป แสดงใน highcharts อ่าน 6,368
พิเศษ เฉพาะสมาชิก จากเนื้อหาตอนที่แล้ว เราได้เข้าใจหลักการดึงข้อมูลจากฐานข้อมูลมาสร้าง เป็น
เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก
กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ
ยังไม่เป็นสมาชิก
สมาชิกล็อกอิน
สมาชิกล็อกอิน
( หรือ เข้าใช้งานผ่าน Social Login )
URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน