将Javascript融合图表导出代码应用于PHP，MySql代码 [英] Apply Javascript fusion chart exporting code to PHP,MySql code
本文介绍了将Javascript融合图表导出代码应用于PHP，MySql代码的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用PHP和PHP的融合图表MySQL编码。我可以用数据库数据绘制图表。现在我想添加一个下载按钮，将图表导出为PDF，png& JPG格式......我找到了融合图表Javascript示例&我试图将该代码应用于我的PHP代码&得到导出图表..但我做不到....只显示图表...她使用的帮助JS代码......：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional。 DTD>
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title>我使用FusionCharts的第一张图表 - 导出纯JavaScript图表< / title>
< script type =text / javascriptLANGUAGE =JavascriptSRC =../../../ Charts / FusionCharts.js>< / script>
< script type =text / javascriptLANGUAGE =JavascriptSRC =../../ assets / ui / js / jquery.min.js>< / script>
< script type =text / javascriptLANGUAGE =JavascriptSRC =../../ assets / ui / js / lib.js>< / script>
< link href =../../ assets / ui / css / style.css =stylesheettype =text / css/>
<！ - [if IE 6]>
< script type =text / javascriptsrc =../ assets / ui / js / DD_belatedPNG_0.0.8a-min.js>< / script>
< script>
/ *选择元素名称，css选择器，后台等* /
DD_belatedPNG.fix（'img'）;
/ *字符串参数可以是任何CSS选择器* /
< / script>
<！[endif] - >
< style type =text / css>
h2.headline {
font：normal 110％/ 137.5％Trebuchet MS，Arial，Helvetica，sans-serif;
填充：0;
保证金：25px 0 25px 0;
颜色：＃7d7c8b;
text-align：center;
}
p.small {
font：normal 68.75％/ 150％Verdana，Geneva，sans-serif;
颜色：＃919191;
填充：0;
保证金：0自动;
宽度：664px;
text-align：center;
}
< / style>
< / head>
< body>
< div id =wrapper>
< div id =header>
< div class =logo>< a class =imagelinkhref =http：//www.fusioncharts.com/target =_ blank> ;< img src =../../ assets / ui / images / fusionchartsv3.2-logo.pngwidth =131height =75alt =FusionCharts XT logo/>< /一个>< / DIV>
< h1 class =brand-name> FusionCharts XT< / h1>
< h1 class =logo-text>导出纯JavaScript图表< / h1>
< / div>
< div class =content-area>
< div id =content-area-inner-main>
< p class =textalign =center>导出纯JavaScript图表。点击图表右上角的下载按钮。 < / p为H.
< p>& nbsp;< / p>
< div class =gen-chart-render>
< center>
< div id =chartContainer> FusionCharts将在此处加载< / div>
< script type =text / javascript><！ -
FusionCharts.setCurrentRenderer（'JavaScript'）;
var myChart = new FusionCharts（../../ Charts / Column2D.swf，myChartId，400，300，0，1）;
myChart.setXMLData（'< chart caption =Weekly Sales SummaryxAxisName =WeekyAxisName =SalesnumberPrefix =$\ n \
exportEnabled =1> \ n \ $
< set label =第1周值=14400/> \ n \
< set label =第2周值=19600/ > \ n \
< set label =第3周值=24000/> \ n \
< set label =第4周值=15700 /> \ n \
< / chart>'）;
myChart.render（chartContainer）;
// - >
< / script>
< / center>
< / div>
< div class =clear>< / div>
< p>& nbsp;< / p>
< p class =small> < / p为H.
< div class =underline-dull>< / div>
< div>
< p class =highlightBlock>上面的示例展示了导出纯JavaScript图表。点击< a href =../../../ Contents / index.html？exports-image / ECPureJS.htmltarget =_ blank> here< / a>了解有关此示例的代码如何工作的更多信息。< / p>
< / div>
< / div>
< / div>
< div id =footer>
< ul>
< li>< a href =../ index.html>< span>& laquo;返回示例列表< / span>< / a>< / li>
< li class =pipe> |< / li>
< li>< a href =../../ NoChart.html>< span>无法看到上面的图表？< / span>< / a>< /李>
< / ul>
< / div>
< / div>
< / body>
< / html>
要查看此代码的输出，请单击此链接： out put
<这是我的php，mysql代码：
<？php
include（FusionCharts /FusionCharts.php）;
？>
< HTML>
< HEAD>
< TITLE>
FusionCharts - 使用单系列列3D图表的数组示例
< / TITLE>
< SCRIPT LANGUAGE =JavascriptSRC =FusionCharts / FusionCharts.js>< / SCRIPT>
<！ - < script type =text / javascriptlanguage =JavaScriptsrc =FusionCharts / FusionChartsExportComponent.js>< / script> - >
< script type =text / javascriptLANGUAGE =JavascriptSRC =FusionCharts / jquery.min.js>< / script>
< script type =text / javascriptLANGUAGE =JavascriptSRC =FusionCharts / lib.js>< / script>
< link href =FusionCharts / style.css =stylesheettype =text / css/>
< style type =text / css>
<！ -
body {
font-family：Arial，Helvetica，sans-serif;
字体大小：12px;
}
- >
< / style>
< / HEAD>
< BODY>
< CENTER>
< h2> FusionCharts示例< / h2>
< h4>根据Array中包含的数据绘制单个系列图表。< / h4>
<？php
include（db_connect.php）;
$ arrData [0] [2] =A;
//将+ char发送到xml文件////
$ arrData [1] [3] = str_replace（'+'，'％2B'，'A +'）;
$ arrData [2] [4] =A-;
$ arrData [3] [5] =B;
$ arrData [4] [6] = str_replace（'+'，'％2B'，'B +'）;
$ arrData [5] [7] =B-;
$ arrData [6] [8] =C;
$ arrData [7] [9] = str_replace（'+'，'％2B'，'C +'）;
$ arrData [8] [10] =C-;
$ arrData [9] [11] =D;
$ arrData [10] [12] = str_replace（'+'，'％2B'，'D +'）;
$ arrData [11] [13] =E;
$ arrData [12] [14] =AB;
$ arrData [13] [15] =NE;
$ arrData [14] [16] =MC;
//存储数据库
//获取所有记录
$ sql =SELECT grade，COUNT（*）'No_Of_grades'FROM std_results WHERE course_code ='CSC1113'GROUP BY等级按ASC等级划分;
$ result = mysql_query（$ sql）或die（mysql_error（））;
while（$ ors = mysql_fetch_array（$ result））{
$ grd = $ ors ['grade'];
开关（$ grd）
{
案例A：
$ arrData [0] [17] = $ ors ['No_Of_grades'];
休息;
caseA +：
$ arrData [1] [18] = $ ors ['No_Of_grades'];
休息;
caseA-：
$ arrData [2] [19] = $ ors ['No_Of_grades'];
休息;
caseB：
$ arrData [3] [20] = $ ors ['No_Of_grades'];
休息;
caseB +：
$ arrData [4] [21] = $ ors ['No_Of_grades'];
休息;
caseB-：
$ arrData [5] [22] = $ ors ['No_Of_grades'];
休息;
caseC：
$ arrData [6] [23] = $ ors ['No_Of_grades'];
休息;
caseC +：
$ arrData [7] [24] = $ ors ['No_Of_grades'];
休息;
caseC-：
$ arrData [8] [25] = $ ors ['No_Of_grades'];
休息;
caseD：
$ arrData [9] [26] = $ ors ['No_Of_grades'];
休息;
caseD +：
$ arrData [10] [27] = $ ors ['No_Of_grades'];
休息;
caseE：
$ arrData [11] [28] = $ ors ['No_Of_grades'];
休息;
caseAB：
$ arrData [12] [29] = $ ors ['No_Of_grades'];
休息;
caseNE：
$ arrData [13] [30] = $ ors ['No_Of_grades'];
休息;
默认值：
$ arrData [14] [31] = $ ors ['No_Of_grades'];
}
}
//为其他等级设置零值..
for（$ i = 0; $ i< 15; $ i ++ ）{
if（！isset（$ arrData [$ i] [32]））{
$ arrData [$ i] [33] = 0;
}
}
//现在，我们需要将这些数据转换为XML。我们使用字符串连接进行转换。
//初始化<图表> element
$ strXML =< chart caption ='CSC113A的考试结果'numberPrefix =''formatNumberScale ='10'xAxisName ='Grades'yAxisName ='No Of Students'bgColor ='995699，FEEFFF'exportEnabled = '1'exportAtClient ='0'exportAction ='download'exportTargetWindow ='_ blank'>;
//将数据转换为XML并附加
foreach（$ arrData as $ arSubData）
$ strXML。=< set label ='。 $ arSubData [1]。 'value ='。 $ arSubData [2]。 '/>;
//关闭< chart> element
$ strXML。=< / chart>;
//创建图表 - 包含在strXML中的数据的列3D图表
echo renderChart（FusionCharts / Column3D.swf，，$ strXML，Results，600,300 ，假，假）;
？>
< BR>< BR>
< / CENTER>
< / BODY>
< / HTML>
输出我的代码是：
如何将导出（下载）部分添加到我的php，mysql代码中并获取后续内容放：
如何应用以上Javascript融合图表导出代码到我的PHP，MySql代码????需要你很好的帮助朋友......非常多......
解决方案
-
更新到最新版本的FusionCharts XT（js，SWF和PHP文件）。这是重要的一步。请在完成后清除浏览器缓存。
-
在<$之前添加
FC_SetRenderer（javascript）;c $ c> echo renderChart（... -
您的XML数据应包含
exportEnabled =' 1'
i'm using fusion charts with my PHP & MySQL codings . I can draw charts with Database data..Now I want add a download button to export charts as PDF,png & JPG formats...i have found fusion charts Javascript example & I tried to apply that code to my php code & get exporting charts..But I couldn't do it....Only chart displayed...Her the help JS code which I used...:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First chart using FusionCharts - Exporting pure JavaScript chart</title>
<script type="text/javascript" LANGUAGE="Javascript" SRC="../../../Charts/FusionCharts.js"></script>
<script type="text/javascript" LANGUAGE="Javascript" SRC="../../assets/ui/js/jquery.min.js"></script>
<script type="text/javascript" LANGUAGE="Javascript" SRC="../../assets/ui/js/lib.js"></script>
<link href="../../assets/ui/css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="../assets/ui/js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
/* select the element name, css selector, background etc */
DD_belatedPNG.fix('img');
/* string argument can be any CSS selector */
</script>
<![endif]-->
<style type="text/css">
h2.headline {
font: normal 110%/137.5% "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 0;
margin: 25px 0 25px 0;
color: #7d7c8b;
text-align: center;
}
p.small {
font: normal 68.75%/150% Verdana, Geneva, sans-serif;
color: #919191;
padding: 0;
margin: 0 auto;
width: 664px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="logo"><a class="imagelink" href="http://www.fusioncharts.com/" target="_blank"><img src="../../assets/ui/images/fusionchartsv3.2-logo.png" width="131" height="75" alt="FusionCharts XT logo" /></a></div>
<h1 class="brand-name">FusionCharts XT</h1>
<h1 class="logo-text">Exporting pure JavaScript chart</h1>
</div>
<div class="content-area">
<div id="content-area-inner-main">
<p class="text" align="center" >Exporting pure JavaScript chart.Click the download button on the top right corner of the chart. </p>
<p> </p>
<div class="gen-chart-render">
<center>
<div id="chartContainer">FusionCharts will load here</div>
<script type="text/javascript"><!--
FusionCharts.setCurrentRenderer('JavaScript');
var myChart = new FusionCharts("../../Charts/Column2D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData('<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$" \n\
exportEnabled="1" >\n\
<set label="Week 1" value="14400" /> \n\
<set label="Week 2" value="19600" /> \n\
<set label="Week 3" value="24000" /> \n\
<set label="Week 4" value="15700" /> \n\
</chart>');
myChart.render("chartContainer");
// -->
</script>
</center>
</div>
<div class="clear"></div>
<p> </p>
<p class="small"> </p>
<div class="underline-dull"></div>
<div>
<p class="highlightBlock">The above sample showcases exporting pure JavaScript charts. Click <a href="../../../Contents/index.html?exporting-image/ECPureJS.html" target="_blank">here</a> to know more on how the code of this example works.</p>
</div>
</div>
</div>
<div id="footer">
<ul>
<li><a href="../index.html"><span>« Back to list of examples</span></a></li>
<li class="pipe">|</li>
<li><a href="../../NoChart.html"><span>Unable to see the chart above?</span></a></li>
</ul>
</div>
</div>
</body>
</html>
To see the out put of this code click this link :out put
here is my php,mysql code :
<?php
include("FusionCharts/FusionCharts.php");
?>
<HTML>
<HEAD>
<TITLE>
FusionCharts - Array Example using Single Series Column 3D Chart
</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="FusionCharts/FusionCharts.js"></SCRIPT>
<!--<script type="text/javascript" language="JavaScript" src="FusionCharts/FusionChartsExportComponent.js"></script>-->
<script type="text/javascript" LANGUAGE="Javascript" SRC="FusionCharts/jquery.min.js"></script>
<script type="text/javascript" LANGUAGE="Javascript" SRC="FusionCharts/lib.js"></script>
<link href="FusionCharts/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
-->
</style>
</HEAD>
<BODY>
<CENTER>
<h2>FusionCharts Examples</h2>
<h4>Plotting single series chart from data contained in Array.</h4>
<?php
include("db_connect.php");
$arrData[0][2] = "A";
//send + char to xml file////
$arrData[1][3] = str_replace('+', '%2B', 'A+');
$arrData[2][4] = "A-";
$arrData[3][5] = "B";
$arrData[4][6] = str_replace('+', '%2B', 'B+');
$arrData[5][7] = "B-";
$arrData[6][8] = "C";
$arrData[7][9] = str_replace('+', '%2B', 'C+');
$arrData[8][10] = "C-";
$arrData[9][11] = "D";
$arrData[10][12] = str_replace('+', '%2B', 'D+');
$arrData[11][13] = "E";
$arrData[12][14] = "AB";
$arrData[13][15] = "NE";
$arrData[14][16] = "MC";
//Store db data
// Fetch all records
$sql = "SELECT grade, COUNT(*) 'No_Of_grades' FROM std_results WHERE course_code ='CSC1113' GROUP BY grade ORDER BY grade ASC";
$result = mysql_query($sql) or die(mysql_error());
while($ors = mysql_fetch_array($result)) {
$grd=$ors['grade'];
switch ($grd)
{
case "A":
$arrData[0][17]=$ors['No_Of_grades'];
break;
case "A+":
$arrData[1][18]=$ors['No_Of_grades'];
break;
case "A-":
$arrData[2][19]=$ors['No_Of_grades'];
break;
case "B":
$arrData[3][20]=$ors['No_Of_grades'];
break;
case "B+":
$arrData[4][21]=$ors['No_Of_grades'];
break;
case "B-":
$arrData[5][22]=$ors['No_Of_grades'];
break;
case "C":
$arrData[6][23]=$ors['No_Of_grades'];
break;
case "C+":
$arrData[7][24]=$ors['No_Of_grades'];
break;
case "C-":
$arrData[8][25]=$ors['No_Of_grades'];
break;
case "D":
$arrData[9][26]=$ors['No_Of_grades'];
break;
case "D+":
$arrData[10][27]=$ors['No_Of_grades'];
break;
case "E":
$arrData[11][28]=$ors['No_Of_grades'];
break;
case "AB":
$arrData[12][29]=$ors['No_Of_grades'];
break;
case "NE":
$arrData[13][30]=$ors['No_Of_grades'];
break;
default:
$arrData[14][31]=$ors['No_Of_grades'];
}
}
//set vlaue zero for othe grades..
for($i=0;$i<15;$i++){
if(!isset($arrData[$i][32])){
$arrData[$i][33]=0;
}
}
//Now, we need to convert this data into XML. We convert using string concatenation.
//Initialize <chart> element
$strXML = "<chart caption='Exam result for CSC113A ' numberPrefix='' formatNumberScale='10' xAxisName='Grades' yAxisName='No Of Students' bgColor='995699,FEEFFF' exportEnabled='1' exportAtClient='0' exportAction='download' exportTargetWindow='_blank'>";
//Convert data to XML and append
foreach ($arrData as $arSubData)
$strXML .= "<set label='" . $arSubData[1] . "' value='" . $arSubData[2] . "' />";
//Close <chart> element
$strXML .= "</chart>";
//Create the chart - Column 3D Chart with data contained in strXML
echo renderChart("FusionCharts/Column3D.swf", "", $strXML, "Results", 600, 300, false, false);
?>
<BR><BR>
</CENTER>
</BODY>
</HTML>
out put of my code is :
How can I add exporting (downloading) part to my php,mysql code and get following out put :
How can I Apply above Javascript fusion chart exporting code to my PHP,MySql code????Need ur great help friends..thanxx so much....
解决方案
Update to the latest version of FusionCharts XT( js, SWF and PHP files) . This is an important step. Please clear browser cache once done.
Add
FC_SetRenderer( "javascript" );before yourecho renderChart("...Your XML data should contain
exportEnabled='1'
这篇关于将Javascript融合图表导出代码应用于PHP，MySql代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
