amcharts教程

 Joomla使用过程中使用到分析组件(com_analytics)，已经相关的的插件!

插件当中使用到了amchart (真复杂...)

以下是amchart相关资料

总的来说：

amcharts 要一个“配置文件”（setting.xml），一个数据文件(amile_data.xml)，一个 SWFObject.js，一个对应的 SWF 就可以生成漂亮的统计报表了

1 SWFObject v1.5的对象结构

deconcept
    util
        getRequestParameter(_2b) // 取得url参数value。_2b是URL的key。
    SWFObjectUtil
        getPlayerVersion() // 取得版本号对象。major.minor.rev。
        cleanupSWFs() // 清除页面上所有<OBJECT>元素。
    SWFObject(_1, id, w, h, _5, c, _7, _8, _9, _a)
                                   // _1: swf，指定SWF文件路径。
                                   // _id: id，<embed>或者<object>标签的id。
                                   // w: width，属性width。
                                   // h: height，属性height。
                                   // _5: version，flash版本，默认自动会去读取本地的flash插件版本的。
                                   // c: bgcolor，背景色。
                                   // _7: quality，品质(low, high, autolow, autohigh, best ) 。
                                   // _8: xiRedirectUrl
                                   // _9: redirectUrl
                                   // _a: url参数key
        useExpressInstall(_d) // 设置xiSWFPath, useExpressInstall属性
        setAttribute(_e, _f) // 设置属性attributes。_e是key，_f是value。
        getAttribute(_10) // 取得属性attributes中的值。_10是key。
        addParam(_l1, _l2) // 设置参数params。_l1是key，_l2是value。
        getParams() // 取得params。
        addVariable(_l3, _l4) // 设置变量variables。_13是key，_14是value。
        getVariable(_l5) // 取得变量variables中的值。
        getVariables() // 取得变量variables。
        getVariablePairs() // 取得变量variables的key=value对数组。
        getSWFHTML() // 返回flash嵌入的HTML
                     // 例如：
                     // <embed type="application/x-shockwave-flash" 
                     // src="/amchart/amchart/amcolumn/amcolumn.swf" mce_src="amchart/amchart/amcolumn/amcolumn.swf" 
                     // width="520" height="380" 
                     // style="undefined" mce_style="undefined" 
                     // id="amcolumn" name="amcolumn" 
                     // bgcolor="#FFFFFF" 
                     // quality="high"
                     // flashvars="path=/amchar/amchar/amcolumn/&settings_file=amcolumn_settings.xml&data_file=amcolumn_data.txt&preloader_color=#000000"/>
        write(_20) // 写入flash插入的位置。_20可以是id的名称或者是一个dom结点。
    PlayerVersion(_29) // 创建版本号对象。
        versionIsValid(fv) // 验证flash插件的当前版本号是否兼容fv的版本号（大于等于）。
getQueryParamValue = deconcept.util.getRequestParameter;
FlashObject = deconcept.SWFObject;
SWFObject = deconcept.SWFObject;

 

2 数据文件
支持csv、xml格式。
csv实际上是一个文本文件，而非excel文件，所以，可以直接使用文本文件来命名。
每一列的数据采用“;”或“,”分隔都可以。
例如：
// amcolumn_data.txt
2003;2.5
2004;4.6
2005;5.8
2006;3.8
2007;4.8
2008;6.8
2009;7.8

3 配置文件
例如：

// amcolumn_settings.xml
<?xml version="1.0" encoding="UTF-8"?>
<settings>
   <!-- chart config -->
   <data_type>csv</data_type>                                                     <!-- [xml] (xml / csv) -->
   <digits_after_decimal>2</digits_after_decimal>
   <legend>
      <enabled>false</enabled>
   </legend>
   <!-- plugin config -->   
   <plugins>
    <!-- value indicator plugin is suitable for line chart, column chart & xy chart -->
    <plugin file="/amchart/amchart/amcolumn/plugins/value_indicator.swf" position="above">      <!-- file should be located in "path" folder. position can be "behind" or "above". "behind" means that the plugin will be loaded behind graphs -->
      <chart_type>column</chart_type>                                             <!-- [line] (line / column / xy) this plugin can be used with line or with column chart -->
      <axis></axis>                                                               <!-- [left] (left / right / x / y) if used with line chat use left or right, if used with xy chart, use x or y -->
      <line_color>#000000</line_color>                                            <!-- [#BBBB00] (hex color code) -->
      <line_alpha></line_alpha>                                                   <!-- [100] (0 - 100) -->
      <text_color>#000000</text_color>                                            <!-- [settings.text_color] -->
      <text_size>13</text_size>                                                   <!-- [settings.tex_size] -->
      <precision>2</precision>                                                    <!-- [0] (Number) how many numbers after comma should be shown -->
    </plugin>
  </plugins>
</settings>

 

4 在HTML上显示

<body>
<!-- saved from url=(0013)about:internet -->
<!-- amcolumn script-->
 <div id="flashcontent">
  <strong>You need to upgrade your Flash Player</strong>
 </div>
 <mce:script type="text/javascript"><!--
  
  var so = new SWFObject("/amchart/amchart/amcolumn/amcolumn.swf", "amcolumn", "520", "380", "8", "#FFFFFF"); // 创建SWFObject对象
  so.addVariable("path", "/amchart/amchart/amcolumn/"); // 暂时不是很清楚，破解时用到了这个属性。既然，例子写了，我们也写好了。
  so.addVariable("settings_file", encodeURIComponent("amcolumn_settings.xml")); // 配置文件
  so.addVariable("data_file", encodeURIComponent("amcolumn_data.txt")); // 数据文件
  so.addVariable("preloader_color", "#000000"); // 加载时显示的颜色
  so.write("flashcontent"); // 在flashcontent位置写入flash插入的HTML
// --></mce:script>
<!-- end of amcolumn script -->
</body>

 

5 破解amchart
没有破解的amchart显示的时候在左上角会出现“chart by amCharts.com”链接，表示是未注册版本，非常讨厌。
原理：网上看到的。
用SWF Decompiler软件加载swf文件，在Resources下找Action中的MainMoive，代码中有一段如下：

function checkKey(serial)
{
   var _l1 = com.amcharts.Utils.stripSymbols(serial, " ");
   _l1 = com.amcharts.Utils.stripSymbols(_l1, "\n");
   _l1 = com.amcharts.Utils.stripSymbols(_l1, "\r");
   _l1 = com.amcharts.Utils.stripSymbols(_l1, "\r\n");
   arr = _l1.split("-");
   if (Number(arr[2]) + Number(arr[3]) != 8645 || Number(arr[2].substr(1, 1)) - Number(arr[3].substr(2, 1)) != 2)
   {
       attachMovie("copyright_mc", "copyright_mc", 1001);
   } // end if
} // End of the function

 

这就是序列号的代码，再往下看
key_loader.loadVars(path + "amcharts_key.txt", this, "checkKey", false, "checkKey");
破解：
在swf目录下，新建文件amcharts_key.txt。
输入序列号内容如下：0000-0000-1422-7223。
保存后测试通过！真没想到他们会采用这么简单的加密方式！

注意：测试的时候发现一个问题，即使amcharts_key.txt正确放入SWF文件目录下，也有破解不成功的情况。
1）amcolumn, amline, ampie破解时跟so.addVariable("path", "");有关系。该属性设置错误破解不成功。
2）amstock似乎无法破解！

以上是网上贴的

下面是setting.xml文件一些特别的属性

<graphs>                                                    <!-- GRAPHS SETTINGS. These settings can also be specified in data file, as attributes of <graph>, in this case you can delete everything from <graphs> to </graphs> (including) -->
    <graph gid="registerall">                                           <!-- if you are using XML data file, graph "gid" must match graph "gid" in data file -->
                                                            
      <axis></axis>                                       <!-- [left] (left/ right) indicates which y axis should be used -->
      <title>registerall</title>                                  <!-- [] (graph title) -->
      <color>#0000FF</color>                                  <!-- [] 线条颜色  (hex color code) if not defined, uses colors from this array: #FF0000, #0000FF, #00FF00, #FF9900, #CC00CC, #00CCCC, #33FF00, #990000, #000066  -->
      <color_hover>#FF0000</color_hover>                             <!-- [#BBBB00] 链接颜色 (hex color code) -->
      <line_alpha>100</line_alpha>                               <!-- [100] (0 - 100) 是否显示线条, 0-100越大越清晰; 0浓度为0-->
      <line_width>0</line_width>                              <!-- [0] 线条宽度,不是长度 ..(Number) 0 for hairline -->                                    
      <fill_alpha></fill_alpha>                             <!-- [0] 线条内填充 (0 - 100) if you want the chart to be area chart, use bigger than 0 value -->
      <fill_color></fill_color>                               <!-- [grpah.color] 填充颜色渐变 (hex color code) Separate color codes with comas for gradient -->
      <balloon_color></balloon_color>                         <!-- [graph color] 线条提示颜色, 例:鼠标放在某个节点上,弹出提示背景颜色  (hex color code) leave empty to use the same color as graph -->
      <balloon_alpha>90</balloon_alpha>                         <!-- [100] 提示背景色渐变 (0 - 100) -->      
      <balloon_text_color></balloon_text_color>               <!-- [#FFFFFF] 提示文字颜色(hex color code) -->
      <bullet>round</bullet>                                       <!-- [] 节点显示的方式,例:square(方型),round(圆型) (square, round, square_outlined, round_outlined, filename.swf) can be used predefined bullets or loaded custom bullets. Leave empty if you don't want to have bullets at all. Outlined bullets use plot area color for outline color -->
                                                              <!-- The chart will look for this file in amline_path folder (amline_path is set in HTML) -->
      <bullet_size>0</bullet_size>                             <!-- [6] 节点显示方式大小渐变 (Number) affects only predefined (square and round) bullets, does not change size of custom loaded bullets -->
      <bullet_color>#0000FF</bullet_color>                         <!-- [graph color] 节点显示颜色  (hex color code) affects only predefined (square and round) bullets, does not change color of custom loaded bullets. Leave empty to use the same color as graph  -->
      <bullet_alpha>100</bullet_alpha>                           <!-- [graph alpha] 节点显示大小渐变,跟上面的差不多啊 (hex color code) Leave empty to use the same alpha as graph -->
      <hidden></hidden>                                       <!-- [false] 线条是否隐藏 (true / false) vill not be visible until you check corresponding checkbox in the legend -->
      <selected>true</selected>                              <!-- [true] (true / false) if true, balloon indicating value will be visible then roll over plot area -->
      <balloon_text>
        <!--[CDATA[<b>{value}</b> (个)用户注册 <b>{description}</b>]]--> <!-- [<b>{value}</b><br>{description}] ({title} {value} {series} {description} {percents}) You can format any balloon text: {title} will be replaced with real title, {value} - with value and so on. You can add your own text or html code too. -->
      </balloon_text>										  <!-- 提示信息:可以显示你想要的任何提示信息,前提是registerGenre.php 将值放了进来! 动态的获得数据-->
      <data_labels>
                                         <!-- [] 节点处显示信息 ({title} {value} {series} {description} {percents}) Data labels can display value (and more) near your point on the plot area. -->
                                                              <!-- to avoid overlapping, data labels, the same as bullets are not visible if there are more then hide_bullets_count data points on plot area. -->                                                              
      </data_labels>  
      <data_labels_text_color></data_labels_text_color>       <!-- [text_color] 节点颜色 (hex color code) --> 
      <data_labels_text_size>10</data_labels_text_size>       <!-- [text_size] 节点字体大小 (Number) -->
      <data_labels_position></data_labels_position>           <!-- [above] 节点数量为0时如何显示 below在X轴下面;above在X轴上面 (below / above) -->            
      <vertical_lines></vertical_lines>                       <!-- [false] 是否显示节点垂直线 (true / false) whether to draw vertical lines or not. If you want to show vertical lines only (without the graph, set line_alpha to 0 -->
      <visible_in_legend></visible_in_legend>                 <!-- [true] (true / false) whether to show legend entry for this graph or not -->
    </graph>

 

这是图表显示样式的设置。。。

评论

1 楼 zehua 2011-12-05  

楼主有无遇到过，amcolumn_data.txt文本的数据更新后，但是在界面上显示出还是原来的数据？

我现在遇到这样的一个问题，就是在后台用JAVA把数据写成XML文件，
然后调用XML文件显示数据，

但是发现运行第一次的时候没问题，问题是我加入了新的数据后，还是显示出第一次显示出来的结果。然后看生成的XML发现生成的是修改后的数据，但是前台就是显示不出最新结果出来？重新关掉浏览器后，重新载入后才显示出最新的结果，

楼主有无遇到同样的问题？该如何解决？