amcharts学习总结

 

 

amchart配置备忘

 

amchart的原理是通过一个主html文件(例如:index.html),包含一段JS代码,这段JS代码将调用相关的图形的SWF文件(amcolumn.swf),数据源我采用的是XML的方式(例如:amcolumn_data.xml),然后通过一个主设置文件(amcolumn_settings.xml,从而产生图形显示的。

 

拿柱形图来说,就是通过index.html主页面将amcolumn_data.xml的数据通过amcolumn.swf来进行显示,而amcolumn_settings.xml是对所产生图形的配置进行设置的文件,包括颜色,宽度等。

 

 

 

<body>

 

 <div id="flashcontent">

 

  <strong>You need to upgrade your Flash Player</strong>

 

 </div>

 

 <script type="text/javascript" src="amstock/swfobject.js"></script>

 

 <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("xxx.xml")); // 配置文件

 

   so.addVariable("preloader_color", "#000000"); // 加载时显示的颜色

 

  so.write("flashcontent"); // flashcontent位置写入flash插入的HTML

 

 </script>

 

</body>

 

 

 

 

 

<?xml version="1.0" encoding="UTF-8"?>

 

<!-- Only the settings with values not equal to defaults are in this file. If you want to see the

 

full list of available settings, check the amstock_settings.xml file in the amstock folder. -->

 

<settings>全局根标签

 

<legend_position>right</legend_position>图例位置

 

<legend_width>200</legend_width>图例宽度

 

<margins>12</margins>边距       

 

<text_color>FF7F00</text_color>文字颜色

 

<text_size>14</text_size>文字大小                    

 

<max_series>100</max_series>最多线条数

 

<start_on_axis>1</start_on_axis>是否从原点开始

 

<number_format>数据格式

 

  <decimal_separator>.</decimal_separator>小数点符号

 

  <digits_after_decimal>

 

    <data>2</data>

 

  </digits_after_decimal>

 

  <letters>

 

     <letter number="1"></letter>最小单位

 

     <letter number="1000000000">B</letter>最大单位

 

  </letters>  

 

</number_format>

 

<data_sets>

 

   <data_set>数据源配置

 

       <file_name>/taa/rpc/data_suggestion.jsp?entry=<%=taaGroupUserId%>_<%=category%></file_name> 数据源文件路径

 

       <csv>

 

         <reverse>true</reverse>要设置为true否则下面的日期滚动区域会乱掉

 

         <separator>,</separator>数据分隔符

 

         <date_format>YYYY-MM-DD</date_format>日期格式

 

         <decimal_separator>.</decimal_separator>小数点符号

 

               <columns>更数配置

 

                   <column>date</column>列名

 

                   <column>closePrice</column>

 

                   <column>saa</column>

 

                   <column>taaCollect</column>

 

                   <column>taaTWCollect</column>

 

                   <column>scale</column>

 

              </columns>

 

       </csv>

 

    </data_set>

 

</data_sets>

 

 

 

 

 

 

 

 

 

 

 

<charts>

 

    <chart>图形框配置

 

    <bg_color>000000</bg_color>背景色

 

    <border_color>000000</border_color>边框颜色

 

    <border_alpha>100</border_alpha>边框过滤度

 

    <grid>图形框中的分隔线

 

    <x>X轴上的分隔线

 

        <dashed>true</dashed>是否打散

 

    </x>

 

    <y_left>Y轴上的分隔线

 

        <color>cccccc</color>分隔线颜色

 

        <alpha>100</alpha>过滤度

 

        <dashed>true</dashed>是否打散

 

    </y_left>

 

    </grid>

 

     <values>

 

       <x>X轴上的数值

 

             <enabled>true</enabled>是否显示

 

             <bg_color>000000</bg_color>背景色

 

         </x>

 

     <y_left>Y轴上的数值

 

       <enabled>true</enabled>是否显示

 

       <unit>%</unit>Y轴数值单位

 

       <unit_position>right</unit_position>Y轴数值单位位置

 

     </y_left>

 

     </values>

 

    <comparing>

 

       <calculate>false</calculate>是否重新计算

 

    </comparing>

 

    <legend>图例设置

 

        <show_date>true</show_date>是否显示

 

        <graph_on_off>true</graph_on_off>默认

 

        <fade_others_to>15</fade_others_to>默认

 

    <value_color>FF7F00</value_color>数值颜色

 

    <positive_color>ff0000</positive_color>大于0%显示的颜色

 

    <negative_color>00ff00</negative_color>小于0%显示的颜色

 

    </legend>

 

 

 

 

 

    <graphs>

 

        <graph>线条配置

 

          <color>00ff00</color>线条颜色

 

          <title>公司SAA</title>标题

 

            <axis>left</axis>Y轴位置

 

            <type>line</type>线条类型

 

            <smoothed>true</smoothed>是否光滑

 

            <!--

 

            <bullet>round</bullet>数据结点样式

 

            -->

 

        <bullet_alpha>0</bullet_alpha>过滤度

 

        <bullet_position>middle</bullet_position>数据结点位置

 

        <width>2</width>线条宽度

 

            <data_sources>数据源

 

              <close>saa</close>数据列名称

 

            </data_sources>

 

            <cursor_color>ffffff</cursor_color>鼠标聚焦颜色

 

          <fill_alpha>0</fill_alpha>过滤度

 

            <legend>图例数据配置

 

              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>

 

            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>

 

            </legend>

 

        </graph>

 

       

 

        <graph>

 

            <title>投委会TAA</title>

 

          <color>ff00ff</color>

 

            <axis>left</axis>

 

            <smoothed>true</smoothed>

 

            <!--

 

            <bullet>round</bullet>

 

            -->

 

        <bullet_alpha>0</bullet_alpha>

 

        <bullet_position>middle</bullet_position>

 

        <width>2</width>

 

            <data_sources>

 

              <close>taaTWCollect</close>

 

            </data_sources>

 

            <cursor_color>ffffff</cursor_color>

 

          <fill_alpha>0</fill_alpha>

 

            <legend>

 

              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>

 

            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>

 

            </legend>

 

        </graph>   

 

        <graph>

 

          <color>ffff00</color>

 

          <title>TAA小组</title>

 

            <axis>left</axis>

 

            <type>line</type>

 

            <smoothed>true</smoothed>

 

            <!--

 

            <bullet>round</bullet>

 

            -->

 

        <bullet_alpha>0</bullet_alpha>

 

        <bullet_position>middle</bullet_position>

 

        <width>2</width>

 

            <data_sources>

 

              <close>taaCollect</close>

 

            </data_sources>

 

            <cursor_color>ffffff</cursor_color>

 

          <fill_alpha>0</fill_alpha>

 

            <legend>

 

              <date key="true" title="true"><![CDATA[<b>{close}%</b>]]></date>

 

            <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>

 

            </legend>

 

        </graph>

 

        <graph>

 

            <title><%=stockName%></title>

 

          <color>ff0000</color>

 

            <axis>right</axis>

 

            <type>line</type>

 

            <smoothed>true</smoothed>

 

            <!--

 

            <bullet>round</bullet>

 

            -->

 

        <bullet_alpha>0</bullet_alpha>

 

        <bullet_position>middle</bullet_position>

 

        <width>2</width>

 

            <data_sources>

 

              <close>closePrice</close>

 

            </data_sources>

 

            <cursor_color>ffffff</cursor_color>

 

          <fill_alpha>0</fill_alpha>

 

            <legend>

 

                  <value_color>FF7F00</value_color>

 

              <date key="true" title="true"><![CDATA[<b>{close}</b>]]></date>

 

            <period key='true' title='true'><![CDATA[<b>{close}</b>]]></period>

 

            </legend>

 

        </graph>

 

<%if(!taaGroupUserId.equals("0")){%>

 

        <graph>

 

            <title><%=fullName%></title>

 

            <color>00ffff</color>

 

            <axis>left</axis>

 

            <type>line</type>

 

            <smoothed>true</smoothed>

 

            <!--

 

            <bullet>round</bullet>

 

            -->

 

        <bullet_alpha>0</bullet_alpha>

 

        <bullet_position>middle</bullet_position>

 

        <width>2</width>

 

            <data_sources>

 

              <close>scale</close>

 

      </data_sources>

 

            <cursor_color>ffffff</cursor_color>

 

          <fill_alpha>0</fill_alpha>

 

        <legend>

 

        <date key='true' title='true'><![CDATA[<b>{close}%</b>]]></date>

 

        <period key='true' title='true'><![CDATA[<b>{close}%</b>]]></period>

 

      </legend>    

 

        </graph>

 

<%}%>

 

 

 

    </graphs>

 

    </chart>

 

</charts>

 

<data_set_selector>数据选择器

 

    <enabled>false</enabled>

 

  <width>130</width> 宽度

 

  <max_comparing_count>30</max_comparing_count>最多比较个数

 

  <main_drop_down_title>选择:</main_drop_down_title>选择框名称

 

  <compare_list_box_title>比较:</compare_list_box_title>下拉比较框名称

 

  <balloon_text>

 

      <![CDATA[ <b>{title}</b><br>{description}]]>鼠标移上去弹出框显示内容

 

  </balloon_text>

 

    <drop_down>下拉比较框样式设置

 

      <bg_color>333333</bg_color>背景色

 

      <bg_color_selected>333333</bg_color_selected>选中颜色

 

      <bg_color_hover>ffffff</bg_color_hover>鼠标移上去显示颜色

 

      <scroller_color>ff0000</scroller_color>滚动条颜色

 

    </drop_down>

 

</data_set_selector>

 

 

 

 

 

 

 

 

 

  <balloon>弹出小窗设置

 

    <bg_color>ffffff</bg_color>背景色

 

    <text_color>FF7F00</text_color>字体颜色

 

    <bg_alpha>100</bg_alpha>过滤度

 

    <border_color>000000</border_color>边框颜色

 

  </balloon>

 

  <period_selector>日期区域设置

 

    <button>

 

      <bg_color>1C1A1C</bg_color>背景色

 

      <bg_color_selected>ffffff</bg_color_selected>选中时背景色

 

      <bg_color_hover>00FF99</bg_color_hover>鼠标移上去背景色

 

    </button>

 

    <input>

 

      <bg_color>1C1A1C</bg_color>输入框背景色

 

    </input>

 

        <periods>       

 

      <period type="DD" count="10">10</period>

 

        <period type="MM" count="1" selected="true">1</period>

 

        <period type="MM" count="3">3</period>

 

        <period type="YYYY" count="1">1</period>     

 

        <period type="MAX">最大</period>

 

        </periods>

 

        <periods_title>缩放:</periods_title>缩放区域名称

 

        <custom_period_title>自定义区间:</custom_period_title>自定义区间名称

 

  </period_selector>

 

  <header>图头

 

    <enabled>false</enabled>是否显示

 

      <text>

 

          <![CDATA[ <b>{title}</b>]]>图头文字

 

      </text>

 

      <text_size>14</text_size>文字大小

 

  </header>

 

 

 

 

 

  <plot_area>

 

    <border_color>1C1A1C</border_color>选中区域边框颜色

 

  </plot_area>

 

 

 

  <scroller>

 

    <graph_data_source>close</graph_data_source>数据源

 

    <resize_button_style>arrow</resize_button_style>播放图标样式

 

    <resize_button_color>002b6d</resize_button_color>播放图标颜色

 

    <graph_selected_fill_alpha>100</graph_selected_fill_alpha>选中区域过滤度

 

    <playback>

 

      <enabled>true</enabled>是否允许

 

      <speed>3</speed>滚动速度

 

    </playback>

 

    <selected_color>1C1A1C</selected_color>选中区域颜色

 

    <bg_color>666666</bg_color>背景色

 

  </scroller>

 

 

 

  <background>

 

    <color>000000</color>整体背景色

 

    <alpha>100</alpha>过滤度

 

  </background> 

 

 

 

  <date_formats>日期显示格式

 

    <x_axis>X轴上的日期

 

        <days>MMDD</days>天样式

 

      <months>MM</months>月样式

 

      <years>YYYY</years>年样式

 

    </x_axis>

 

    <legend>图例上的日期

 

      <days>YYYYMMDD</days>天样式

 

      <months>MM</months>月样式

 

      <weeks>YYYYMMDD</weeks>年样式

 

    </legend>

 

  </date_formats>

 

</settings>

 

 

 

你可能感兴趣的:(amcharts)