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 Playerstrong>

 

 div>

 

 

 

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

 

 

<settings>全局根标签

 

<legend_position>rightlegend_position>图例位置

 

<legend_width>200legend_width>图例宽度

 

<margins>12margins>边距       

 

<text_color>FF7F00text_color>文字颜色

 

<text_size>14text_size>文字大小                    

 

<max_series>100max_series>最多线条数

 

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

 

<number_format>数据格式

 

  <decimal_separator>.decimal_separator>小数点符号

 

  <digits_after_decimal>

 

    <data>2data>

 

  digits_after_decimal>

 

  <letters>

 

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

 

     <letter number="1000000000">Bletter>最大单位

 

  letters>  

 

number_format>

 

<data_sets>

 

   <data_set>数据源配置

 

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

 

       <csv>

 

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

 

         <separator>,separator>数据分隔符

 

         <date_format>YYYY-MM-DDdate_format>日期格式

 

         <decimal_separator>.decimal_separator>小数点符号

 

               <columns>更数配置

 

                   <column>datecolumn>列名

 

                   <column>closePricecolumn>

 

                   <column>saacolumn>

 

                   <column>taaCollectcolumn>

 

                   <column>taaTWCollectcolumn>

 

                   <column>scalecolumn>

 

              columns>

 

       csv>

 

    data_set>

 

data_sets>

 

 

 

 

 

 

 

 

 

 

 

<charts>

 

    <chart>图形框配置

 

    <bg_color>000000bg_color>背景色

 

    <border_color>000000border_color>边框颜色

 

    <border_alpha>100border_alpha>边框过滤度

 

    <grid>图形框中的分隔线

 

    <x>X轴上的分隔线

 

        <dashed>truedashed>是否打散

 

    x>

 

    <y_left>Y轴上的分隔线

 

        <color>cccccccolor>分隔线颜色

 

        <alpha>100alpha>过滤度

 

        <dashed>truedashed>是否打散

 

    y_left>

 

    grid>

 

     <values>

 

       <x>X轴上的数值

 

             <enabled>trueenabled>是否显示

 

             <bg_color>000000bg_color>背景色

 

         x>

 

     <y_left>Y轴上的数值

 

       <enabled>trueenabled>是否显示

 

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

 

       <unit_position>rightunit_position>Y轴数值单位位置

 

     y_left>

 

     values>

 

    <comparing>

 

       <calculate>falsecalculate>是否重新计算

 

    comparing>

 

    <legend>图例设置

 

        <show_date>trueshow_date>是否显示

 

        <graph_on_off>truegraph_on_off>默认

 

        <fade_others_to>15fade_others_to>默认

 

    <value_color>FF7F00value_color>数值颜色

 

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

 

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

 

    legend>

 

 

 

 

 

    <graphs>

 

        <graph>线条配置

 

          <color>00ff00color>线条颜色

 

          <title>公司SAAtitle>标题

 

            <axis>leftaxis>Y轴位置

 

            <type>linetype>线条类型

 

            <smoothed>truesmoothed>是否光滑

 

           

 

        <bullet_alpha>0bullet_alpha>过滤度

 

        <bullet_position>middlebullet_position>数据结点位置

 

        <width>2width>线条宽度

 

            <data_sources>数据源

 

              <close>saaclose>数据列名称

 

            data_sources>

 

            <cursor_color>ffffffcursor_color>鼠标聚焦颜色

 

          <fill_alpha>0fill_alpha>过滤度

 

            <legend>图例数据配置

 

              <date key="true" title="true">{close}%]]>date>

 

            <period key='true' title='true'>{close}%]]>period>

 

            legend>

 

        graph>

 

       

 

        <graph>

 

            <title>投委会TAAtitle>

 

          <color>ff00ffcolor>

 

            <axis>leftaxis>

 

            <smoothed>truesmoothed>

 

           

 

        <bullet_alpha>0bullet_alpha>

 

        <bullet_position>middlebullet_position>

 

        <width>2width>

 

            <data_sources>

 

              <close>taaTWCollectclose>

 

            data_sources>

 

            <cursor_color>ffffffcursor_color>

 

          <fill_alpha>0fill_alpha>

 

            <legend>

 

              <date key="true" title="true">{close}%]]>date>

 

            <period key='true' title='true'>{close}%]]>period>

 

            legend>

 

        graph>   

 

        <graph>

 

          <color>ffff00color>

 

          <title>TAA小组title>

 

            <axis>leftaxis>

 

            <type>linetype>

 

            <smoothed>truesmoothed>

 

           

 

        <bullet_alpha>0bullet_alpha>

 

        <bullet_position>middlebullet_position>

 

        <width>2width>

 

            <data_sources>

 

              <close>taaCollectclose>

 

            data_sources>

 

            <cursor_color>ffffffcursor_color>

 

          <fill_alpha>0fill_alpha>

 

            <legend>

 

              <date key="true" title="true">{close}%]]>date>

 

            <period key='true' title='true'>{close}%]]>period>

 

            legend>

 

        graph>

 

        <graph>

 

            <title><%=stockName%>title>

 

          <color>ff0000color>

 

            <axis>rightaxis>

 

            <type>linetype>

 

            <smoothed>truesmoothed>

 

           

 

        <bullet_alpha>0bullet_alpha>

 

        <bullet_position>middlebullet_position>

 

        <width>2width>

 

            <data_sources>

 

              <close>closePriceclose>

 

            data_sources>

 

            <cursor_color>ffffffcursor_color>

 

          <fill_alpha>0fill_alpha>

 

            <legend>

 

                  <value_color>FF7F00value_color>

 

              <date key="true" title="true">{close}]]>date>

 

            <period key='true' title='true'>{close}]]>period>

 

            legend>

 

        graph>

 

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

 

        <graph>

 

            <title><%=fullName%>title>

 

            <color>00ffffcolor>

 

            <axis>leftaxis>

 

            <type>linetype>

 

            <smoothed>truesmoothed>

 

           

 

        <bullet_alpha>0bullet_alpha>

 

        <bullet_position>middlebullet_position>

 

        <width>2width>

 

            <data_sources>

 

              <close>scaleclose>

 

      data_sources>

 

            <cursor_color>ffffffcursor_color>

 

          <fill_alpha>0fill_alpha>

 

        <legend>

 

        <date key='true' title='true'>{close}%]]>date>

 

        <period key='true' title='true'>{close}%]]>period>

 

      legend>    

 

        graph>

 

<%}%>

 

 

 

    graphs>

 

    chart>

 

charts>

 

<data_set_selector>数据选择器

 

    <enabled>falseenabled>

 

  <width>130width> 宽度

 

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

 

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

 

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

 

  <balloon_text>

 

      {title}
{description}
]]>
鼠标移上去弹出框显示内容

 

  balloon_text>

 

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

 

      <bg_color>333333bg_color>背景色

 

      <bg_color_selected>333333bg_color_selected>选中颜色

 

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

 

      <scroller_color>ff0000scroller_color>滚动条颜色

 

    drop_down>

 

data_set_selector>

 

 

 

 

 

 

 

 

 

  <balloon>弹出小窗设置

 

    <bg_color>ffffffbg_color>背景色

 

    <text_color>FF7F00text_color>字体颜色

 

    <bg_alpha>100bg_alpha>过滤度

 

    <border_color>000000border_color>边框颜色

 

  balloon>

 

  <period_selector>日期区域设置

 

    <button>

 

      <bg_color>1C1A1Cbg_color>背景色

 

      <bg_color_selected>ffffffbg_color_selected>选中时背景色

 

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

 

    button>

 

    <input>

 

      <bg_color>1C1A1Cbg_color>输入框背景色

 

    input>

 

        <periods>       

 

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

 

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

 

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

 

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

 

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

 

        periods>

 

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

 

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

 

  period_selector>

 

  <header>图头

 

    <enabled>falseenabled>是否显示

 

      <text>

 

          {title}]]>图头文字

 

      text>

 

      <text_size>14text_size>文字大小

 

  header>

 

 

 

 

 

  <plot_area>

 

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

 

  plot_area>

 

 

 

  <scroller>

 

    <graph_data_source>closegraph_data_source>数据源

 

    <resize_button_style>arrowresize_button_style>播放图标样式

 

    <resize_button_color>002b6dresize_button_color>播放图标颜色

 

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

 

    <playback>

 

      <enabled>trueenabled>是否允许

 

      <speed>3speed>滚动速度

 

    playback>

 

    <selected_color>1C1A1Cselected_color>选中区域颜色

 

    <bg_color>666666bg_color>背景色

 

  scroller>

 

 

 

  <background>

 

    <color>000000color>整体背景色

 

    <alpha>100alpha>过滤度

 

  background> 

 

 

 

  <date_formats>日期显示格式

 

    <x_axis>X轴上的日期

 

        <days>MMDDdays>天样式

 

      <months>MMmonths>月样式

 

      <years>YYYYyears>年样式

 

    x_axis>

 

    <legend>图例上的日期

 

      <days>YYYYMMDDdays>天样式

 

      <months>MMmonths>月样式

 

      <weeks>YYYYMMDDweeks>年样式

 

    legend>

 

  date_formats>

 

settings>

 

 

 

你可能感兴趣的:(amcharts)