我的Java路上那些事兒

最近在做的這個(gè)項(xiàng)目需要用圖形報(bào)表展示數(shù)據(jù)給用戶
團(tuán)隊(duì)使用amcharts來(lái)做圖形報(bào)表 界面很酷 操作簡(jiǎn)單
需要寫(xiě)的代碼也不多 只是一般在項(xiàng)目中用到的圖形報(bào)表都是動(dòng)態(tài)的
所以需要?jiǎng)討B(tài)生成data.xml 來(lái)變換數(shù)據(jù)
amcharts提供的圖形很豐富 去官網(wǎng)下載demo很有多simple
圖形都很炫的 好了廢話不多說(shuō)

先從頁(yè)面入手 下面以餅圖為例
新建目錄images 將amcharts需要的圖片放進(jìn)來(lái)
再建一目錄ampie將swf放進(jìn)來(lái)ampie.swf 并將setting文件也放在此處 ampie_settings.xml
ampie_settings.xml的內(nèi)容是設(shè)置圖形的效果

<?xml version="1.0" encoding="UTF-8" ?>
<settings>
 <data_type>xml</data_type>
 <pie>
   <x>320</x>
   <y>100</y>
   <radius>100</radius>
   <inner_radius>30</inner_radius>
   <height>10</height>
   <angle>35</angle>
   <alpha>90</alpha>
 </pie>
 <animation>
   <start_time>1</start_time>
   <start_radius>100%</start_radius>
   <start_effect>strong</start_effect>
   <pull_out_time>1</pull_out_time>
 </animation>
 <data_labels>
   <radius>20</radius>
   <text_size>12</text_size>
   <text_color>#000000</text_color>
   <line_color>#000000</line_color>
   <show><![CDATA[]]></show>
   <hide_labels_percent>10</hide_labels_percent>
 </data_labels>
<strings>
    <no_data>沒(méi)有數(shù)據(jù)</no_data>
</strings>
 <decimals_separator>.</decimals_separator>

 <legend>
   <enabled>true</enabled>
   <x>20</x>
   <y>20</y>
   <width>350</width>
   <max_columns>1</max_columns>
   <color>#FFFFFF</color>
   <text_color>#000000</text_color>
   <text_size>12</text_size>
   <spacing>2</spacing>
   <margins></margins>
   <align>left</align>
   <key>
     <size>16</size>
     <border_color></border_color>
   </key>
   <values>
     <enabled>true</enabled>
     <width></width>
     <text><![CDATA[{percents}% ({value})]]></text>
   </values>
 </legend>
</settings>

然后去頁(yè)面寫(xiě)一個(gè)js腳本

    
    function loadChart(chart) {
        var container = chart.one(".chart-control");
        var chartType = container.getAttribute("chart-type") || 'amline';
        var chartName = container.getAttribute("chart-name");
        var chartHeight = container.getAttribute("chart-height");
        var graphsAxis = container.getAttribute("graphs-axis");
        var percentUnit = container.getAttribute("percent-unit"); // 坐標(biāo)軸單位

                var dataURI = Y.Reporting.dataURI;//action路徑 這個(gè)action稍后會(huì)寫(xiě)出來(lái)
        
        loadSWF(container.getAttribute("id"), chartType, chartName, chartHeight, dataURI,
                    chart.one("h3 span").get("innerHTML"), graphsAxis, percentUnit);
        chart.addClass("loaded");
    }
    
    function loadSWF(containerID, chartType,chartName, chartHeight, dataURI, title, graphsAxis, percentUnit) {
        chartType = chartType || "amline";
        var so;
        var baseURI = Y.Reporting.baseURI;
        var num=0;
        var transids = document.getElementsByName("transId");
         

        var s = "";
        for (i = 0; i < transids.length; i++) {
            if (transids[i].checked) {
                num++;
                s = s + transids[i].value + "!";
            }
        }
        if (s.length > 0) {
            s = s.substring(0, s.length - 1);
        }
        var chartURI = baseURI + "/amchart/" + chartType + "/";
        var mybaseUrl = "";
        if (!isNaN(chartName)) {
            var destType = Y.one("#J_consumeid");
            if (destType && destType != null) {
                destType = destType.get("value");
            }
            mybaseUrl = baseURI
                    + '/nolayout/report/amlineSettingsTotalRpt.htm?type='
                    + chartName + '&graphsAxis=' + graphsAxis
                    + '&percentUnit=' + percentUnit+'&transIds=' + s+'&destType='+destType;
        } else {
            if (num > 1) {
                mybaseUrl = baseURI
                        + '/nolayout/report/amlineSettingsMultiChart.htm?type='
                        + chartName + '&num=' + num + '&transIds=' + s
                        + '&graphsAxis=' + graphsAxis + '&percentUnit='
                        + percentUnit
            } else {
                mybaseUrl = baseURI
                        + '/nolayout/report/amlineSettingsSingleChart.htm?type='
                        + chartName + '&num=' + num + '&graphsAxis='
                        + graphsAxis + '&percentUnit=' + percentUnit

            }
        }
        var settingFileMap = {
            amline : mybaseUrl,
            ampie: chartURI + 'ampie_settings.xml'   //引入setting.xml文件 chartURI是一個(gè)變量 
        }
        var settingFile = settingFileMap[chartType];
        var swfURI = chartURI + chartType + '.swf';
        
        if (!chartHeight) {
            chartHeight = 233;
        }
        
        so = new SWFObject(swfURI, chartType, "100%", chartHeight, "7", "");
        so.addVariable("path", chartURI);
        so.addVariable("settings_file", escape(settingFile));
        so.addVariable("data_file", escape(dataURI));
        so.addVariable("preloader_color", "#000000");
        so.addParam("wmode", "transparent");
        so.write(containerID);    //containerID是頁(yè)面上的div id屬性
    }

下面是action

        protected void execute() throws WebxException {
    
               List<Members> list = reportAO.doFindAreaPvList(areaDO);
            dataString = generatePieXmlString(list,queryDO);
            PrintWriter writer = response.getWriter();
                    writer.write(dataString);//writeResult是一個(gè)流

    }
    
    /** *//**
     * 返回地域餅圖xml數(shù)據(jù)
     * @param list
     * @param queryDO
     * @return
     */
    private String generatePieXmlString(List<Members> list, Members queryDO) {
        if (list == null || list.size() == 0){
            return "<pie><slice>0</slice></pie>";
        }
        StringBuffer sb = new StringBuffer("<pie>");
        long sumpv = 0;
        for (int i = 0; i < list.size(); i++) {
            Members rDO = list.get(i);
            if (i<7){
                sb.append("<slice title='").append(rDO.getProvincename()!=null?rDO.getProvincename():"")
                .append("'>").append(rDO.getSumpv()!=null?rDO.getSumpv():0).append("</slice>");
            } else {
                sumpv += rDO.getSumpv()!=null?rDO.getSumpv():0;
            }
        }
        if (list.size()>ConstantResource.DEFAULT_PIE_COUNT){
            sb.append("<slice title='其它'>").append(sumpv).append("</slice>");
        }
        sb.append("</pie>");
        return sb.toString();
    }

下面是一些常用參數(shù)設(shè)置 ：
XML中的標(biāo)簽和屬性有：
<graph> 所具有的屬性
flash背景參數(shù)：
* bgColor=”HexColorCode” : 設(shè)置flash的背景顏色
* bgAlpha=”NumericalValue(0-100)” : 設(shè)置背景的透明度
* bgSWF=”Path of SWF File” : 設(shè)置一個(gè)外部的Flash 為flash的背景
圖表背景參數(shù)：
* canvasBgColor=”HexColorCode” : 設(shè)置圖表背景的顏色
* canvasBaseColor=”HexColorCode” : 設(shè)置圖表基部的顏色
* canvasBaseDepth=”Numerical Value” : 設(shè)置圖表基部的高度
* canvasBgDepth=”Numerical Value” : 設(shè)置圖表背景的深度
* showCanvasBg=”1/0″ : 設(shè)置是否顯示圖表背景
* showCanvasBase=”1/0″ : 設(shè)置是否顯示圖表基部
圖表和軸的標(biāo)題
* caption=”String” : 圖表上方的標(biāo)題
* subCaption=”String” : 圖表上方的副標(biāo)題
* xAxisName= “String” : X軸的名字
* yAxisName= “String” : y軸的名字
圖表數(shù)量值的限制
* yAxisMinValue=”value”: y軸最小值
* yAxisMaxValue=”value”: y舟最大值
通用參數(shù)
* shownames=”1/0″ : 設(shè)置是否在x軸下顯示<set>里指定的name
* showValues=”1/0″ : 設(shè)置是否在柱型圖或餅型圖上顯示數(shù)據(jù)的值
* showLimits=”1/0″ : 設(shè)置是否在圖表的y軸坐標(biāo)上顯示最大最小的數(shù)據(jù)值
* rotateNames=”1/0″ : 設(shè)置x軸下的name 是水平顯示還是垂直顯示
* animation=”1/0″ : 設(shè)置柱型圖的顯示是否是動(dòng)畫(huà)顯示
字體屬性
* baseFont=”FontName” : 設(shè)置字體樣式
* baseFontSize=”FontSize” : 設(shè)置字體大小
* baseFontColor=”HexColorCode” : 設(shè)置字體顏色
* outCnvBaseFont = “FontName” : 設(shè)置圖表外側(cè)的字體樣式
* outCnvBaseFontSze=”FontSize” : 設(shè)置圖表外側(cè)的字體大小
* outCnvBaseFontColor=”HexColorCode”: 設(shè)置圖表外側(cè)的字體顏色
數(shù)字格式選項(xiàng)
* numberPrefix=”$” : 設(shè)置數(shù)據(jù)值的前綴
* numberSuffix=”p.a” : 設(shè)置數(shù)據(jù)值的后綴（如果是特殊字符，需要使用URL Encode重編碼）
* formatNumber=”1/0″ : 設(shè)置是否格式化數(shù)據(jù)
* formatNumberScale=”1/0″ : 設(shè)置是否用“K”來(lái)代表千，“M”來(lái)代表百萬(wàn)
* decimalSeparator=”.” : 用指定的字符來(lái)代替小數(shù)點(diǎn)
* thousandSeparator=”,” : 用指定的字符來(lái)代替千位分隔符
* decimalPrecision=”2″ : 設(shè)置十進(jìn)制的精度
* divLineDecimalPrecision=”2″: 設(shè)置y軸數(shù)值的小數(shù)位數(shù)
* limitsDecimalPrecision=”2″ : 設(shè)置y軸的最大最小值的小數(shù)位數(shù)
水平分隔線
* numdivlines=”NumericalValue” : 設(shè)置水平分隔線的數(shù)量
* divlinecolor=”HexColorCode” : 設(shè)置水平分隔線的顏色
* divLineThickness=”NumericalValue” : 設(shè)置水平分隔線的寬度
* divLineAlpha=”NumericalValue0-100″ : 設(shè)置水平分隔線的透明度
* showDivLineValue=”1/0″ : 設(shè)置是否顯示水平分隔線的數(shù)值
鼠標(biāo)旋停參數(shù)
* showhovercap=”1/0″ : 顯示是否激活鼠標(biāo)旋停效果
* hoverCapBgColor=”HexColorCode” : 設(shè)置鼠標(biāo)旋停效果的背景顏色
* hoverCapBorderColor=”HexColorCode” : 設(shè)置鼠標(biāo)旋停效果的邊框顏色
* hoverCapSepChar=”Char” : 設(shè)置鼠標(biāo)旋停后顯示的文本中的分隔符號(hào)
圖表邊距的設(shè)置
* chartLeftMargin=”Numerical Value (in pixels)” : 設(shè)置圖表左邊距
* chartRightMargin=”Numerical Value (in pixels)” : 設(shè)置圖表右邊距
* chartTopMargin=”Numerical Value (in pixels)” : 設(shè)置圖表上邊距
* chartBottomMargin=”Numerical Value (in pixels)” : 設(shè)置圖表下邊距
Zero Plane
The zero plane is a 3D plane that signifies the 0 position on the chart. If there are no negative numbers on the chart, you won’t see a visible zero plane.
* zeroPlaneShowBorder=”1/0″ : Whether the border of a 3D zero plane would be plotted or not.
* zeroPlaneBorderColor=”Hex Code” : If the border is to be plotted, this attribute sets the border color for the plane.
* zeroPlaneColor=”Hex Code” : The intended color for the zero plane.
* zeroPlaneAlpha=”Numerical Value 0-100″ : The intended transparency for the zero plane.

<set> 所具有的屬性
* name=”string” : 設(shè)置在圖表中體現(xiàn)出來(lái)的名字
Example: <set name=’Jan’ …>
* value=”NumericalValue” : 設(shè)置在圖表中各個(gè)名字想對(duì)應(yīng)的值
Example: <set name=’Jan’ value=’12345′ …>
* color=”HexCode” : 設(shè)置在圖表中相對(duì)應(yīng)的柱行圖的顏色
Example: <set name=’Jan’ value=’12345′ color=’636363′ …>
* hoverText=”String value” : 設(shè)置鼠標(biāo)旋停在相對(duì)應(yīng)的柱行圖 上出現(xiàn)的文本內(nèi)容
Example: <set name=’Jan’ value=’12345′ color=’636363′ hoverText=’January’…>
* link=”URL” : 設(shè)置該柱行圖的鏈接地址（需要URL Encode重編碼）
Example: <set … link=’ShowDetails.asp%3FMonth=Jan’ …>
* alpha=”Numerical Value 0-100″ : 設(shè)置在圖表中相對(duì)應(yīng)的柱行圖的透明度
Example: <set … alpha=’100′ …>
* showName=”1″ : 設(shè)置在是否顯示圖表中相對(duì)應(yīng)的柱行圖的name
Example : <set … showName=”1″ …>

第一次用amcharts 共同學(xué)習(xí) 共同進(jìn)步
最近在淘寶上開(kāi)了服裝店鋪 以批發(fā)價(jià)銷售 為了沖冠
朋友們有時(shí)間去逛逛啊 http://shop57153607.taobao.com/