前端开发&搜索引擎优化

只要坚持尝试,总有一天困难会变得容易,枯燥也会变得有趣了。

amCharts使用方式

<?xml version="1.0" encoding="UTF-8"?>
<!-- []内的值是默认值,意思是指如果你觉得这样设置还不错你可以删除该行,这样可以缩减文件。 -->
<!-- ()表示该参数可选择的值的范围或类型,左上角的坐标是(0,0),!20代表从右下角开始计算-->


<settings> 
  <data_type></data_type>                                     <!-- [xml] (xml/csv) -->
  <csv_separator></csv_separator>                             <!-- [;] (字符) csv文件的数据分隔符(只有在使用csv文件来存储数据才需要设置) -->
  <skip_rows></skip_rows>                                     <!-- [0] (数字)如果使用csv数据类型,在此处设置要跳过的行数 -->       
  <font></font>                                               <!-- [Arial] 字体,使用计算机字体,如Arial, Times New Roman, Tahoma, Verdana... -->
  <text_size></text_size>                                     <!-- [11] (数字) 所有文字的大小,各部分文本大小单独设置 -->
  <text_color></text_color>                                   <!-- [#000000](十六进制颜色代码) 文字颜色,各部分文字颜色可单独设置-->
  <decimals_separator></decimals_separator>                   <!-- [,] (字符) 小数分隔符。注意,只用来显示数据。数据的XML文件中必须使用小数点 -->
  <thousands_separator></thousands_separator>                 <!-- [ ] (字符) 千位分隔符。"none"表示不分隔 -->
  <digits_after_decimal>2</digits_after_decimal>              <!-- [] (数字) 如果值的小数位少于预设的小数位,补零 -->
  <scientific_min></scientific_min>                           <!-- [0.000001] 数字的绝对在小于等于该值,会用科学计数法表示 -->
  <scientific_max></scientific_max>                           <!-- [1000000000000000] 数字的绝对在大于等于该值,会用科学计数法表示 -->
  <redraw></redraw>                                           <!-- [false]  如果图表的宽高以百分比形式设置,而且此处设置为true,图表会被重画,屏幕大小也会改变 -->
 <!-- 如果你为它们设置了x,y值,图例,按钮的标签不会重定位 -->  
  <reload_data_interval></reload_data_interval>               <!-- [0] (数字) 数据重载的频率(单位秒)。如果你使用该特性,建议关闭缩放功能-->
  <preloader_on_reload></preloader_on_reload>                 <!-- [false]  数据或设置重载的时候是否显示预载 -->
  <add_time_stamp></add_time_stamp>                           <!-- [false]  如果为真,每次加载数据的时候会增加一个唯一值。设置reload_data_interval>0的时候才有用 -->
  <precision></precision>                                     <!-- [2] (数字)对于计算值该显示小数点后多少位(百分数,只在堆积图中使用) -->
  <connect></connect>                                         <!-- [false]  如果y轴无数据,是否连线-->
  <hide_bullets_count></hide_bullets_count>                   <!-- [] (数字) 如果屏幕上有多于hideBulletsCount个点,就隐藏Bullets,以免看起来很乱。置空或者为0的时候总是显示Bullets。该规则不会影响自定义的靠近y值的bullet。 -->
  <link_target></link_target>                                 <!-- [] (_blank, _top ...) -->
  <start_on_axis></start_on_axis>                             <!-- [true]  设为false, 折线图会右移二分之一个间隔 -->
  <colors></colors>                                           <!-- [#FF0000,#0000FF,#00FF00,#FF9900,#CC00CC,#00CCCC,#33FF00,#990000,#000066,#555555] 折线的颜色,如果折线颜色没有设置,使用该数组内的颜色 -->  
  <rescale_on_hide></rescale_on_hide>                         <!-- [true]  当显示或隐藏折线时,图表会重新计算最小和最大值。如果你不需要重新计算,设置为false。-->
  <js_enabled></js_enabled>                                   <!-- [true]  如果你不使用flash - JavaScript交互,设置为false。这样可以节省CPU资源 -->


  <background>                                               
    <color></color>                                           <!-- [#FFFFFF] 以逗号分隔实现渐变 -->
    <alpha></alpha>                                           <!-- [0] (0 - 100) 如果使用自定义的swf或jpg做背景,此处设置为0 -->
    <border_color></border_color>                             <!-- [#000000]  -->
    <border_alpha></border_alpha>                             <!-- [0] (0 - 100) -->
    <file></file>                                             <!-- [] (文件名) 背景swf或jpg文件。不要使用JPEG文件,在flash player 7中不可见,图表会在path路径中查找文件 -->
  </background> 
  
  <plot_area>                                                 <!-- PLOT 区域 (不太清楚是干嘛的) -->
    <color></color>                                           <!-- [#FFFFFF](十六进制颜色代码)以逗号分隔实现渐变-->
    <alpha></alpha>                                           <!-- [0] (0 - 100) 如果想要颜色与背景色不同,设置alpha大于0 -->
    <border_color></border_color>                             <!-- [#000000]  -->                                        
    <border_alpha></border_alpha>                            
    <margins>                                                
      <left></left>                                           <!-- [60](数字或百分比) --> 
      <top></top>                                             
      <right></right>                                         
      <bottom></bottom>                                       
    </margins>
  </plot_area>


  <scroller>
    <enabled></enabled>                                       <!-- [true]  图表缩放时是否显示滚动条 -->
    <y></y>                                                   <!-- [] (数字) 滚动条的Y坐标。如果未设置,显示在plot区域上方 -->    
    <color></color>                                           <!-- [#DADADA] 以逗号分隔实现渐变 -->
    <alpha></alpha>                                           <!-- [100] (数字) 滚动条alpha -->
    <bg_color></bg_color>                                     <!-- [#F0F0F0] 以逗号分隔实现渐变-->
    <bg_alpha></bg_alpha>                                     <!-- [100] (数字) 滚动条背景alpha -->
    <height></height>                                         <!-- [10] (数字) scroller height -->    
  </scroller>
  
  <grid>                                                      <!-- 网格 -->
    <x>                                                       <!-- 垂直网格 -->
      <enabled></enabled>                                     <!-- [true]  -->                                                     
      <color></color>                                         <!-- [#000000]  -->
      <alpha></alpha>                                         <!-- [15] (0 - 100) -->
      <dashed></dashed>                                       <!-- [false](Boolean) -->
      <dash_length></dash_length>                             <!-- [5] (数字) -->  
      <approx_count></approx_count>                           <!-- [4] (数字) 网格线近似值 -->
    </x>
    <y_left>                                                  <!-- 水平网格,左Y轴,必须有至少一个图指定到左Y轴时才可见 -->
      <enabled></enabled>                                     <!-- [true]  -->          
      <color></color>                                         <!-- [#000000]  -->
      <alpha></alpha>                                         
      <dashed></dashed>                                       <!-- [false]  -->
      <dash_length></dash_length>                             <!-- [5] (数字) -->
      <approx_count></approx_count>                           <!-- [10] (数字) 网格线近似值 -->
      <fill_color></fill_color>                               <!-- [#FFFFFF] 网格线之间每隔一个区域会填充该颜色,需要设置fill_alpha > 0-->
      <fill_alpha></fill_alpha>                               <!-- [0] (0 - 100) 填充不透明度 -->      
    </y_left>
    <y_right>                                                 
      <enabled></enabled>                                     <!-- [true]  -->          
      <color></color>                                         <!-- [#000000]  -->
      <alpha></alpha>                                         <!-- [15] (0 - 100) -->
      <dashed></dashed>                                       <!-- [false]  -->
      <dash_length></dash_length>                             <!-- [5] (数字) -->
      <approx_count></approx_count>                           <!-- [10] (数字) 网格线近似值 -->
      <fill_color></fill_color>                               <!-- [#FFFFFF]  网格线之间每隔一个区域会填充该颜色,需要设置fill_alpha > 0 -->
      <fill_alpha></fill_alpha>                               <!-- [0] (0 - 100) 填充不透明度 -->      
    </y_right>        
  </grid>
  边框全局设置
  <values>                                                    <!-- 值 -->
    <x>                                                       <!-- x轴 -->
      <enabled></enabled>                                     <!-- [true]  -->
      <rotate></rotate>                                       <!-- [0] (0 - 90) 旋转角度。如果你想要旋转1-89度,必须将font.swf放入fonts文件夹 -->      
      <frequency></frequency>                                 <!-- [1] (数字) 显示值的频率, 1 - 每个网格线旁边, 2 - 每隔一个网格线旁边... -->
      <skip_first></skip_first>                               <!-- [false]  是否跳过第一个值 -->
      <skip_last></skip_last>                                 <!-- [false]  是否跳过最后一个值-->
      <color></color>                                         <!-- [text_color]  -->
      <text_size></text_size>                                 <!-- [text_size] (数字) -->
      <inside></inside>                                       <!-- [false]  设为true时, 轴线的值会显示在plot区域。该设置对于旋转值为0-89时不起作用 -->    
    </x>
    <y_left>                                                  <!-- 左Y轴的值 -->
      <enabled></enabled>                                     <!-- [true]  -->
      <reverse></reverse>                                     <!-- [false]  是否颠倒该轴的值。若为true,数值会从最大的数字开始-->    
      <rotate></rotate>                                       <!-- [0] (0 - 90) 旋转角度. 设置同上 -->
      <min></min>                                             <!-- [] (数字) 该轴的最小值,为空时自动计算 -->
      <max></max>                                             <!-- [] (数字) 该轴的最大值,为空时自动计算 -->
      <strict_min_max></strict_min_max>                       <!-- [false]  默认情况下,如果数据值大于定义的最大值(或小于最小值),最大值和最小值会改变。如果你不想这么做,设置该选项为true -->
      <frequency></frequency>                                 <!-- [1] (数字) 显示值的频率, 1 - 每个网格线旁边, 2 - 每隔一个网格线旁边.... -->
      <skip_first></skip_first>                               <!-- [true]  是否跳过第一个值 -->
      <skip_last></skip_last>                                 <!-- [false]  是否跳过最后一个值 -->
      <color></color>                                         <!-- [text_color]  --> 
      <text_size></text_size>                                 <!-- [text_size] (数字) -->
      <unit></unit>                                           <!-- [] (文字) y轴的值会被加上单位-->
      <unit_position></unit_position>                         <!-- [right] (left / right) 单位的位置 -->
      <integers_only></integers_only>                         <!-- [false]  如果为true,小数点会被省略 -->
      <inside></inside>                                       <!-- [false]  如果为true,Y轴的数值会被显示在plot区域内。该设置在旋转值为1-89时不起作用 -->
      <duration></duration>                                   <!-- [] (ss/mm/hh/DD) 如果要显示格式化的时间间隔而不是数字,必须在数据文件中设置间隔的单位。若数据文件中的值代表秒,此处设置为 "ss" -->
    </y_left>
    <y_right>                                                 
      <enabled></enabled>                                     
      <reverse></reverse>                                     
      <rotate></rotate>                                       
      <min></min>                                             
      <max></max>                                             
      <strict_min_max></strict_min_max>                       
      <frequency></frequency>                                 
      <skip_first></skip_first>                               
      <skip_last></skip_last>                                 
      <color></color>                                         
      <text_size></text_size>                                 
      <unit></unit>                                           
      <unit_position></unit_position>                         
      <integers_only></integers_only>                         
      <inside></inside>                                       
      <duration></duration>                                   
    </y_right>
  </values>
  
  <axes>                                                      <!-- 轴 -->
    <x>                                                       <!-- X 轴 -->
      <color></color>                                         <!-- [#000000]  -->
      <alpha></alpha>                                         <!-- [100] (0 - 100) -->
      <width></width>                                         <!-- [2] (数字) 线的粗细, 0 表示发际线 -->
      <tick_length></tick_length>                             <!-- [7] (数字) -->
    </x>
    <y_left>                                                  <!-- 左Y轴,必须指定至少一个图才可见 -->
      <type></type>                                           <!-- [line] (line, stacked, 100% stacked) -->    
      <color></color>                                         <!-- [#000000]  -->
      <alpha></alpha>                                         <!-- [100] (0 - 100) -->
      <width></width>                                         <!-- [2] (数字) 线的粗细, 0 表示发际线 -->
      <tick_length></tick_length>                             <!-- [7] (数字) -->
      <logarithmic></logarithmic>                             <!-- [false]  为true时,该轴将使用对数尺度,而不是线性-->
    </y_left>
    <y_right>                                                 <!-- 右Y轴,必须指定至少一个图才可见 -->
      <type></type>                                           <!-- [line] (line, stacked, 100% stacked) -->    
      <color></color>                                         <!-- [#000000]  -->
      <alpha></alpha>                                         <!-- [100] (0 - 100) -->
      <width></width>                                         <!-- [2] (数字) 线的粗细, 0 表示发际线 -->
      <tick_length></tick_length>                             <!-- [7] (数字) -->
      <logarithmic></logarithmic>                             <!-- [false] 为true时,该轴将使用对数尺度,而不是线性 -->
    </y_right>
  </axes>  
  
  <indicator>                                                 <!-- 指针 -->
    <enabled></enabled>                                       <!-- [true]  -->
    <zoomable></zoomable>                                     <!-- [true]  -->
    <color></color>                                           <!-- [#BBBB00] 线和X轴气球的背景颜色 -->
    <line_alpha></line_alpha>                                 <!-- [100] (0 - 100) -->
    <selection_color></selection_color>                       <!-- [#BBBB00]  -->
    <selection_alpha></selection_alpha>                       <!-- [25] (0 - 100) -->
    <x_balloon_enabled></x_balloon_enabled>                   <!-- [true]  -->
    <x_balloon_text_color></x_balloon_text_color>             <!-- [text_color]  -->
  </indicator>
    
  <balloon>                                                   
    <enabled></enabled>                                       <!-- [true]  -->
    <only_one></only_one>                                     <!-- [false] 如果为true,每次只能显示一个气球-->
    <on_off></on_off>                                         <!-- [true] (true/false)点击图例或折线的时候,是否可以开关Y轴的气球-->
    <color></color>                                           <!-- []  balloon 背景颜色. 默认graph.balloon_color  -->
    <alpha></alpha>                                           <!-- [] (0 - 100)气球的背景透明度,默认graph.balloon_alpha -->
    <text_color></text_color>                                 <!-- [] 默认graph.balloon_text_color -->
    <text_size></text_size>                                   <!-- [text_size] (数字) -->
    <max_width></max_width>                                   <!-- [] (数字) 默认plot区域宽度的一半 -->
    <corner_radius></corner_radius>                           <!-- [0] (数字)气球的圆角。大于0时,气球的箭头消失 -->
    <border_width></border_width>                             <!-- [0] (数字) -->
    <border_alpha></border_alpha>                             <!-- [balloon.alpha]  -->
    <border_color></border_color>                             <!-- [balloon.color]  -->
  </balloon>    
    
  <legend>                                                    <!-- 图例 -->
    <enabled></enabled>                                       <!-- [true]  -->
    <x></x>                                                   <!-- [] (数字/数字%/!数字) 默认为left margin -->
    <y></y>                                                   <!-- [] (数字/数字% / !数字) 默认为X轴下方20px -->
    <width></width>                                           <!-- [] (数字/数字%) 默认为plot区域的宽度 -->
    <max_columns></max_columns>                               <!-- [] (数字) 每行显示的图例个数 --> 
    <color></color>                                           <!-- [#FFFFFF] 背景颜色,可渐变 -->
    <alpha></alpha>                                           <!-- [0](0 - 100)背景alpha -->
    <border_color></border_color>                             
    <border_alpha></border_alpha>                             
    <text_color></text_color>                                 <!-- [text_color]  -->   
    <text_color_hover></text_color_hover>                     <!-- [#BBBB00]  -->    
    <text_size></text_size>                                   <!-- [text_size]-->
    <spacing></spacing>                                       <!-- [10] (数字) 图例间的垂直和水平间隙-->
    <margins></margins>                                       <!-- [0] 图例的边框和图例之间的距离,只有图例边框可见或图例背景色与图的背景色不同的时候才推荐使用-->    
    <graph_on_off></graph_on_off>                             <!-- [true]true会添加复选框-->
    <reverse_order></reverse_order>                           <!-- [false]是否将图例逆序 -->
    <align></align>                                           <!-- [left] (left/center/right) -->    
    <key>                                                     <!-- 图例前的方块 -->
      <size></size>                                           <!-- [16] -->
      <border_color></border_color>                           <!-- [] 为空表示无边框-->
      <key_mark_color></key_mark_color>                       <!-- [#FFFFFF]复选框中的钩的颜色 -->
    </key>
    <values>                                                  
      <enabled>true</enabled>                                 <!-- [false]默认不显示值,设置为true时会在图例后显示对应的值。 -->
      <width>44</width>                                       <!-- [80] 用于显示值的文本区的宽度 -->
      <align>left</align>                                     <!-- [right] (right/left) -->
      <text><![CDATA[: ${value}]]></text>                     <!-- [{value}] -->
     </values>
  </legend>
  
  <vertical_lines>                                            
    <width></width>                                           <!-- [0] (0 - 100) -->
    <alpha></alpha>                                           <!-- [100] (0 - 100) -->
    <clustered></clustered>                                   <!-- [false] 如果想要多个直方图紧连着,设置此处为true -->
    <mask></mask>                                             <!-- [true] 由于曲线图都是默认从轴线开始的,而且直方图的宽度也是大于0的,那么第一部分和最后一部分直方图就会超出plot区域的边界。此处设置为true就会切掉plot区域外的部分。 -->
  </vertical_lines>    
  
  <zoom_out_button>
    <x></x>                                                   <!-- [] (数字/数字%/!数字) x坐标,默认plot区域右侧 -->
    <y></y>                                                   <!-- [] (数字/数字%/!数字) y坐标,默认plot区域顶部 -->
    <color></color>                                           <!-- [#BBBB00]  背景颜色 -->
    <alpha></alpha>                                           <!-- [0] (0 - 100) 背景alpha -->
    <text_color></text_color>                                 <!-- [text_color] 按钮文字和放大镜图片的颜色 -->
    <text_color_hover></text_color_hover>                     <!-- [#BBBB00]  悬浮时的颜色 -->    
    <text_size></text_size>                                   <!-- [text_size]按钮字体大小 -->
    <text></text>                                             <!-- [Show all]-->    
  </zoom_out_button> 
   
  <help>                                                      <!-- 帮助按钮和气球-->  
    <button>                                                  <!-- 帮助按钮只有在定义了气球文本时才可见 -->
      <x></x>                                                 <!-- [] (数字 / 数字% / !数字) 帮助按钮的x坐标,未定义,与图表区域右边对齐 -->
      <y></y>                                                 <!-- [] (数字 / 数字% / !数字) 帮助按钮的Y坐标,未定义,与图表区域上方对齐-->
      <color></color>                                         <!-- [#000000]  背景颜色 -->
      <alpha></alpha>                                         <!-- [100] (0 - 100) 背景alpha -->
      <text_color></text_color>                               <!-- [#FFFFFF]  按钮文本颜色 -->
      <text_color_hover></text_color_hover>                   <!-- [#BBBB00](十六进制颜色代码) 悬浮按钮文本颜色 -->    
      <text_size></text_size>                                 <!-- [] (数字) 按钮字体大小 -->
      <text></text>                                           <!-- [?] (text) -->                                 
    </button>    
    <balloon>                                                 <!-- help balloon -->
      <color></color>                                         <!-- [#000000]  背景颜色 -->
      <alpha></alpha>                                         <!-- [100] (0 - 100) 背景alpha -->
      <width></width>                                         <!-- [300] (数字) -->
      <text_color></text_color>                               <!-- [#FFFFFF]  按钮文本颜色 -->
      <text_size></text_size>                                 <!-- [] (数字) 按钮字体大小 -->
      <text><![CDATA[]]></text>                               <!-- [] (text) 可使用下列html标签<b>, <i>, <u>, <font>, <br/>。-->
    </balloon>    
  </help> 
  
  <export_as_image>                                           <!-- web服务器上有效 -->
    <file></file>                                             <!-- [] (文件名)如果此处设置了文件名,上下文菜单会显示"Export as image"。-->
    <target></target>                                         <!-- [] (_blank, _top ...) 目标窗口 -->
    <x></x>                                                   <!-- [0] (数字/数字%/!数字)X坐标 -->
    <y></y>                                                   <!-- [] (数字/数字%/!数字) Y坐标"Collecting data" text。默认flash动画的底部 -->
    <color></color>                                           <!-- [#BBBB00]  背景颜色-->
    <alpha></alpha>                                           <!-- [0] (0 - 100) 背景alpha -->
    <text_color></text_color>                                 <!-- [text_color]  -->
    <text_size></text_size>                                   <!-- [text_size] -->
  </export_as_image>
  
  <error_messages>                                            <!-- "error_messages" 设置适用于所有错误信息,但是,如果找不到setting文件,不会显示该信息 -->
    <enabled></enabled>                                       <!-- [true]  -->
    <x></x>                                                   <!-- [] (数字 / 数字% / !数字) 错误信息的X坐标 -->
    <y></y>                                                   <!-- [] (数字 / 数字% / !数字) 错误信息的Y坐标-->
    <color></color>                                           <!-- [#BBBB00]  错误信息背景颜色,可渐变 -->
    <alpha></alpha>                                           <!-- [100] (0 - 100) 背景alpha -->
    <text_color></text_color>                                 <!-- [#FFFFFF]-->
    <text_size></text_size>                                   <!-- [text_size] (数字) -->
  </error_messages>  
  
  <strings>
    <no_data></no_data>                                       <!-- [No data for selected period]如数据时显示的信息 -->
    <export_as_image></export_as_image>                       <!-- [Export as image] 邮件菜单文本 -->
    <error_in_data_file></error_in_data_file>                 <!-- [Error in data file] 如果数据文件有误或为空时显示此信息。"There is no data"表示数据文件中应该有至少一个space。若找不到数据文件,显示文本为"error loading file" -->
    <collecting_data></collecting_data>                       <!-- [Collecting data] 导出图片时显示该文本 -->
    <wrong_zoom_value></wrong_zoom_value>                     <!-- [Incorrect values] 如果通过JS设置缩放,而且开始值或结束值在series中没有找到的话,就会显示该文本-->
    <!-- 下面的字符串只有在轴的值为时段时才有意义 -->
    <ss></ss>                                                <!-- [] 秒的单位 -->
    <mm></mm>                                                <!-- [:] 分的单位 -->
    <hh></hh>                                                <!-- [:] 小时的单位 -->
    <DD></DD>                                                <!-- [d. ] 天的单位 -->        
  </strings>
  
  <context_menu>                                              <!-- 上下文按钮用来控制右键菜单项。你可以自定义这些菜单-->                                                              
                                                              <!-- "function_name"指定调用的Javascript函数,可以传递参数。 -->
                                                              <!-- "title" 设置菜单项的文本。请不要使用这些:Show all, Zoom in, Zoom out, Print, Settings... -->
                                                              <!-- 可自定义多个按钮。将下面这行代码取消注释就可以激活菜单项 -->
     
     <!-- <menu function_name="printChart" title="打印图表"></menu> -->
     <default_items>
       <zoom></zoom>                                          <!-- [false] 是否显示flash播放器的缩放菜单-->
       <print></print>                                        <!-- [true] 是否显示flash播放器的打印菜单-->
     </default_items>
  </context_menu>  
  
  
  
  
  <labels>                                                  
                                                              <!-- 可以添加任意多的label。也可以在数据文件中定义。 -->
    <label lid="0">
      <x></x>                                                 <!-- [0] (数字/百分比/!数字) -->
      <y>20</y>                                               <!-- [0] (数字/百分比/!数字) -->
      <rotate></rotate>                                       <!-- [false]  -->
      <width>520</width>                                      <!-- [] (数字/百分比)如果为空,会自动换行-->
      <align>center</align>                                   <!-- [left] (left / center / right) -->  
      <text_color></text_color>                               <!-- [text_color]  标题文本颜色 -->
      <text_size></text_size>                                 <!-- [text_size]字体大小 -->
      <text>                                                  <!-- [] 支持的html标签有<b>,<i>,<u>,<font>,<a href="">,<br/>-->
        <![CDATA[<b>标题</b>]]>
      </text>        
    </label>    
  
  </labels>
  
  
  <graphs>                                                    <!-- 这些设置也可以在数据文件中指定。 -->
                                                              <!-- 如果你不想降数据与其他参数弄混,建议您在此设置graph -->
                                                              <!-- 有多少折线,就复制多少<graph>...</graph>,然后分别编辑设置 -->
                                                              <!-- 如果这里和数据文件中都定义了,使用数据文件中定义的-->
    <graph gid="1">                                           <!-- 如果使用XML数据类型,graph的"gid"必须与数据文件中的graph "gid" 匹配 -->
                                                            
      <axis>left</axis>                                       <!-- [left](left/right)指定使用Y轴 -->
      <title>Nominal</title>                                  <!-- [] (graph标题) -->
      <color>#FFCC00</color>                                  <!-- [] 如果没有定义,使用下面数组中的颜色 
#FF0000, #0000FF, #00FF00, #FF9900, #CC00CC, #00CCCC, #33FF00, #990000, #000066 -->
      <color_hover></color_hover>                             <!-- [#BBBB00]  -->
      <line_alpha></line_alpha>                               <!-- [100] -->
      <line_width></line_width>                               <!-- [0] -->                                    
      <fill_alpha></fill_alpha>                               <!-- [0] (0 - 100)如果是面积图,要大于0 -->
      <fill_color></fill_color>                               <!-- [grpah.color] ,可渐变 -->
      <balloon_color></balloon_color>                         <!-- [graph color]  -->
      <balloon_alpha></balloon_alpha>                         <!-- [100] (0 - 100) -->      
      <balloon_text_color></balloon_text_color>               <!-- [#FFFFFF]  -->
      <bullet></bullet>                                       <!-- [] (square, round, square_outlined, round_outlined, 
square_outline, round_outline, square_outline, round_outline, filename.swf)
可以使用预定义的bullet,也可以加载自定义的bullet。为空表示不需要bullet。 
Outlined bullets使用plot区域的color -->
      <bullet_size></bullet_size>                             <!-- [8](数字) 只对预定义的bullet起作用 -->
      <bullet_color></bullet_color>                           <!-- [graph color]  只对预定义的(square and round)bullet起作用 -->
      <bullet_alpha></bullet_alpha>                           <!-- [graph alpha] 默认与graph的alpha相同 -->      
      <hidden></hidden>                                       <!-- [false]  除非选中图例对应的复选框,否则不可见 -->
      <selected></selected>                                   <!-- [true] 如果为true,气球的说明值会在plot区域显示 -->
      <balloon_text>
        <![CDATA[${value}]]>                                  <!-- [<b>{value}</b><br>{description}] ({title} {value} {series} {description} {percents}) 可以自定义气球文本: 也可以添加自定义文本或html代码-->
      </balloon_text>
      <data_labels>
        <![CDATA[]]>                                          <!-- [] ({title} {value} {series} {description} {percents}) 数据标签会在plot区域的点的附近展示 -->
                                                              <!-- 如果plot区域的数据点多于hide_bullets_count个,数据标签将不可见 -->                                                              
      </data_labels>  
      <data_labels_text_color></data_labels_text_color>       <!-- [text_color]  --> 
      <data_labels_text_size></data_labels_text_size>         <!-- [text_size] (数字) -->
      <data_labels_position></data_labels_position>           <!-- [above] (below/above) -->            
      <vertical_lines></vertical_lines>                       <!-- [false] 是否描绘柱状图。如果想只显示柱状图,将line_alpha设置为0 -->
      <visible_in_legend></visible_in_legend>                 <!-- [true] 是否为该图显示图例项 -->
    </graph>
    
    <graph gid="2">                                           <!-- 不知道这里是做什么用的 -->            
      <axis>left</axis>
      <title>Inflation adjusted</title>              
      <color>#999999</color>
      <selected>false</selected>                     
      <balloon_text>
        <![CDATA[${value}]]>
      </balloon_text>
    </graph>
  </graphs>  
  
<guides>                                                 <!--引线是一条穿过plot区域的直线。也可填充颜色 -->
<max_min></max_min>                                       <!-- [false] 计算最大最小值时是否考虑引线的值 -->
<guide>                                                   <!-- 可以多条引线.引线也可以在数据xml文件里设置,使用与这里相同的语法 -->
  <axis></axis>                                           <!-- [left] (left / right) Y轴的引线。必须有至少一个graph引线才能显示 --> 
  <start_value></start_value>                             <!-- 下引线位置 -->
  <end_value></end_value>                                 <!-- 上引线位置。如果上下引线都设置,且fill_alpha > 0,那么上下引线之间的区域会被填充颜色 -->
  <title></title>                                         <!-- []引线旁边显示的文字 -->
  <width></width>                                         
  <color></color>                                         
  <alpha></alpha>                                         
  <fill_color></fill_color>                               <!-- [guide.color] 填充色,可渐变 -->
  <fill_alpha></fill_alpha>                               <!-- [0]填充色透明度-->                                  
  <inside></inside>                                       <!-- [values.y_{axis}.inside] 是否将title置于plot区域内 -->
  <centered></centered>                                   <!-- [true] 如果定义了开始和结束值,title可以置于二者之间。设置为false,则置于start_value附近 -->
  <rotate></rotate>                                       <!-- [values.y_{axis}.rotate](0 - 90) title的旋转角度 -->
  <text_size></text_size>                                 <!-- [values.y_{axis}.text_size] (数字) -->
  <text_color></text_color>                               <!-- [values.y_{axis}.color](十六进制颜色代码) -->
     <dashed></dashed>                                       <!-- [false] 是否显示虚线  -->
     <dash_length></dash_length>                             <!-- [5]每个虚线段的长度 -->      
</guide>  
</guides>

<!-- 数据也可以在配置文件中设置。只需将csv或xml格式的数据置于<data></data>之间 -->
<!--<data>
</data> --> 
</settings>




  amCharts完全免费,使用很简单,完全不需要懂任何的编程语言,我们只需要画葫芦照搬三个步骤即可:



      1、根据它提供的xml样板文件,编辑数据,这是Flash charts图的数据源,格式非常的简单。


      2、调用amCharts提供的SWFObject.js文件,如:
      <script type="text/javascript" src="/amline_1.6.3.0/amline/SWFObject.js"></script>


      3、在网页里调用Flash控件,如:
      <script type="text/javascript">
       // <![CDATA[  
                  var so = new SWFObject("/lib/ampie/ampie.swf?cache=0", "ampie", "640", "420", "8", "#FFFFFF");
                  so.addVariable("path", "/lib/files/")                  
                  so.addVariable("settings_file", escape("/lib/ampie/settings/2d-pie-chart.xml"));
                  so.addVariable('data_file', escape('/lib/ampie/data/2d-pie-chart.txt'));                 
                  so.addVariable("preloader_color", "#999999");
                  so.addParam("wmode", "opaque");
                  so.write("flashcontent");
      // ]]>
      </script>

      控件里的数据根据需要而改变


<script type="text/javascript"> 
    var params = 
    {
        bgcolor:"#FFFFFF"      
    };
    var params={
        wmode:"opaque"
    };//这个是增加属性,让FLASH不会浮在其他元素的上面
    var flashVars = 
    {
        path: "{{ url_for('frontend.static',filename='snmp_charts/amline') }}",
        settings_file: encodeURIComponent("{{ url_for('frontend.static',filename='snmp_charts/chart_settings/' + snmp_line + '.xml') }}"),
        chart_data: "{{ snmp_data }}"
    };
    {
        swfobject.embedSWF("{{ url_for('frontend.static',filename='snmp_charts/amline/amline.swf') }}", "{{ html_id }}", "{{width}}", "{{height}}", "8.0.0", "{{ url_for('frontend.static',filename='snmp_charts/expressInstall.swf') }}", flashVars, params);
    }
</script>

调整大小。必需长宽一起调,不然不能生效




    <graph gid="1">    
      <title>登陆数</title>
<fill_alpha>60</fill_alpha>   背景色,0只剩下一条线
      <balloon_text_color>#000000</balloon_text_color> 
      <color>#FFCC00</color>   
      <balloon_text> 
        <![CDATA[{value} ]]> 
      </balloon_text> 
      <line_width>2</line_width> 线条大小
      <bullet>round</bullet> 线条圆点形状
      <bullet_size>1</bullet_size>        线条圆点大小
    </graph> 
frequency时间间隔'

<values><y_left><reverse>true</reverse></y_left></values> 反转,最小的值在上面,最在的值在下面

阅读更多
个人分类: js
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭