您的位置:首页 > 数据库 > MySQL

怎样才能将MySQL数据库连接到JS图表

2020-08-20 14:08 796 查看

当使用诸如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=mysqlconnect(server = mysql_connect(server=mysqlc​onnect(host, $username, $password);
connection=mysqlselectdb(connection = mysql_select_db(connection=mysqls​electd​b(database, $server);

4.执行查询

建立连接后,我们可以执行查询。对于不熟悉SQL的人来说,查询实际上是对返回所请求数据的数据库的查询。下面,我们做一个简单的查询,从示例表中获取所有字段和所有值。您应该用适合您需要的查询替换它。前三行创建查询字符串,而最后一行执行查询。

// perform query
// you may need to tune the query if your database is different
$myquery = "
SELECT * FROM

data

";
query=mysqlquery(query = mysql_query(query=mysqlq​uery(myquery);
然后,我们添加以下代码以让我们知道查询是否不返回数据:
if ( ! $query ) {
echo mysql_error();
die;
}

5.从查询创建数据

在第五步中,在将返回的查询结果填充到该数组之前,我们将’data’变量声明为空数组。为此,我们使用for循环遍历返回的查询数据。
// create data object
$data = array();

for ($x = 0; x<mysqlnumrows(x < mysql_num_rows(x<mysqln​umr​ows(query); $x++) { data[]=mysqlfetchassoc(data[] = mysql_fetch_assoc(data[]=mysqlf​etcha​ssoc(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一起使用。我们需要做的就是使用与导入文件相同的数据适配器模块。我们可以使用以下脚本执行此操作:

一旦完成,我们在加载数据时只需引用我们的PHP脚本。像这样:
anychart.data.loadJsonFile(“php/data.php”, function (data) {
// chart code goes here
})
否则,下面的整个HTML / CSS / JavaScript代码将照常进行:

结论

如您所见,这种为数据可视化处理数据的方法比您想象的要容易得多。通过遵循这些明确定义的步骤,我们可以轻松地使用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输出中添加更多数据,并为更复杂的图表映射数据。

本文转载自【慧都科技】欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: