AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart正式版
當使用諸如AnyChart之類的圖表庫時，它使數據的可視化變得如此快速和輕松，對于初學者來說，最具挑戰性的步驟通常是加載數據。我認為這主要是由于以下事實的結果：盡管我們輸出數據的方式非常相似，但輸入數據通常卻有很大不同。數據可能在許多方面有所不同，包括數據集中特征的數量，這些特征可能是什么類型，數據的格式以及數據的存儲方式。這是我們今天要解決的最后一個問題。
在文檔中有很多內容涉及使用代碼中聲明的數據對象以及使用AnyChart的數據加載器從文件導入數據。但是，如何從SQL數據庫導入數據呢？這是一種易于實現但經常被誤解的方法，用于處理和加載用于數據可視化的數據。
不幸的是，由于JavaScript是一種客戶端解決方案，并且出于安全方面的考慮，查詢數據庫需要采用服務器端的方法，因此無法使用JavaScript來查詢數據庫- 您僅無法在JavaScript代碼中存儲數據庫登錄名和密碼。有許多解決此問題的方法，包括涉及PHP，Ajax，Node.js等的方法。今天，當我們將數據存儲在MySQL中時，我們將集中精力使用PHP為我們處理此任務。
在本教程中，我們將介紹如何使用PHP查詢MySQL數據庫。我們將描述所涉及的步驟，并揭示它實際上根本不是挑戰，只是有所不同！
如何使用PHP訪問MySQL數據庫
我們的過程可以分為兩個明確定義的步驟。首先，在查詢表并將結果附加到JSON對象之前，我們將使用PHP訪問MySQL數據庫。第二步以與您慣用的相同方式繪制圖表。
1.創建一個PHP腳本
第一步是創建一個PHP腳本。這可以通過使用以下打開和關閉標簽來完成。服務器將這些標記中寫入的所有代碼讀取為PHP。
<?php
// code goes here.
?>
2.聲明MySQL數據庫變量
接下來，我們聲明訪問數據庫所需的MySQL數據庫變量。我們需要用戶名，密碼，主機和數據庫名稱。在下面的代碼中，我們添加了虛擬信息，以向您展示如何實現。請用您自己的數據庫的必要信息替換這些字符串。
請注意，如果您已設置本地數據庫，則主機名是“ localhost”，通常默認用戶名是“ root”。
$username = "anychart_user"; // use your username
$password = "password"; // use your password
$host = "localhost"; // use your host name or address
$database="local_db"; // use your database name
3.連接到數據庫
在第三步中，我們將使用先前定義的變量連接到我們的數據庫。我們使用以下代碼進行操作。第一行創建到服務器的連接，第二行將我們連接到正確的數據庫。
// connect to database
$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);
4.執行查詢
建立連接后，我們可以執行查詢。對于不熟悉SQL的人來說，查詢實際上是對返回所請求數據的數據庫的查詢。下面，我們做一個簡單的查詢，從示例表中獲取所有字段和所有值。您應該用適合您需要的查詢替換它。前三行創建查詢字符串，而最后一行執行查詢。
// perform query
// you may need to tune the query if your database is different
$myquery = "
SELECT * FROM `data`
";
$query = mysql_query($myquery);
然后，我們添加以下代碼以讓我們知道查詢是否不返回數據：
if ( ! $query ) {
echo mysql_error();
die;
}
5.從查詢創建數據
在第五步中，在將返回的查詢結果填充到該數組之前，我們將'data'變量聲明為空數組。為此，我們使用for循環遍歷返回的查詢數據。
// create data object
$data = array();
for ($x = 0; $x < mysql_num_rows($query); $x++) { $data[] = mysql_fetch_assoc($query); }
6.將數據編碼為JSON格式
現在我們將數據存儲在數組中，我們需要將其轉換為可以與AnyChart一起使用的格式。AnyChart支持多種格式，包括CSV，JSON，XML甚至Google Spreadsheets。這次，我們將數據編碼為JSON。使用以下代碼即可輕松完成此操作：
// encode data to json format
echo json_encode($data);
7.緊密連接
PHP腳本的最后一步是關閉與服務器的連接。
// close connection
mysql_close($server);
放在一起，我們得到了以下PHP腳本：
<?php
// declare database variables
// change to the information relevant
// to your database
$username = "anychart_user";
$password = "password";
$host = "localhost";
$database="local_db";
// connect to database
$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);
// perform query
// change the query to one relevant to your database
$myquery = "
SELECT * FROM `data`
";
$query = mysql_query($myquery);
if ( ! $query ) {
echo mysql_error();
die;
}
// encode data to json format
echo json_encode($data);
// close connection
mysql_close($server);
?>
上面的代碼連接到我們的MySQL數據庫，對其進行查詢，然后返回數據，然后以JSON格式公開。準備好所有數據后，我們可以進入有趣的部分：JS圖表！
8.繪制圖表
一旦我們使用PHP導入了數據，便可以輕松地與AnyChart一起使用。我們需要做的就是使用與導入文件相同的數據適配器模塊。我們可以使用以下腳本執行此操作：
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
一旦完成，我們在加載數據時只需引用我們的PHP腳本。像這樣：
anychart.data.loadJsonFile("php/data.php", function (data) {
// chart code goes here
})
否則，下面的整個HTML / CSS / JavaScript代碼將照常進行：
<html>
<head>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-base.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
<style type="text/css">
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile("php/data.php", function (data) {
// create a chart and set loaded data
chart = anychart.bar(data);
chart.container("container");
chart.draw();
});
});
</script>
</body>
</html>
結論
如您所見，這種為數據可視化處理數據的方法比您想象的要容易得多。通過遵循這些明確定義的步驟，我們可以輕松地使用PHP查詢數據庫，在使用AnyChart可視化數據之前將數據作為JSON對象檢索。
本教程中描述的將MySQL數據庫連接到使用AnyChart創建的JS圖表的示例非常簡單。如果您是經驗豐富的開發人員，并且愿意進行更復雜的集成，那么您可能也有興趣查看PHP，Symfony和MySQL，PHP，Laravel和MySQL，PHP，Slim和MySQL以及其他 PHP集成模板，以及其他語言的MySQL集成模板。
盡管在本教程中我們專注于PHP，但必須注意，其他方法是可行，容易的，并且可能更適合您的用例。這些包括使用WebSockets，Comet，Ajax，Node.js等。如果您需要有關任何這些技術的教程，請隨時與我和/或AnyChart小組聯系，我相信我們可以為您提供幫助！
您還可以在JSON輸出中添加更多數據，并為更復雜的圖表映射數據。
相關產品推薦：
AnyGantt-構建復雜且內容豐富的甘特圖的理想工具
AnyMap-可交互式地圖是AnyChart組件
AnyStock-基于XML/JSON的Flash金融圖表解決方案
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線