AnyChart如何使用PHP将MySQL数据库连接到JS图表

翻译|使用教程|编辑:杨鹏连|2020-08-07 10:15:57.730|阅读 24 次

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

# 正版采购狂欢节,企业采购正当时 #

相关链接:

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="https://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="https://cdn.anychart.com/releases/8.8.0/js/anychart-base.min.js"></script>
  <script src="https://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正版授权,或了解更多产品信息请点击【咨询在线客服


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Anychart

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
title
相关厂商
相关产品
AnyGantt

基于JavaScript的高级解决方案,用于构建复杂且信息丰富的甘特图。

AnyChart

灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。

AnyMap

AnyMap的可交互式地图是AnyChart组件的一种独特的功能,能够让你可视化地理相关的数据。

AnyStock

基于XML/JSON的Flash金融图表解决方案,能将实时数据转换为具有交互功能的精细图表,使你的数据直观地展现在Web页面。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat