使用 PHP 和 Cassandra 创建交互式图表

2019-01-10 08:00:00 · 飞浪

按照本分步指南，使用 FusionCharts 从 Apache Cassandra 数据库获取图表数据，创建交互式图表。立即开始！

介绍

Apache Cassandra 是一种分布式数据库，具有独特的优势，可以增强开发人员的工具包。Cassandra 是一种免费的开源分布式数据库管理系统，旨在管理大量结构化数据。

在本文中，我们将讨论使用 FusionCharts（一个 JavaScript 图表库）及其 PHP 包装器从 Cassandra 数据库获取图表数据来创建图表的逐步过程。

要求

为了在 PHP 中呈现图表，我们需要三个组件，如下所示：

包括 FusionCharts Core JS 文件

要在 HTML 文件中包含 FusionCharts 核心包（fusioncharts.js和fusioncharts.charts.js），请参考以下代码：

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

包括 FusionCharts PHP 包装器

请参阅以下代码，将 FusionCharts PHP 包装器 ( fusioncharts.php ) 纳入您的 PHP 代码中。

      <?php
   // including FusionCharts PHP wrapper
   include("path/to/fusioncharts.php");
?>
    

完成此步骤后，您已设置好环境。您应该能够在系统上使用 Cassandra 数据库。

建立并验证与数据库的连接

使用以下 PHP 代码建立与 Cassandra 数据库的连接以获取图表数据：

      $cluster = Cassandra::cluster()->build();

$keyspace = 'marathons';

// creating session with cassandra scope by keyspace
$session = $cluster->connect($keyspace);

// verifying connection with database
if(!$session) {
	echo "Error - Unable to connect to database";
}
    

在上面的代码中：

Cassandra::cluster()->build();默认情况下与本地主机集群建立连接。您还可以指定远程 URL 来与远程集群建立连接。withContactPoints ()和withPort()方法用于指定给定 Cassandra 集群中节点的 IP 地址或主机名以及端口号。有关更多详细信息，请参阅此链接。
$keyspace保存从中获取图表数据的键空间（数据库）的名称。
$session变量用于与数据库建立连接。如果发生任何连接错误，上述代码将抛出错误消息。您也可以为此步骤创建一个单独的.php文件并将其包含在内，而不必每次都编写它。

注意：要在 PHP 中使用 Cassandra，请确保已通过在php.ini配置文件中包含extension=php_cassandra.dll来启用必要的扩展。

获取数据并形成 JSON 数组

现在我们已经成功与数据库建立连接，我们将编写查询语句来获取图表的数据。

参考以下代码来获取数据：

      $statement = new Cassandra\SimpleStatement( 'SELECT id, name, entry_cost, permile_cost, finisher_count FROM topten' );

// query execution - fully asynchronous
$exec = $session->executeAsync($statement);  

// getting query result in a variable
$result = $exec->get();
    

这里，一旦执行上述代码，$result变量就会保存数据。

FusionCharts 可以理解 XML 和 JSON 数据格式。由于我们将使用 JSON，我们现在将附加数据（位于$result变量中）以及 FusionCharts 图表配置，并将最终结果解析为关联 JSON 数组。

参照以下代码来附加数据：

      if($result) {

	// creating an associative array to store the chart attributes
	$arrData = array(
		"chart" => array(
			"caption"=> "World's Top Marathons",
			"captionFontBold"=> "1",
			"captionFontSize"=> "24",
			"captionFont"=> "Assistant",
			"subcaption"=> "By Entry Cost (In Pounds)",
			"subCaptionFontBold"=> "0",
			"subCaptionFontSize"=> "19",
			"subCaptionFont"=> "Assistant",
			"captionPadding"=> "20",
			"numberPrefix"=> "£",
			"canvasBgColor"=> "#729BDF",
			"bgColor"=> "#729BDF",
			"canvasBgAlpha"=> "0",
			"bgAlpha"=> "100",
			"showBorder"=> "0",
			"showCanvasBorder"=> "0",
			"showPlotBorder"=> "0",
			"paletteColors"=> "#FED34B",
			"showValues"=> "0",
			"decimals"=> "2",
			"usePlotGradientColor"=> "0",
			"baseFontColor"=> "#FFFFFF",
			"baseFont"=> "Assistant",
			"baseFontSize"=> "16",
			"showAlternateVGridColor"=> "0",
			"divLineColor"=> "#DBEAF8",
			"divLineThickness"=> "0.9",
			"divLineAlpha"=> "60",
			"toolTipPadding"=> "7",
			"toolTipBgColor"=> "#000000",
			"toolTipBorderAlpha"=> "0",
			"toolTipBorderRadius"=> "3"
	));

	$arrData["data"] = array();
		// iterating over each data and pushing it into $arrData array
		foreach ($result as $row) {
			array_push($arrData["data"], array(
				"label" => $row["name"],
				"value" => $row["entry_cost"]->value(),
				"toolText" => "<b>" . $row["name"] . "</b><hr>Entry Cost: £" . number_format((float)$row["entry_cost"]->value(), 2, '.', '') . "<br> Per-mile Cost: £" .number_format((float)$row["permile_cost"]->value(), 2, '.', '') . "<br>Finishers: " . $row["finisher_count"]->value()
			));
		}

	$jsonEncodedData = json_encode($arrData);
    

在所示的代码中，if 语句确定$result的值是否有效，并创建关联的 JSON 数组来形成图表数据。

$arrData变量下的图表对象包含标题、子标题、div 线、值、工具提示、颜色等图表配置选项。

要了解有关自定义图表外观的更多信息，可以参考此开发人员文档页面。

创建图表容器

要为图表创建 HTML 容器，请使用<div>，如下所示：

      <body>
<div id="chart-container"></div>
</body>
    

这会告诉浏览器<div ...>和</div>内的所有元素都属于同一个容器。

创建图表实例并呈现图表

现在，我们已经有了图表数据和容器，让我们实例化 FusionCharts PHP 包装器类，并指定图表类型、图表 ID、图表尺寸、图表容器 ID 等详细信息以呈现图表：

      // creating FusionCharts instance
$toptenChart = new FusionCharts("bar2d", "topChart" , '600', '450', "chart-container", "json", $jsonEncodedData);
    

接下来调用render()方法渲染图表。render ()是一个 PHP 类函数，它调用 JS render()方法渲染图表。调用render()如下：

      // FusionCharts render method
$toptenChart->render();
    

结论

我们已完成使用 FusionCharts 呈现交互式图表的所有步骤。输出如下所示：

很完美，不是吗？如果您在呈现图表时遇到问题，请参阅GitHub 存储库中的源代码。

感谢阅读！欢迎发表评论或在Twitter上打招呼！

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

_查看原文

技术指南

阅读全文

使用 PHP 和 Cassandra 创建交互式图表

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<html> <head>  <script src="path/to/fusioncharts.js"></script> <script src="path/to/fusioncharts.charts.js"></script> </head> </html>

$cluster = Cassandra::cluster()->build(); $keyspace = 'marathons'; // creating session with cassandra scope by keyspace $session = $cluster->connect($keyspace); // verifying connection with database if(!$session) { echo "Error - Unable to connect to database"; }

$statement = new Cassandra\SimpleStatement( 'SELECT id, name, entry_cost, permile_cost, finisher_count FROM topten' ); // query execution - fully asynchronous $exec = $session->executeAsync($statement); // getting query result in a variable $result = $exec->get();

if($result) { // creating an associative array to store the chart attributes $arrData = array( "chart" => array( "caption"=> "World's Top Marathons", "captionFontBold"=> "1", "captionFontSize"=> "24", "captionFont"=> "Assistant", "subcaption"=> "By Entry Cost (In Pounds)", "subCaptionFontBold"=> "0", "subCaptionFontSize"=> "19", "subCaptionFont"=> "Assistant", "captionPadding"=> "20", "numberPrefix"=> "£", "canvasBgColor"=> "#729BDF", "bgColor"=> "#729BDF", "canvasBgAlpha"=> "0", "bgAlpha"=> "100", "showBorder"=> "0", "showCanvasBorder"=> "0", "showPlotBorder"=> "0", "paletteColors"=> "#FED34B", "showValues"=> "0", "decimals"=> "2", "usePlotGradientColor"=> "0", "baseFontColor"=> "#FFFFFF", "baseFont"=> "Assistant", "baseFontSize"=> "16", "showAlternateVGridColor"=> "0", "divLineColor"=> "#DBEAF8", "divLineThickness"=> "0.9", "divLineAlpha"=> "60", "toolTipPadding"=> "7", "toolTipBgColor"=> "#000000", "toolTipBorderAlpha"=> "0", "toolTipBorderRadius"=> "3" )); $arrData["data"] = array(); // iterating over each data and pushing it into $arrData array foreach ($result as $row) { array_push($arrData["data"], array( "label" => $row["name"], "value" => $row["entry_cost"]->value(), "toolText" => "<b>" . $row["name"] . "</b><hr>Entry Cost: £" . number_format((float)$row["entry_cost"]->value(), 2, '.', '') . "<br> Per-mile Cost: £" .number_format((float)$row["permile_cost"]->value(), 2, '.', '') . "<br>Finishers: " . $row["finisher_count"]->value() )); } $jsonEncodedData = json_encode($arrData);