สร้าง Charts แบบสวย ๆ ด้วย Echarts Javascript Library

สวัสดีครับ ในบทความนี้ เราจะมาแนะนำ Java script Library อีกตัว ไว้เป็นทางเลือก สำหรับ การสร้าง รายงานในรูปแบบกราฟ ครับ
ซึ่ง Library ที่จะแนะนำในที่นี้ มีชื่อ ว่า Echarts สามารถดูตัวอย่าง เต็ม ๆ ได้ที่

https://ecomfe.github.io/echarts-doc/public/en/index.html

ในเว็บจะมีรายละเอียด ตัวอย่าง Api และ วิธีใช้งาน อย่างละเอียด สามารถใช้งานได้ง่าย มาก ๆ ครับ และ ยัง รองรับการสร้าง กราฟ ในรูปแบบต่าง ๆ มาก มาย เช่น Line,Bar,Pie,Scatter,Map,GEO,Radar, หรือ จะสร้างกราฟแบบ 3D ก็ได้ เรียกได้ว่าสร้างได้ทุกแบบที่ต้องการเลยครับ

สำหรับในบทความนี้ เราจะมา แสดงตัวอย่างการเรียกใช้งานแบบง่าย และ เป็น Chart ที่ใช้บ่อย คือ Bar (กราฟแท่ง) และ Pie (กราฟวงกลม)

ตัวอย่างการใช้งาน Bar Chart

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body>
       <div class="container">

	   <div id="report" style="width:100%;height: 370px"></div><!--กำหนด ID ชื่อว่า report เพื่อแสดง Chart-->
		
       <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script><!--นำเข้า Script echarts.min.js-->
	   
       <script type="text/javascript">
			var dom = document.getElementById("report");//กำหนดให้แสดง Chart ใน Element ที่มี ID ชื่อว่า Report
			var myChart = echarts.init(dom);
			option = {
			    title: {
					text: 'รายงานแสดงยอดขายตามช่วงวัน',//แสดงหัวข้อรายงาน
					subtext: 'เวลา 8:00 น  ถึง 16:00 น.',
					left: 'center'
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data:[10, 52, 200, 334, 390, 330, 220],
					type: 'bar'
				}]
			};
			;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
       </script>
   </body>
</html>

ตัวอย่างการแสดงผล Bar Chart

ตัวอย่างการใช้งาน Pie Chart

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript">
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);

				var seriesData = [
					{name:'Mon',value:10},
					{name:'Tue',value:52}, 
					{name:'Wed',value:200},
					{name:'Thu',value:334},
					{name:'Fri',value:390},
					{name:'Sat',value:330},
					{name:'Sun',value:220}
				];
				
				option = {
					title : {
						text: 'รายงานแสดงยอดขายตามช่วงวัน',
						subtext: 'เวลา 8:00 น  ถึง 16:00 น.',
						x:'center'
					},
					tooltip : {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},

					series : [
						{
							name: 'รายงานแสดงยอดขายตามช่วงวัน',
							type: 'pie',
							data: seriesData,
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};

				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
       </script>
   </body>
</html>

ตัวอย่างการแสดงผล Pie Chart

การแสดงข้อมูลใน Chart จากฐานข้อมูล MySQL

ในตัวอย่างต่อไปนี้ เราจะนำข้อมูลที่อยู่ในฐานข้อมูล MySQL มาแสดงใน Chart ก่อนอื่น เรามาสร้าง ตารางตัวอย่างกันก่อนครับ

ตัวอย่าง ได้สร้าง ฐานข้อมูล ชื่อว่า echarts และ สร้างตารางชื่อว่า report

CREATE TABLE `report` (
&nbsp;`id` int(11) NOT NULL AUTO_INCREMENT,
&nbsp;`title` varchar(100) NOT NULL,
&nbsp;`value` int(11) NOT NULL,
&nbsp;PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8;

นำเข้าข้อมูลตัวอย่าง

INSERT INTO `report` (`id`, `title`, `value`) VALUES
(1, 'Mon', 12000),
(2, 'Tue', 30000),
(3, 'Wed', 50000),
(4, 'Thu', 80000),
(5, 'Fri', 90000),
(6, 'Sat', 20000),
(7, 'Sun', 75000);

จากนั้นเรามาเขียนไฟล์ bar.php เพื่อแสดงข้อมูล Chart กันครับ

ตัวอย่างไฟล์ bar.php

<?php
	//ตั้งค่าการเชื่อมต่อฐานข้อมูล
	$servername = "localhost";
	$username = "root";
	$password = "";
	$dbname = "echarts";//กำหนดชื่อฐานข้อมูล
	$conn = mysqli_connect($servername, $username, $password, $dbname);
	
	mysqli_set_charset($conn, "utf8");

	if (!$conn) {
		die("Connection failed: " . mysqli_connect_error());
	}

	$sql = "SELECT * FROM report"; //คำสั่ง เลือกข้อมูลจากตาราง report
	
	$result = mysqli_query($conn, $sql);
	$title = [];
	$value = [];
	if (mysqli_num_rows($result) > 0) {
		
		while($row = mysqli_fetch_assoc($result)) {
			$title[] = $row['title'];
			$value[] = $row['value'];
		}
	}

	mysqli_close($conn);
?>
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
	  
   </head>
   <body>
       <div class="container">

	   <div id="report" style="width:100%;height: 370px"></div>
		
       <script type="text/javascript" src="echarts.min.js"></script>
	   
       <script type="text/javascript">
			var dom = document.getElementById("report");
			var myChart = echarts.init(dom);
			option = {
			    title: {
					text: 'รายงานแสดงยอดขายตามช่วงวัน',
					subtext: 'เวลา 8:00 น  ถึง 16:00 น.',
					left: 'center'
				},
				xAxis: {
					type: 'category',
					data: <?=json_encode($title);?>
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data:<?=json_encode($value);?>,
					type: 'bar'
				}]
			};
			;
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
       </script>
   </body>
</html>

ต่อมาเรามาทำการแสดงข้อมูลในรูปแบบ Pie Chart กันบ้าง

ตัวอย่างไฟล์ pie.php

<?php

	$servername = "localhost";
	$username = "root";
	$password = "";
	$dbname = "echarts";
	$conn = mysqli_connect($servername, $username, $password, $dbname);
	
	mysqli_set_charset($conn, "utf8");

	if (!$conn) {
		die("Connection failed: " . mysqli_connect_error());
	}

	$sql = "SELECT * FROM report";
	
	$result = mysqli_query($conn, $sql);
	$content = [];
	if (mysqli_num_rows($result) > 0) {
		
		while($row = mysqli_fetch_assoc($result)) {
			$content[] = [
				'name' => $row['title'],
				'value' => $row['value']
			];
		}
	}
	mysqli_close($conn);
?>

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="echarts.min.js"></script>
       <script type="text/javascript">
				var dom = document.getElementById("container");
				var myChart = echarts.init(dom);

				var seriesData = <?=json_encode($content)?>;
				
				option = {
					title : {
						text: 'รายงานแสดงยอดขายตามช่วงวัน',
						subtext: 'เวลา 8:00 น  ถึง 16:00 น.',
						x:'center'
					},
					tooltip : {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},

					series : [
						{
							name: 'รายงานแสดงยอดขายตามช่วงวัน',
							type: 'pie',
							data: seriesData,
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};

				if (option && typeof option === "object") {
					myChart.setOption(option, true);
				}
       </script>
   </body>
</html>

ตัวอย่าง Source Code

ขอขอบคุณข้อมูลจาก https://ecomfe.github.io/echarts-doc/public/en/index.html

การแสดงข้อมูลใน Chart จากฐานข้อมูล MySQL

Popular Posts