我的Java路上那些事儿

最近在做的这个项目需要用图形报表展示数据给用户
团队使用amcharts来做图形报表 界面很酷 操作简单
需要写的代码也不多 只是一般在项目中用到的图形报表都是动态的
所以需要动态生成data.xml 来变换数据
amcharts提供的图形很丰富 去官网下载demo很有多simple
图形都很炫的 好了废话不多说

先从页面入手 下面以饼图为例
新建目录images 将amcharts需要的图片放进来
再建一目录ampie将swf放进来ampie.swf 并将setting文件也放在此处 ampie_settings.xml
ampie_settings.xml的内容是设置图形的效果

<?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>没有数据</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>

然后去页面写一个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"); // 坐标轴单位

                var dataURI = Y.Reporting.dataURI;//action路径 这个action稍后会写出来
        
        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是一个变量 
        }
        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是页面上的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是一个流

    }
    
    /** *//**
     * 返回地域饼图xml数据
     * @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();
    }

下面是一些常用参数设置 ：
XML中的标签和属性有：
<graph> 所具有的属性
flash背景参数：
* bgColor=”HexColorCode” : 设置flash的背景颜色
* bgAlpha=”NumericalValue(0-100)” : 设置背景的透明度
* bgSWF=”Path of SWF File” : 设置一个外部的Flash 为flash的背景
图表背景参数：
* canvasBgColor=”HexColorCode” : 设置图表背景的颜色
* canvasBaseColor=”HexColorCode” : 设置图表基部的颜色
* canvasBaseDepth=”Numerical Value” : 设置图表基部的高度
* canvasBgDepth=”Numerical Value” : 设置图表背景的深度
* showCanvasBg=”1/0″ : 设置是否显示图表背景
* showCanvasBase=”1/0″ : 设置是否显示图表基部
图表和轴的标题
* caption=”String” : 图表上方的标题
* subCaption=”String” : 图表上方的副标题
* xAxisName= “String” : X轴的名字
* yAxisName= “String” : y轴的名字
图表数量值的限制
* yAxisMinValue=”value”: y轴最小值
* yAxisMaxValue=”value”: y舟最大值
通用参数
* shownames=”1/0″ : 设置是否在x轴下显示<set>里指定的name
* showValues=”1/0″ : 设置是否在柱型图或饼型图上显示数据的值
* showLimits=”1/0″ : 设置是否在图表的y轴坐标上显示最大最小的数据值
* rotateNames=”1/0″ : 设置x轴下的name 是水平显示还是垂直显示
* animation=”1/0″ : 设置柱型图的显示是否是动画显示
字体属性
* baseFont=”FontName” : 设置字体样式
* baseFontSize=”FontSize” : 设置字体大小
* baseFontColor=”HexColorCode” : 设置字体颜色
* outCnvBaseFont = “FontName” : 设置图表外侧的字体样式
* outCnvBaseFontSze=”FontSize” : 设置图表外侧的字体大小
* outCnvBaseFontColor=”HexColorCode”: 设置图表外侧的字体颜色
数字格式选项
* numberPrefix=”$” : 设置数据值的前缀
* numberSuffix=”p.a” : 设置数据值的后缀（如果是特殊字符，需要使用URL Encode重编码）
* formatNumber=”1/0″ : 设置是否格式化数据
* formatNumberScale=”1/0″ : 设置是否用“K”来代表千，“M”来代表百万
* decimalSeparator=”.” : 用指定的字符来代替小数点
* thousandSeparator=”,” : 用指定的字符来代替千位分隔符
* decimalPrecision=”2″ : 设置十进制的精度
* divLineDecimalPrecision=”2″: 设置y轴数值的小数位数
* limitsDecimalPrecision=”2″ : 设置y轴的最大最小值的小数位数
水平分隔线
* numdivlines=”NumericalValue” : 设置水平分隔线的数量
* divlinecolor=”HexColorCode” : 设置水平分隔线的颜色
* divLineThickness=”NumericalValue” : 设置水平分隔线的宽度
* divLineAlpha=”NumericalValue0-100″ : 设置水平分隔线的透明度
* showDivLineValue=”1/0″ : 设置是否显示水平分隔线的数值
鼠标旋停参数
* showhovercap=”1/0″ : 显示是否激活鼠标旋停效果
* hoverCapBgColor=”HexColorCode” : 设置鼠标旋停效果的背景颜色
* hoverCapBorderColor=”HexColorCode” : 设置鼠标旋停效果的边框颜色
* hoverCapSepChar=”Char” : 设置鼠标旋停后显示的文本中的分隔符号
图表边距的设置
* chartLeftMargin=”Numerical Value (in pixels)” : 设置图表左边距
* chartRightMargin=”Numerical Value (in pixels)” : 设置图表右边距
* chartTopMargin=”Numerical Value (in pixels)” : 设置图表上边距
* chartBottomMargin=”Numerical Value (in pixels)” : 设置图表下边距
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” : 设置在图表中体现出来的名字
Example: <set name=’Jan’ …>
* value=”NumericalValue” : 设置在图表中各个名字想对应的值
Example: <set name=’Jan’ value=’12345′ …>
* color=”HexCode” : 设置在图表中相对应的柱行图的颜色
Example: <set name=’Jan’ value=’12345′ color=’636363′ …>
* hoverText=”String value” : 设置鼠标旋停在相对应的柱行图 上出现的文本内容
Example: <set name=’Jan’ value=’12345′ color=’636363′ hoverText=’January’…>
* link=”URL” : 设置该柱行图的链接地址（需要URL Encode重编码）
Example: <set … link=’ShowDetails.asp%3FMonth=Jan’ …>
* alpha=”Numerical Value 0-100″ : 设置在图表中相对应的柱行图的透明度
Example: <set … alpha=’100′ …>
* showName=”1″ : 设置在是否显示图表中相对应的柱行图的name
Example : <set … showName=”1″ …>

第一次用amcharts 共同学习 共同进步
最近在淘宝上开了服装店铺 以批发价销售 为了冲冠
朋友们有时间去逛逛啊 http://shop57153607.taobao.com/