我正在通过在MYSQL数据库中获取数据生成图表。我使用的JavaScript库是Fusion Charts Suite XT。我尝试了以下代码，该代码仅在页面上的一个查询中呈现一个图表。我在同一个HTML页面上渲染另一个图表时遇到问题。
<html>
<head>
<script type="text/javascript" src="../fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="../fusioncharts/js/themes/fusioncharts.theme.zune.js"></script>
<?php
include('assets/global/plugins/fusioncharts/fusioncharts.php');
include('resource/dashboard/rank_chart.php'); ?>
</head>
<body>
<div id="chart-1"></div>
</body>
</html>
这是页面中fusioncarts.php包含的代码。
<?php
class FusionCharts {
private $constructorOptions = array();
private $constructorTemplate = '
<script type="text/javascript">
FusionCharts.ready(function () {
new FusionCharts(__constructorOptions__);
});
</script>';
private $renderTemplate = '
<script type="text/javascript">
FusionCharts.ready(function () {
FusionCharts("__chartId__").render();
});
</script>
';
// constructor
function __construct($type, $id, $width = 400, $height = 300, $renderAt, $dataFormat, $dataSource) {
isset($type) ? $this->constructorOptions['type'] = $type : '';
isset($id) ? $this->constructorOptions['id'] = $id : 'php-fc-'.time();
isset($width) ? $this->constructorOptions['width'] = $width : '';
isset($height) ? $this->constructorOptions['height'] = $height : '';
isset($renderAt) ? $this->constructorOptions['renderAt'] = $renderAt : '';
isset($dataFormat) ? $this->constructorOptions['dataFormat'] = $dataFormat : '';
isset($dataSource) ? $this->constructorOptions['dataSource'] = $dataSource : '';
$tempArray = array();
foreach($this->constructorOptions as $key => $value) {
if ($key === 'dataSource') {
$tempArray['dataSource'] = '__dataSource__';
} else {
$tempArray[$key] = $value;
}
}
$jsonEncodedOptions = json_encode($tempArray);
if ($dataFormat === 'json') {
$jsonEncodedOptions = preg_replace('/\"__dataSource__\"/', $this->constructorOptions['dataSource'], $jsonEncodedOptions);
} elseif ($dataFormat === 'xml') {
$jsonEncodedOptions = preg_replace('/\"__dataSource__\"/', '\'__dataSource__\'', $jsonEncodedOptions);
$jsonEncodedOptions = preg_replace('/__dataSource__/', $this->constructorOptions['dataSource'], $jsonEncodedOptions);
} elseif ($dataFormat === 'xmlurl') {
$jsonEncodedOptions = preg_replace('/__dataSource__/', $this->constructorOptions['dataSource'], $jsonEncodedOptions);
} elseif ($dataFormat === 'jsonurl') {
$jsonEncodedOptions = preg_replace('/__dataSource__/', $this->constructorOptions['dataSource'], $jsonEncodedOptions);
}
$newChartHTML = preg_replace('/__constructorOptions__/', $jsonEncodedOptions, $this->constructorTemplate);
echo $newChartHTML;
}
// render the chart created
// It prints a script and calls the FusionCharts javascript render method of created chart
function render() {
$renderHTML = preg_replace('/__chartId__/', $this->constructorOptions['id'], $this->renderTemplate);
echo $renderHTML;
}
}
?>
在rank_chart.php文件中。
<?php
require_once('database.php');
// Form the SQL query that returns.
$strQuery = "SELECT `rank_code`, COUNT(*) AS rank_cnt FROM `personel` WHERE rank_code!='' GROUP BY rank_code ORDER BY rank_code='2/LT',rank_code='LT',rank_code='CAPT',rank_code='MAJOR',rank_code='LT COL',rank_code='COL',rank_code='BRIG',rank_code='MAJ GEN',rank_code='LT GEN'";
// Execute the query, or else return the error message.
$result = $conn->query($strQuery);
// If the query returns a valid response, prepare the JSON string
if ($result) {
// The `$arrData` array holds the chart attributes and data
$arrData = array(
"chart" => array(
"caption"=> "",
"xAxisname"=> "Officer Ranks",
"yAxisName"=> "Number of Personnel",
"plotFillAlpha"=> "80",
"paletteColors"=> "#0075c2,#0e948c",
"baseFontColor"=> "#333333",
"baseFont"=> "Helvetica Neue,Arial",
"captionFontSize"=> "14",
"subcaptionFontSize"=> "14",
"subcaptionFontBold"=> "0",
"showBorder"=> "0",
"bgColor"=> "#ffffff",
"showShadow"=> "0",
"canvasBgColor"=> "#ffffff",
"canvasBorderAlpha"=> "0",
"divlineAlpha"=> "100",
"divlineColor"=> "#999999",
"divlineThickness"=> "1",
"divLineIsDashed"=> "1",
"divLineDashLen"=> "1",
"divLineGapLen"=> "1",
"usePlotGradientColor"=> "0",
"showplotborder"=> "0",
"valueFontColor"=> "#ffffff",
"placeValuesInside"=> "1",
"showHoverEffect"=> "1",
"rotateValues"=> "1",
"showXAxisLine"=> "1",
"xAxisLineThickness"=> "1",
"xAxisLineColor"=> "#999999",
"showAlternateHGridColor"=> "0",
"legendBgAlpha"=> "1",
"legendBorderAlpha"=> "0",
"legendShadow"=> "0",
"legendItemFontSize"=> "10",
"legendItemFontColor"=> "#666666"
)
);
$arrData["data"] = array();
// Push the data into the array
while($row = mysqli_fetch_array($result)) {
array_push($arrData["data"], array(
"label" => $row["rank_code"],
"value" => $row["rank_cnt"]
)
);
}
/*JSON Encode the data to retrieve the string containing the JSON representation of the data in the array. */
$jsonEncodedData = json_encode($arrData);
/*Create an object for the column chart using the FusionCharts PHP class constructor. Syntax for the constructor is ` FusionCharts("type of chart", "unique chart id", width of the chart, height of the chart, "div id to render the chart", "data format", "data source")`. Because we are using JSON data to render the chart, the data format will be `json`. The variable `$jsonEncodeData` holds all the JSON data for the chart, and will be passed as the value for the data source parameter of the constructor.*/
$columnChart = new FusionCharts("column2d", "Rank Chart" , "100%", "100%", "chart-1", "json", $jsonEncodedData);
// Render the chart
$columnChart->render();
// Close the database connection
}
?>