使用 PHP 和 MongoDB 创建图表

介绍

目前，大多数企业应用程序都使用关系数据库，如 SQL、MariaDB 或 MySQL，因为它们很受欢迎且性质稳定。然而，开发人员在尝试扩展此类数据库时会遇到问题。此外，考虑到最近出现的处理大型数据集的 Web 应用程序，开发人员一直在寻找更具可扩展性的数据库。这归因于非关系 (NoSQL) 数据库的兴起。MongoDB 就是其中一个非常流行的数据库。

在本教程中，我们将逐步使用存储在 MongoDB 数据库中的数据创建图表。我们将使用 PHP 脚本语言连接到数据库并获取数据，然后使用这些数据来呈现图表。

我们之所以选择 PHP 而不是其他类似语言，是因为它带有 MongoDB 驱动程序，可以将其连接到数据库。如果您需要在 Web 应用程序中添加更多功能，也可以使用 Node.js。

先决条件

要使用 PHP 和 MongoDB 创建图表，您需要在系统上下载并安装以下内容：

微软XAMPP
MongoDB
MongoDB 的 PHP 驱动程序
作曲家

包含依赖项

要使用 MongoDB 在 PHP 中呈现 FusionCharts，我们需要包含以下依赖项：

FusionCharts Suite XT：下载 FusionCharts Suite XT zip 文件并将所有解压的脚本文件存储在项目文件夹内的新文件夹中，如下所示。

      <html>
	<head>
		<!-- including FusionCharts core package JS files -->
	    <script src="path-to/fusioncharts.js"></script>
	    <script src="path-to/fusioncharts.theme.fint.js"></script>
	</head>
</html>
    

FusionCharts PHP Wrapper：提取FusionCharts PHP Wrapper并将fusioncharts.php文件保存在上一步中创建的用于保存脚本文件的同一文件夹中。

      <?php
	// including FusionCharts PHP wrapper
	require 'fusioncharts/fusioncharts.php';
?>
    

MongoDB 的 PHP 库（详细信息）：包含在 PHP 中使用 MongoDB 所需的autoload.php文件。

      <?php
	require 'vendor\autoload.php';
?>
    

建立并验证数据库连接

一旦我们添加了依赖项，我们就可以与数据库建立连接来获取图表的数据。

      <?php
$dbconn = new MongoDB\Client;

// validating DB connection
if(!$dbconn) {
	exit("There was an error establishing database connection");
}
?>
    

获取数据并呈现图表

现在我们已经建立了与数据库的连接，我们将获取图表的数据。

快速浏览一下myProject数据库中我们将用来呈现图表的chartData集合。

下面是从数据库获取数据的 PHP 代码：

      // retrieving data from the database
$db = $dbconn->myProject;
$myObj = $db->chartData->find();

//convert MongoCursor into an array
$data=iterator_to_array($myObj);

// sorting the data
asort($data);
    

成功执行上述代码后，$data将保存从数据库获取的数据。现在我们将为图表形成一个关联的 JSON 数组。

FusionCharts 可以理解 XML 和 JSON 数据格式。由于我们将使用 JSON，我们现在将数据（从$data变量中的数据库中提取）与 FusionCharts 图表配置一起附加，并将最终结果解析为关联 JSON 数组。

下面给出了附加从数据库获取的图表数据所需的 PHP 代码：

      if ($data) {

    $categoryArray=array();

    $dataseries1=array();

    $dataseries2=array();

    foreach ($data as $dataset) {
        array_push($categoryArray, array(
            "label" => $dataset["month"]
        ));

        array_push($dataseries1, array(
            "value" => $dataset["petrol"]
        ));

        array_push($dataseries2, array(
            "value" => $dataset["diesel"]
        ));
    }


    $arrData = array(
        "chart" => array(
                "caption"=> "Comparison of Petrol and Diesel price",
                "xAxisname"=>"Month",
                "yAxisname"=>"Price",
                "numberPrefix"=>"$",
                "paletteColors"=> "#876EA1, #72D7B2",
                "useplotgradientcolor"=> "0",
                "plotBorderAlpha"=> "0",
                "bgColor"=> "#FFFFFFF",
                "canvasBgColor"=> "#FFFFFF",
                "showValues"=> "0",
                "showCanvasBorder"=> "0",
                "showBorder"=> "0",
                "divLineAlpha"=> "40",
                "divLineColor"=> "#DCDCDC",
                "alternateHGridColor"=> "#DCDCDC",
                "alternateHGridAlpha"=> "15",
                "labelDisplay"=> "auto",
                "baseFont"=> "Assistant",
                "baseFontColor"=> "#000000",
                "outCnvBaseFont"=> "Assistant",
                "outCnvBaseFontColor"=> "#000000",
                "baseFontSize"=> "13",
                "outCnvBaseFontSize"=> "13",
                "labelFontColor"=> "#000000",
                "captionFontColor"=> "#153957",
                "captionFontBold"=> "1",
                "captionFontSize"=> "20",
                "subCaptionFontColor"=> "#153957",
                "subCaptionfontSize"=> "17",
                "subCaptionFontBold"=> "0",
                "captionPadding"=> "20",
                "valueFontBold"=> "0",
                "showAxisLines"=> "1",
                "yAxisLineColor"=> "#DCDCDC",
                "xAxisLineColor"=> "#DCDCDC",
                "xAxisLineAlpha"=> "15",
                "yAxisLineAlpha"=> "15",
                "toolTipPadding"=> "7",
                "toolTipBorderColor"=> "#DCDCDC",
                "toolTipBorderThickness"=> "0",
                "toolTipBorderRadius"=> "2",
                "showShadow"=> "0",
                "toolTipBgColor"=> "#153957",
                "toolTipBgAlpha"=> "90",
                "toolTipColor"=> "#FFFFFF",
                "legendBorderAlpha"=> "0",
                "legendShadow"=> "0",
                "legendItemFontSize"=> "14"
        )
    );

    $arrData["categories"]=array(array("category"=>$categoryArray));

    // creating dataset object
    $arrData["dataset"] = array(array("seriesName"=> "Petrol_price", "data"=>$dataseries1), array("seriesName"=> "Diesel_price",  "data"=>$dataseries2));

    $jsonEncodedData = json_encode($arrData);

}
    

网页上显示的每个图表都呈现在唯一的 HTML 容器中。我们将使用<div>元素来创建图表的 HTML 容器。

下面给出了创建图表容器的代码：

      <body>
	<div id="chart-container">Fusion Charts will render here</div>
</body>
    

现在我们已经有了 JSON 数据和图表容器，我们将创建 FusionCharts 实例并调用 render 方法来呈现图表。

图表实例包含呈现图表所需的详细信息，例如图表类型、图表 ID、图表尺寸、HTML 容器 ID 等，都将传递给此图表实例。

      $msChart = new FusionCharts("msline", "demochart", "600", "400", "chart-container", "json", $jsonEncodedData);

$msChart->render();

结论

如果你已经按照上述步骤操作，那么现在你应该有一个工作图表了。你的输出应该如下图所示：

如果您在呈现图表时遇到问题，可以从此 GitHub repo 下载源代码。

有问题吗？欢迎在Twitter上留言！感谢您的阅读！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文