熊猫图表 连接mysql_使用PHP将MySQL数据库连接到JavaScript图表

熊猫图表 连接mysql

When using a charting library like AnyChart, which makes visualizing data so quick and easy, often the most challenging step for beginners is loading data. I think this is largely a result of the fact that while the ways we output the data are quite similar, the input data is commonly very different. The data may differ in many ways including the number of features in the dataset, what type these features may be, the format of the data, and how the data is stored. It is this final issue which we will be addressing today.

当使用诸如AnyChart之类的图表库时 ，它使数据的可视化变得如此快速和轻松，对于初学者来说，最具挑战性的步骤通常是加载数据。 我认为这主要是由于以下事实造成的：尽管我们输出数据的方式非常相似，但输入数据通常却有很大不同。 数据可能在许多方面有所不同，包括数据集中特征的数量，这些特征可能是什么类型，数据的格式以及数据的存储方式 。 这是我们今天要解决的最后一个问题。

There is a lot of coverage in the documentation of using a data object declared within the code as well as importing your data from a file using AnyChart’s data loader. But what about importing the data from an SQL database? This is an easily done but often misunderstood approach to handling and loading data for data visualizations.

在文档中有很多内容涉及使用代码中声明的数据对象以及使用AnyChart的数据加载器从文件导入数据。 但是，如何从SQL数据库导入数据呢？ 这是一种易于实现但经常被误解的方法，用于处理和加载用于数据可视化的数据。

Unfortunately, it is not possible to use JavaScript to query a database because JavaScript is a client side solution and querying a database requires a server side approach due to security concerns — you just can’t store database login and password in your JavaScript code. There are many workarounds for this problem including approaches involving PHP, Ajax, Node.js, and many more. Today we will focus on using PHP to handle this task for us when our data is stored in MySQL.

不幸的是，由于JavaScript是一种客户端解决方案，并且出于安全方面的考虑， 查询数据库需要服务器端的方法 ，因此无法使用JavaScript来查询数据库- 您仅不能在JavaScript代码中存储数据库登录名和密码 。 有许多解决此问题的方法，包括涉及PHP，Ajax，Node.js等的方法。 今天，当我们将数据存储在MySQL中时，我们将重点介绍使用PHP为我们处理此任务。

In this tutorial, we will be covering how to query a MySQL database using PHP. We will describe the steps involved and reveal that it is in fact not challenging at all, just different!

在本教程中，我们将介绍如何使用PHP查询MySQL数据库 。 我们将描述所涉及的步骤，并揭示它实际上根本不是挑战，只是有所不同！

如何使用PHP访问MySQL数据库 (How to Access a MySQL Database Using PHP)

Our process can be broken down into two clearly defined steps. First, we will use PHP to access our MySQL database before querying the table and appending the result into a JSON object. The second step simply draws the chart in the same way you’ve been used to.

我们的过程可以分为两个明确定义的步骤。 首先，在查询表并将结果附加到JSON对象之前，我们将使用PHP访问MySQL数据库。 第二步简单地以与您惯用的方式绘制图表。

1.创建一个PHP脚本 (1. Create a PHP script)

The first step is to create a PHP script. This can be done by using the following opening and closing tags. All code written within these tags are read by the server as PHP.

第一步是创建一个PHP脚本。 这可以通过使用以下打开和关闭标签来完成。 服务器将这些标记中写入的所有代码读取为PHP。

  // code goes here.?>

2.声明MySQL数据库变量 (2. Declare MySQL database variables)

Next, we declare our MySQL database variables required to access our database. We need the username, password, host, and database name. In the code below we have added dummy information for the purpose of showing you how this is done. Please replace these strings with the necessary information for your own database.

接下来，我们声明访问数据库所需MySQL数据库变量。 我们需要用户名，密码，主机和数据库名称。 在下面的代码中，我们添加了虚拟信息，以向您展示如何实现。 请用您自己的数据库的必要信息替换这些字符串。

Note that if you have set up a local database, the host name is “localhost” and often the default username is “root”.

请注意，如果您已设置本地数据库，则主机名是“ 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.连接到数据库 (3. Connect to database)

In the third step, we will connect to our database using the previously defined variables. We do so with the following code. The first line creates the connection to the server while the second line connects us to the correct database.

在第三步中，我们将使用先前定义的变量连接到我们的数据库。 我们使用以下代码进行操作。 第一行创建到服务器的连接，第二行将我们连接到正确的数据库。

// connect to database
$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);

4.执行查询 (4. Perform query)

Once our connection is made, we can perform a query. For those of you new to using SQL, a query is effectively an enquiry to a database that returns the requested data. Below, we do a simple query that fetches all the fields and all the values from an example table. You should replace this with the appropriate query for your needs. The first 3 lines create the query string while the final line performs the query.

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

// perform query// you may need to tune the query if your database is different 
$myquery = "
  SELECT * FROM `data`
  ";
$query = mysql_query($myquery);

We then add the following code to let us know if the query returns no data:

然后，我们添加以下代码以让我们知道查询是否不返回数据：

if ( ! $query ) {
         
  echo mysql_error();
  die;
}

5.从查询创建数据 (5. Create data from the query)

In the fifth step, we declare ‘data’ variable as an empty array before populating this array with the results of our returned query. We do this by iterating over the returned query data with a for loop.

在第五步中，在将返回的查询结果填充到该数组之前，我们将'data'变量声明为空数组。 为此，我们使用for循环遍历返回的查询数据。

// create data object
$data = array();for ($x = 0; $x < mysql_num_rows($query); $x++) {
         
  $data[] = mysql_fetch_assoc($query);
}

6.将数据编码为JSON格式 (6. Encode data to JSON format)

Now that we have our data in an array we need to transform it into a format that can be used with AnyChart. AnyChart works with a variety of formats, including CSV, JSON, XML, and even Google Spreadsheets. This time, we will encode our data as a JSON. This is easily done with the following code:

现在我们将数据存储在数组中，我们需要将其转换为可以与AnyChart一起使用的格式。 AnyChart支持多种格式 ，包括CSV，JSON，XML甚至Google Spreadsheets。 这次，我们将数据编码为JSON。 使用以下代码即可轻松完成此操作：

// encode data to json format
echo json_encode($data);

7.紧密连接 (7. Close connection)

The final step in our PHP script is to close the connection we have with our server.

PHP脚本的最后一步是关闭与服务器的连接。

// close connectionmysql_close($server);

With everything put together we have the following PHP script:

综合所有内容，我们有了以下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);
?>

The above code connects to our MySQL database, queries it, and returns data which it then exposes in a JSON format. With our data all prepared we can get onto the fun part: JS charting!

上面的代码连接到我们MySQL数据库，对其进行查询，然后返回数据，然后将其以JSON格式公开。 准备好所有数据后，我们可以进入有趣的部分： JS图表 ！

8.绘制图表 (8. Draw Chart)

Once we have our data imported using PHP it is very easy to use with AnyChart. All we need to do is use the same data adapter module we’ve used for importing files. We can do this with the following script:

一旦我们使用PHP导入了数据，就可以轻松使用AnyChart。 我们需要做的就是使用与导入文件相同的数据适配器模块。 我们可以使用以下脚本执行此操作：

Once that is done we simply refer to our PHP script when loading the data. Like this:

一旦完成，我们在加载数据时只需引用我们PHP脚本。 像这样：

anychart.data.loadJsonFile("php/data.php", function (data) {
           // chart code goes here})

And otherwise, it is business as usual with the entire HTML/CSS/JavaScript code below:

否则，下面的整个HTML / CSS / JavaScript代码将照常进行：

结论 (Conclusion)

As you can see this approach to handling data for data visualizations is a lot more accessible than you would think. By following these clearly defined steps we can easily use PHP to query our database, retrieve the data as a JSON object before visualizing it using AnyChart.

如您所见，这种为数据可视化处理数据的方法比您想象的要容易得多。 通过执行这些明确定义的步骤，我们可以轻松地使用PHP查询数据库，在使用AnyChart可视化数据之前将数据作为JSON对象检索。

The example of connecting a MySQL database to JS charts created with AnyChart described in this tutorial is pretty basic. If you are a more experienced developer and feel ready for more complicated integrations, you may also be interested in checking out PHP, Symfony and MySQL, PHP, Laravel and MySQL, PHP, Slim and MySQL, and other PHP integration templates, as well as MySQL integration templates for other languages.

本教程中描述的将MySQL数据库连接到使用AnyChart创建的JS图表的示例非常简单。 如果您是经验丰富的开发人员，并且愿意进行更复杂的集成，那么您可能也有兴趣检查PHP，Symfony和MySQL ， PHP，Laravel和MySQL ， PHP，Slim和MySQL以及其他PHP集成模板 ，以及其他语言的MySQL集成模板 。

Although we focused on PHP in this tutorial, it must be noted that the other approaches are viable, easy, and may be better suited to your use case. These include using WebSockets, Comet, Ajax, Node.js, and more. If you are in need of tutorials on any of these technologies please feel free to reach out to me and/or the AnyChart team and I’m sure we can help you out!

尽管在本教程中我们专注于PHP，但必须注意，其他方法是可行，容易的，并且可能更适合您的用例。 这些包括使用WebSockets，Comet，Ajax，Node.js等。 如果您需要有关任何这些技术的教程，请随时与我和/或AnyChart小组联系，我相信我们可以为您提供帮助！

You can also add more data in JSON output and map the data for more complex charts.

您还可以在JSON输出中添加更多数据，并为更复杂的图表映射数据 。

Originally published at https://www.anychart.com on August 4, 2020.

最初于 2020年8月4日 在 https://www.anychart.com 上 发布 。

翻译自: https://medium.com/swlh/connecting-a-mysql-database-to-a-javascript-chart-using-php-28f25ea97a0d

熊猫图表 连接mysql