CI集成fusionCharts

xingch

fusionCharts 一个FLASH图表工具, 项目需要,集成到CI中,分享下,方法如下:
1、网上下载fusionCharts.
2、我的JS文件是放在application下(application/js),
     js下建立一个fusionCharts文件夹,放入Charts文件夹河fusionCharts.js文件, 目录结构如下
    js----
         ----Charts
         -------------Column2D.swf
                    ……
      --- fusionCharts.js
3、在helper下建一个文件fusioncharts_helper.php,把工具原来的FusionCharts.php的函数类化,代码如下:

PHP复制代码

 
<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
       
        /**
                 * fusioncharts
                 * Create Time:2010/08/10
                 * Authoraker.W
                 * QQ:451021477
                 */
       
        class DK_Fusioncharts
        {
                /**
                 * 构造函数
                 */
                function __construct()
                {
                        ;
                }
 
                // encodeDataURL function encodes the dataURL before it's served to FusionCharts.
                // If you've parameters in your dataURL, you necessarily need to encode it.
                // Param: $strDataURL - dataURL to be fed to chart
                // Param: $addNoCacheStr - Whether to add aditional string to URL to disable caching of data
                function encodeDataURL($strDataURL, $addNoCacheStr=false) {
                        //Add the no-cache string if required
                        if ($addNoCacheStr==true) {
                                // We add ?FCCurrTime=xxyyzz
                                // If the dataURL already contains a ?, we add &FCCurrTime=xxyyzz
                                // We replace : with _, as FusionCharts cannot handle : in URLs
                                if (strpos($strDataURL,"?")<>0)
                                $strDataURL .= "&FCCurrTime=" . Date("Y m s h_i_s A");
                                else
                                $strDataURL .= "?FCCurrTime=" . Date("Y m s h_i_s A");
                        }
                        // URL Encode it
                        return urlencode($strDataURL);
                }
       
       
                // datePart function converts MySQL database based on requested mask
                // Param: $mask - what part of the date to return "m' for month,"d" for day, and "y" for year
                // Param: $dateTimeStr - MySQL date/time format (yyyy-mm-dd HH:ii:ss)
                function datePart($mask, $dateTimeStr) {
                        @list($datePt, $timePt) = explode(" ", $dateTimeStr);
                        $arDatePt = explode("-", $datePt);
                        $dataStr = "";
                        // Ensure we have 3 parameters for the date
                        if (count($arDatePt) == 3) {
                                list($year, $month, $day) = $arDatePt;
                                // determine the request
                                switch ($mask) {
                                        case "m": return $month;
                                        case "d": return $day;
                                        case "y": return $year;
                                }
                                // default to mm/dd/yyyy
                                return (trim($month . "/" . $day . "/" . $year));
                        }
                        return $dataStr;
                }
       
       
                // renderChart renders the JavaScript + HTML code required to embed a chart.
                // This function assumes that you've already included the FusionCharts JavaScript class
                // in your page.
       
                // $chartSWF - SWF File Name (and Path) of the chart which you intend to plot
                // $strURL - If you intend to use dataURL method for this chart, pass the URL as this parameter. Else, set it to "" (in case of dataXML method)
                // $strXML - If you intend to use dataXML method for this chart, pass the XML data as this parameter. Else, set it to "" (in case of dataURL method)
                // $chartId - Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.
                // $chartWidth - Intended width for the chart (in pixels)
                // $chartHeight - Intended height for the chart (in pixels)
                // $debugMode - Whether to start the chart in debug mode
                // $registerWithJS - Whether to ask chart to register itself with JavaScript
                function renderChart($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight, $debugMode, $registerWithJS) {
                        //First we create a new DIV for each chart. We specify the name of DIV as "chartId"Div.
                        //DIV names are case-sensitive.
       
                        // The Steps in the script block below are:
                        //
                        //  1)In the DIV the text "Chart" is shown to users before the chart has started loading
                        //    (if there is a lag in relaying SWF from server). This text is also shown to users
                        //    who do not have Flash Player installed. You can configure it as per your needs.
                        //
                        //  2) The chart is rendered using FusionCharts Class. Each chart's instance (JavaScript) Id
                        //     is named as chart_"chartId".
                        //
                        //  3) Check whether we've to provide data using dataXML method or dataURL method
                        //     save the data for usage below
                        if ($strXML=="")
                        $tempData = "//Set the dataURL of the chart\n\t\tchart_$chartId.setDataURL(\"$strURL\")";
                        else
                        $tempData = "//Provide entire XML data using dataXML method\n\t\tchart_$chartId.setDataXML(\"$strXML\")";
       
                        // Set up necessary variables for the RENDERCAHRT
                        $chartIdDiv = $chartId . "Div";
                        $ndebugMode = $this->boolToNum($debugMode);
                        $nregisterWithJS = $this->boolToNum($registerWithJS);
       
// create a string for outputting by the caller
$render_chart = <<<RENDERCHART
 
        <!-- START Script Block for Chart $chartId -->
        <div id='$chartIdDiv' class='fusioncharts' align='center'>
                Chart.
        </div>
        <script type="text/javascript">
                //Instantiate the Chart
                var chart_$chartId = new FusionCharts("$chartSWF", "$chartId", "$chartWidth", "$chartHeight", "$ndebugMode", "$nregisterWithJS");
                $tempData
                //Finally, render the chart.
                chart_$chartId.render("$chartIdDiv");
        </script>      
        <!-- END Script Block for Chart $chartId -->
 
RENDERCHART;
                        return $render_chart;
                }//End renderChart
       
                //renderChartHTML function renders the HTML code for the JavaScript. This
                //method does NOT embed the chart using JavaScript class. Instead, it uses
                //direct HTML embedding. So, if you see the charts on IE 6 (or above), you'll
                //see the "Click to activate..." message on the chart.
                // $chartSWF - SWF File Name (and Path) of the chart which you intend to plot
                // $strURL - If you intend to use dataURL method for this chart, pass the URL as this parameter. Else, set it to "" (in case of dataXML method)
                // $strXML - If you intend to use dataXML method for this chart, pass the XML data as this parameter. Else, set it to "" (in case of dataURL method)
                // $chartId - Id for the chart, using which it will be recognized in the HTML page. Each chart on the page needs to have a unique Id.
                // $chartWidth - Intended width for the chart (in pixels)
                // $chartHeight - Intended height for the chart (in pixels)
                // $debugMode - Whether to start the chart in debug mode
                function renderChartHTML($chartSWF, $strURL, $strXML, $chartId, $chartWidth, $chartHeight, $debugMode) {
                    // Generate the FlashVars string based on whether dataURL has been provided
                    // or dataXML.
                    $strFlashVars = "&chartWidth=" . $chartWidth . "&chartHeight=" . $chartHeight . "&debugMode=" . $this->boolToNum($debugMode);
                    if ($strXML=="")
                        // DataURL Mode
                        $strFlashVars .= "&dataURL=" . $strURL;
                    else
                        //DataXML Mode
                        $strFlashVars .= "&dataXML=" . $strXML;
 
$HTML_chart = <<<HTMLCHART
        <!-- START Code Block for Chart $chartId -->
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="$chartWidth" height="$chartHeight" id="$chartId">
                <param name="allowScriptAccess" value="always" />
                <param name="movie" value="$chartSWF"/>        
                <param name="FlashVars" value="$strFlashVars" />
                <param name="quality" value="high" />
                <embed src="$chartSWF" FlashVars="$strFlashVars" quality="high" width="$chartWidth" height="$chartHeight" name="$chartId" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>
        <!-- END Code Block for Chart $chartId -->
HTMLCHART;
 
                  return $HTML_chart;
                }
               
                // boolToNum function converts boolean values to numeric (1/0)
                function boolToNum($bVal) {
                        return (($bVal==true) ? 1 : 0);
                }
 
        }//End Class
?>
 

复制代码

4、控制器中调用方法:

PHP复制代码

 
$this->load->helper('fusionCharts');
$oCharts                = new DK_Fusioncharts();
下面就能用 $oCharts来生成图表了
 

复制代码

注: fusioncharts_helper.php 可以放在libraries, 用$this->load->libraries('fusioncharts');调用

snllll

能截图示例就更完美了！
呵呵，我用的是Google的图标API。
另外，我建议楼主将JS存放在其他目录下，这样部署的时候就可以把application目录的真实地址隐藏起来。以防被有些别有用心的人利用了。

xingch

回复 2# snllll
我正有此疑惑,请问何解?
我的架构是把CI的框架分离出来 把application剥出目录结构如下
---system
---application1
---application2
发布的时候就把站点目录直接定位到application

snllll

回复 3# xingch


     我一般是这样处理的，在发布目录下部署一个 public文件夹，这里面按照分类存放CSS \JS \IMAGES ,另外还有一个上传保存的文件夹。当然，你的编辑器也应该放在发布目录下，可以被访问到。
     然后在index.php的28行和45行配置相关的目录路径。

snllll

提醒：有些图片验证码的使用在更改路径后有点问题，主要是字体找不到了，需要修改响应的部分。

xingch

回复 4# snllll


    谢谢!

    经过更改我用这个结构
    ----CI库
    ----Application1
    -----------application
    -----------js
    -----------style
    -----------images

sonic

这贴好。多么华丽的FLASH图表插件呀~~~我很喜欢用这个。