[Echarts視覺化] 二.php和ajax連線資料庫實現動態資料視覺化
這篇文章主要結合PHP、MySQL、JQuery和Ajax從資料庫中獲取資料,動態的顯示值,這是實現真正視覺化的技術入,可以應用於實際的專案中。基礎性文章,希望對您有所幫助,如果文章中存在不足之處,還請海涵~
一. 回顧Echarts繪製直方圖
Echarts官網地址:http://echarts.baidu.com/index.html
注意:基礎知識參考前一篇文章,這篇文章主要是程式碼為主,整個流程都是詳細的。同時發現,準備寫這篇文章的時候,“
Echarts程式碼 test01.html
執行結果如下圖所示:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小(寬高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基於準備好的dom,初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['數量'] }, xAxis: { data: ["貴陽市","遵義市","凱裡市","六盤水市","都勻市","畢節市"] }, yAxis: {}, series: [{ name: '數量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
二. 建立資料庫
建立資料庫hcpmanage,再建立表guizhou,包括序號、地名、數量三個欄位。
如下所示:
-- ---------------------------- -- Table structure for `guizhou` -- ---------------------------- DROP TABLE IF EXISTS `guizhou`; CREATE TABLE `guizhou` ( `id` int(11) NOT NULL AUTO_INCREMENT, `place` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL, `num` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; -- ---------------------------- -- Records of guizhou -- ---------------------------- INSERT INTO `guizhou` VALUES ('1', '貴陽市', '5'); INSERT INTO `guizhou` VALUES ('2', '遵義市', '20'); INSERT INTO `guizhou` VALUES ('3', '凱裡市', '36'); INSERT INTO `guizhou` VALUES ('4', '六盤水市', '10'); INSERT INTO `guizhou` VALUES ('5', '都勻市', '10'); INSERT INTO `guizhou` VALUES ('6', '畢節市', '20');
三. PHP連線資料庫及Json傳值
PHP連線資料庫的核心程式碼大家非常熟悉了,下面這段程式碼簡單包括了Json取值。
sql.php檔案:
<?php
//PHP連線資料庫
header("content-type:text/json;charset=utf-8");
//連結資料庫
$con = mysql_connect("localhost", "root", "123456");
if (!$con)
{
die('Could not connect database: ' . mysql_error());
}
//選擇資料庫
$db_selected = mysql_select_db("hcpmanage", $con);
if (!$db_selected)
{
die ("Can\'t use yxz : " . mysql_error());
}
//執行MySQL查詢-設定UTF8格式
mysql_query("SET NAMES utf8");
//查詢學生資訊
$sql = "SELECT * FROM `guizhou` ";
$result = mysql_query($sql,$con);
//定義變數json儲存值
$data="";
$array= array();
class GuiZhou{
public $id;
public $place;
public $num;
}
while ($row = mysql_fetch_row($result))
{
list($id,$place,$num) = $row;
/*
echo $id.' ';
echo $place.' ';
echo $num;
echo '<br >';
*/
$gz = new GuiZhou();
$gz->id = $id;
$gz->place = $place;
$gz->num = $num;
//陣列賦值
$array[] = $gz;
}
$data = json_encode($array);
echo $data;
//{"id":"1","place":"\u8d35\u9633\u5e02","num":"5"}
?>
核心程式碼,通過array陣列獲取Guizhou類中的值,該值是讀取資料庫並且賦值給例項gz的,再呼叫json_encode($array)進行格式轉換。輸出結果如下所示,也可以Json只獲取兩個值。注意訪問地址為:http://localhost:8080/20170224YXZ/sql.php,檔案放到Apache的htdocs目錄下。所有檔案如下圖所示:
四. Ajax動態實現Echarts視覺化
test02.html程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小(寬高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom,初始化echarts例項
var myChart = echarts.init(document.getElementById('main'));
// 初始化兩個陣列,盛裝從資料庫中獲取到的資料
var places=[], nums=[];
function TestAjax(){
$.ajax({
type: "post",
async: false, //非同步執行
url: "sql.php", //SQL資料庫檔案
data: {}, //傳送給資料庫的資料
dataType: "json", //json型別
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
places.push(result[i].place);
nums.push(result[i].num);
console.log(result[i].place);
console.log(result[i].num);
}
}
}
})
return places, nums;
}
//執行非同步請求
TestAjax();
// 指定圖表的配置項和資料
var option = {
title: {
text: 'ECharts+Ajax+MySQL+PHP'
},
tooltip: {
show : true
},
legend: {
data:['數量']
},
xAxis: [{
//data: ["貴陽市","遵義市","凱裡市","六盤水市","都勻市","畢節市"]
type : 'category',
data : places
}],
yAxis: {
type : 'value'
},
series: [{
name : "數量",
type : "bar",
data : nums
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
<marquee>Eastmount 璋 love 娜!!!</marquee>
</body>
</html>
執行結果如下圖所示,這是動態呼叫的視覺化結果。其中Ajax核心程式碼為:
var places=[], nums=[];
function TestAjax(){
$.ajax({
type: "post",
async: false, //非同步執行
url: "sql.php", //SQL資料庫檔案
data: {}, //傳送給資料庫的資料
dataType: "json", //json型別
success: function(result) {
if (result) {
for (var i = 0; i < result.length; i++) {
places.push(result[i].place);
nums.push(result[i].num);
console.log(result[i].place);
console.log(result[i].num);
}
}
}
})
return places, nums;
}
//執行非同步請求
TestAjax();
同時,瀏覽器中檢查元素可以對Ajax的值進行測試輸出,呼叫console.log函式。如下圖所示:
資料動態變化,資料庫變了,視覺化圖也變化:
五. 難點及注意事項
初學的同學可能會遇到一下幾個問題:
1.其中Echarts和JQuery需要匯入的,即:
<script src="echarts.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
2.Echarts使用的方法請大家學習前一篇文章和官網文章,這裡不再敘述。
3.PHP檔案需要header("content-type:text/json;charset=utf-8");宣告Json格式,同時Ajax也需要設定dataType: "json"。
4.宣告的Ajax函式需要執行,對應程式碼中的TestAjax(),否則只是定義未執行。
5.如果Ajax報錯 [object Object],如下圖所示:
這需要Json格式一致,而我的錯誤是因為在PHP檔案中增加了個註釋導致無值,百度都無法解決,頭都弄大了,所以寫程式碼需要仔細。
6.最後動態資料是通過變數實現的,即ages替換以前的 [5, 20, 36, 10, 10, 20]。
series : [ {
name : "num",
type : "bar",
data : ages
}]
最後希望這篇文章對你有所幫助,尤其是對Echarts視覺化感興趣的同學,同樣Java、C#、Python相關網站的原理一樣,程式碼也會上傳。最近心情真的好低落,哎!有時間寫日記總結下吧。
穩坐珠江夜遊船,翻轉長隆水世界。
笑談粵廣風流人,寧負天下不負卿。
哎!總是心事重重,自己真的有太多的不足和需要成長的地方,以前總會知足,現在也會。哎!為人處世真需要一輩子去學習,且寫且珍惜吧,傳遞正能量。
(By:Eastmount 2017-06-02 中午2點 http://blog.csdn.net/eastmount/ )