使用amChart的一些心得

Plato 标签: amcharts， 配置文件， 对象结构， 数据文件

amchart相关资料

总的来说：

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

1 SWFObject v1.5的对象结构

view plaincopy to clipboardprint?

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

view plaincopy to clipboardprint?

1. // amcolumn_settings.xml  
2. <?xml version="1.0" encoding="UTF-8"?>
3. <settings>
4. <!-- chart config -->
5. <data_type>csv</data_type> <!-- [xml] (xml / csv) -->
6. <digits_after_decimal>2</digits_after_decimal>
7. <legend>
8. <enabled>false</enabled>
9. </legend>
10. <!-- plugin config -->
11. <plugins>
12. <!-- value indicator plugin is suitable for line chart, column chart & xy chart -->
13. <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 -->
14. <chart_type>column</chart_type> <!-- [line] (line / column / xy) this plugin can be used with line or with column chart -->
15. <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 -->
16. <line_color>#000000</line_color> <!-- [#BBBB00] (hex color code) -->
17. <line_alpha></line_alpha> <!-- [100] (0 - 100) -->
18. <text_color>#000000</text_color> <!-- [settings.text_color] -->
19. <text_size>13</text_size> <!-- [settings.tex_size] -->
20. <precision>2</precision> <!-- [0] (Number) how many numbers after comma should be shown -->
21. </plugin>
22. </plugins>
23. </settings>

4 在HTML上显示

view plaincopy to clipboardprint?

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

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

view plaincopy to clipboardprint?

1. function checkKey(serial)  
2. {  
3.    var _l1 = com.amcharts.Utils.stripSymbols(serial, " ");  
4. _l1 = com.amcharts.Utils.stripSymbols(_l1, "\n");  
5. _l1 = com.amcharts.Utils.stripSymbols(_l1, "\r");  
6. _l1 = com.amcharts.Utils.stripSymbols(_l1, "\r\n");  
7. arr = _l1.split("-");  
8.    if (Number(arr[2]) + Number(arr[3]) != 8645 || Number(arr[2].substr(1, 1)) - Number(arr[3].substr(2, 1)) != 2)  
9.    {  
10.        attachMovie("copyright_mc", "copyright_mc", 1001);  
11.    } // end if  
12. } // 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文件一些特别的属性

view plaincopy to clipboardprint?

1. <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) -->
2. <graph gid="registerall"> <!-- if you are using XML data file, graph "gid" must match graph "gid" in data file -->
4. <axis></axis> <!-- [left] (left/ right) indicates which y axis should be used -->
5. <title>registerall</title> <!-- [] (graph title) -->
6. <color>#0000FF</color> <!-- [] 线条颜色  (hex color code) if not defined, uses colors from this array: #FF0000, #0000FF, #00FF00, #FF9900, #CC00CC, #00CCCC, #33FF00, #990000, #000066  -->
7. <color_hover>#FF0000</color_hover> <!-- [#BBBB00] 链接颜色 (hex color code) -->
8. <line_alpha>100</line_alpha> <!-- [100] (0 - 100) 是否显示线条, 0-100越大越清晰; 0浓度为0-->
9. <line_width>0</line_width> <!-- [0] 线条宽度,不是长度 ..(Number) 0 for hairline -->
10. <fill_alpha></fill_alpha> <!-- [0] 线条内填充 (0 - 100) if you want the chart to be area chart, use bigger than 0 value -->
11. <fill_color></fill_color> <!-- [grpah.color] 填充颜色渐变 (hex color code) Separate color codes with comas for gradient -->
12. <balloon_color></balloon_color> <!-- [graph color] 线条提示颜色, 例:鼠标放在某个节点上,弹出提示背景颜色  (hex color code) leave empty to use the same color as graph -->
13. <balloon_alpha>90</balloon_alpha> <!-- [100] 提示背景色渐变 (0 - 100) -->
14. <balloon_text_color></balloon_text_color> <!-- [#FFFFFF] 提示文字颜色(hex color code) -->
15. <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 -->
16. <!-- The chart will look for this file in amline_path folder (amline_path is set in HTML) -->
17. <bullet_size>0</bullet_size> <!-- [6] 节点显示方式大小渐变 (Number) affects only predefined (square and round) bullets, does not change size of custom loaded bullets -->
18. <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  -->
19. <bullet_alpha>100</bullet_alpha> <!-- [graph alpha] 节点显示大小渐变,跟上面的差不多啊 (hex color code) Leave empty to use the same alpha as graph -->
20. <hidden></hidden> <!-- [false] 线条是否隐藏 (true / false) vill not be visible until you check corresponding checkbox in the legend -->
21. <selected>true</selected> <!-- [true] (true / false) if true, balloon indicating value will be visible then roll over plot area -->
22. <balloon_text>
23. <!--[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. -->
24. </balloon_text> <!-- 提示信息:可以显示你想要的任何提示信息,前提是registerGenre.php 将值放了进来! 动态的获得数据-->
25. <data_labels>
26. <!-- [] 节点处显示信息 ({title} {value} {series} {description} {percents}) Data labels can display value (and more) near your point on the plot area. -->
27. <!-- 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. -->
28. </data_labels>
29. <data_labels_text_color></data_labels_text_color> <!-- [text_color] 节点颜色 (hex color code) -->
30. <data_labels_text_size>10</data_labels_text_size> <!-- [text_size] 节点字体大小 (Number) -->
31. <data_labels_position></data_labels_position> <!-- [above] 节点数量为0时如何显示 below在X轴下面;above在X轴上面 (below / above) -->
32. <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 -->
33. <visible_in_legend></visible_in_legend> <!-- [true] (true / false) whether to show legend entry for this graph or not -->
34. </graph>

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