amCharts使用方式

最新推荐文章于 2024-06-25 09:44:48 发布

少年强则国强

最新推荐文章于 2024-06-25 09:44:48 发布

阅读量8k

点赞数

分类专栏： js 文章标签： plot graph border flash csv image

本文链接：https://blog.csdn.net/qq435792305/article/details/7320747

版权

这篇博客介绍了如何使用amCharts，一个免费且无需编程技能的图表库。通过简单的三个步骤，包括设置数据源、调整图表属性以及定义图形样式，用户可以创建动态图表。示例中展示了调整图表大小、颜色、线条样式以及数据反向显示的方法。

摘要由CSDN通过智能技术生成

<?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_r