我创建了两个 php 页面。第一个是主 fusionchart,它绘制了各个工厂的总产量的饼图。我还添加了一个类似的功能,使图表可点击。单击时,它会显示构成图表部分的细分图表分析。但向下钻取图表拒绝绘制任何图表,而是在屏幕上给出一个空图表字符串。我已经放置了代码供您分析。
<?php
//We've included ../Includes/FusionCharts.php and ../Includes/DBConn.php, which contains
//functions to help us easily embed the charts and connect to a database.
include("/Includes/FusionCharts.php");
include("/Includes/DBConn.php");
//a file having a list of colors to be applied to each column (using getFCColor() function)
include("/Includes/FC_Colors.php");
?>
<HTML>
<HEAD>
<TITLE> FusionCharts Free - Database and Drill-Down Example </TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"> </SCRIPT>
</HEAD>
<BODY>
<?php
//This page is invoked from Default.php. When the user clicks on a pie
//slice in Default.php, the factory Id is passed to this page. We need
//to get that factory id, get information from database and then show
//a detailed chart.
//First, get the factory Id
//Request the factory Id from Querystring
$factoryId = $_GET['factoryId'];
//Connect to database
$link = connectToDB();
//$strXML will be used to store the entire XML document generated
//Generate the chart element string
$strXML = "<chart caption='Factory Output' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' showNames='1' formatNumberScale='0' numberSuffix=' Units' decimalPrecision='0'>";
//Now, we get the data for that factory
$strQuery = "select * from factory_output where factoryId=" . $factoryId;
$result = mysql_query($strQuery) or die(mysql_error());
//Iterate through each factory
if ($result) {
while($ors = mysql_fetch_array($result)) {
//Here, we convert date into a more readable form for set name.
$strXML .="<set name='" . datePart("d",$ors['datePro']) . "/" . datePart("m",$ors['datePro']) . "' value='" . $ors['quantity'] . "' color='" . getFCColor() . "'/>";
}
}
mysql_close($link);
//Close <chart> element
$strXML .="</chart>";
//Create the chart - Column 2D Chart with data from $strXML
echo renderChart("charts/FCF_Column3D.swf", "", $strXML, "FactoryDetailed", 600, 300);
?>
</CENTER>
</BODY>
</HTML>
您只需单击父图表上的数据绘图项即可深入查看子图表。后代图表可以使用向上钻取选项替换父图表,也可以在新窗口或框架中打开。
"data": [{
"label": "Apple",
"value": "810000",
"link": "newchart-xml-apple"
}, {
"label": "Cranberry",
"value": "620000",
"link": "newchart-xml-cranberry"
}, {
"label": "Grapes",
"value": "350000",
"link": "newchart-xml-grapes"
}]
查看此处演示小提琴 - https://jsfiddle.net/e01wx8ds/
要了解更多此功能,请参阅 - https://www.fusioncharts.com/dev/getting-started/php/add-drill-down-using-php
https://www.fusioncharts.com/dev/chart-guide/chart-configurations/drill-down