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="//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="//cdn.anychart.com/releases/8.8.0/js/anychart-base.min.js"></script>
<script src="//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@pclwef.cn
文章转载自：
彩票走势图 
10次
相关产品
最新文章 
彩票走势图相关的文章 
微信
在线咨询
渝公网安备
50010702500608号
客服热线