在PHP中的Fusion图表中更改导出按钮的大小

时间:2012-12-28 06:18:17

标签: php charts highcharts fusioncharts

这是我的工作融合图表代码:

<?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/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" />

</HEAD>
<BODY>
<CENTER>
<h2>FusionCharts Examples</h2>
<h4>Plotting single series chart from data contained in Array.</h4>
<?php


    //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'  exportShowMenuItem='1'>";
    //Convert data to XML and append

    $strXML .= "<set label='L' value='10'/><set label='Y' value='40'/></chart>";//Comment this line of code to render the data from your database. This line of code is only for testing purpose


    //Un-comment the below line of code to render the chart in pure JavaScript forcefully.
    FC_SetRenderer('javascript');

    //Create the chart - Column 3D Chart with data contained in strXML
    echo renderChart("FusionCharts/Column3D.swf", "", $strXML, "myChart", 600, 300, false, true);

?>

</CENTER>
</BODY>
</HTML>

输入此代码: enter image description here

默认导出按钮图片 enter image description here

我想在我的图表中添加这种按钮: enter image description here

这里默认导出按钮太小。我想更改此按钮的大小。还想在此图中添加打印图标....我可以将导出按钮属性添加到我的代码中???我能做到吗????需要你的帮助......高级的感谢..

演示实时代码:click here

1 个答案:

答案 0 :(得分:2)

我找到了一种方法..这是代码:

<?php
include("FusionCharts/FusionCharts.php");
//include("FusionCharts/ExportHandlers/PHP/FCExporter.php");
?>
<html>
<head>
    <title>
    FusionCharts - Array Example using Single Series Column 3D Chart
    </title>    
<script type="text/Javascript" SRC="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" LANGUAGE="Javascript" SRC="FusionCharts/jquery.min.js"></script>
<style type= "text/css" >
.div1 {
height:360px;
width:650px;
background:#FFF0FF;
background-repeat:no-repeat;
border:2px solid #995699;
}
.div2 {
height:35px;
width:105px;
background:#FFF0FF;
background-repeat:no-repeat;

}
</style>
    <script type="text/Javascript" >
        function callPrint(){

            window.print();
        }
        function callExport(val){

           var chartObject = FusionCharts('myChart');
         if( chartObject.hasRendered() )
         {
             if(val==1){
         chartObject.exportChart({ exportAtClient:'1',exportFormat:'PNG'});

             }
             else{

            chartObject.exportChart({ exportAtClient:'1',exportFormat:'PDF'});


                 }
         }

        }


    </script>
</head>
<body>
<center>
<h2>FusionCharts Examples</h2>
<h4>Plotting single series chart from data contained in Array.</h4>
<div class="div1">

    <div class="div2" align="right">
      <p align="right"><a  href='#' onClick="callExport(1)"><img width='32' height='32' title='Click To Download as Image' src='FusionCharts/png_32.PNG' border='0'></a>
       <a  href='#' onClick="callExport(2)"><img width='32' height='32' title='Click To Download as PDF Doc' src='FusionCharts/pdf_32.png' border='0'></a>
       <a  href='#' onclick='callPrint();'><img width='30' height='30' title='Click To Print The Chart' src='FusionCharts/Printer.png' border='0'></a></p>
    </div>
<?php


    //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='FFFFCC,FFFFCC' exportEnabled='1'  exportAtClient='0' exportAction='download'  exportShowMenuItem='0' exportFormats='JPG=Download as JPEG|PDF=Download as SVG'>";
    //Convert data to XML and append

    $strXML .= "<set label='L' value='10'/></chart>";//Comment this line of code to render the data from your database. This line of code is only for testing purpose


    //Un-comment the below line of code to render the chart in pure JavaScript forcefully.
    FC_SetRenderer('javascript');

    //Create the chart - Column 3D Chart with data contained in strXML
    echo renderChart("FusionCharts/Column3D.swf", "", $strXML, "myChart", 600, 300, false, true);

?>
</div>
</center>
</body>
</html>

输出此代码: enter image description here

在这里你可以看到print,png&amp; pdf图标放在顶部。当我点击那些名为callExport()函数的图标时,调用&amp;产生相关的输出。这就是我想要的......这段代码会对其他人有所帮助......试着用它......谢谢这么多......