amCharts实现股票行情分时线及日K线

Amcharts是一组Flash图表，你可以免费使用在你的网站和基于网络的产品（非开源）。 Amcharts可以从简单的CSV或XML文件提取数据，也可以从动态数据读取生成，比如PHP, .NET, Ruby on Rails和Perl，以及其他许多编程语言。使用时的重点是在配置amstock_settings.xml来控制图形的输出.

分时线配置.

<?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>
  <margins>0</margins>            
  <max_series>0</max_series>              
  
  <js_enabled>0</js_enabled>
  <interactive>1</interactive> 
  <disable_custom_cursors>1</disable_custom_cursors>
    
  <max_grid_count>30</max_grid_count> 
  <number_format>  
    <letters>
       <letter number="1000">K</letter>
       <letter number="1000000">M</letter>
       <letter number="1000000000">B</letter>
    </letters>      
  </number_format>
  <data_reloading>
       <interval>1</interval> 
       <show_preloader>0</show_preloader>
  </data_reloading>
  
  
                          
  <number_format>  
      <decimal_separator>.</decimal_separator>
      <thousand_separator>,</thousand_separator>
  </number_format>
  
  <data_sets> 
    <data_set did="0">
       <title>Stock</title>
       <short>S</short>
       <color>#1133cc</color>
       <file_name>ciccdata.csv</file_name>
       <csv>
         <reverse>false</reverse>
         <separator>,</separator>
         <date_format>hh:mm</date_format>
         <decimal_separator>.</decimal_separator>
         <columns>
          <column>date</column>
          <column>close</column>
          <column>volume</column>
         </columns>
       </csv>
    </data_set>
 
  </data_sets>


  <charts>
   <chart cid="1">
      <title>Price</title>
      <height>65</height>
       <grid>
        <x>
          <dashed>0</dashed>    
        </x>
        
        <y_left>
          <color>cccccc</color>
          <alpha>100</alpha>
          <dashed>true</dashed>    
         
          <approx_count>
5</approx_count>
        </y_left>    
        <y_right>
          <color>cccccc</color>
          <alpha>100</alpha>
          <dashed>0</dashed>
          
        </y_right>    
      </grid>
      
      <values>
         <x>
 
           <enabled>true</enabled>
         </x>
         <y_left>
 
           <enabled>true</enabled>
            <digits_after_decimal> 
             <data>2</data>
            </digits_after_decimal>
         </y_left>
         <y_right>
 
           <enabled>true</enabled>
            <digits_after_decimal> 
             <data>2</data>
            </digits_after_decimal>
         </y_right>
      
      </values>
      <legend>
        <show_date>1</show_date>
        <positive_color>#CC0000</positive_color>
        <negative_color>#00CC00</negative_color>  
   
      </legend>
      <comparing>
        <base_date>09:00</base_date> 
        <recalculate>1</recalculate>
        <recalculate_from_start>1</recalculate_from_start>
      </comparing>
      <events>
        <use_hand_cursor>0</use_hand_cursor>
      </events>
      <trend_lines>
        <drawing_enabled>0</drawing_enabled>
        <line_color>CC0000</line_color>
        <line_alpha>60</line_alpha>
        <line_width>2</line_width>
        <dash_length>5</dash_length>
      </trend_lines>
      <graphs>


        <graph gid="0">
          <connect>1</connect>
         
          <data_sources>
            <close>close</close>
          </data_sources>
          <compare_source>close</compare_source>
          <legend>
            <date key="false" title="false"><![CDATA[<b>{close}</b>]]></date>
            <period key="false" title="false"></period>
            <date_comparing key="false" title="false"><![CDATA[]]></date_comparing>
            <period_comparing key="false" title="false"><![CDATA[]]></period_comparing>
          </legend>
        </graph>
  <graph gid="1">
     <axis>right</axis>
          <data_sources>
            <close>close</close>
          </data_sources>
          <compare_source>close</compare_source>
          <legend>
            <date key="false" title="false"><![CDATA[<b>{close.percents}</b>]]></date>
            <period key="false" title="false"></period>
            <date_comparing key="false" title="false"><![CDATA[]]></date_comparing>
            <period_comparing key="false" title="false"><![CDATA[]]></period_comparing>
          </legend>
        </graph>
        
      </graphs>
    </chart>
    
  <chart cid="2">
  <title>Volume</title>
  <bg_color>ffffff</bg_color>
      <border_color>#CCCCCC</border_color>
      <border_alpha>100</border_alpha>
      <height>35</height>
      <grid>
        <y_left>
          <approx_count>4</approx_count>
        </y_left>
      </grid>




     
      
      <column_width>0</column_width>


  <graphs>
  <graph gid="0">
  <type>column</type>
  <data_sources>
   <close>volume</close>
          </data_sources>


      <legend>
         <date title="0" key="0"><![CDATA[<b>{close}</b>]]></date>
      </legend>
          <compare_source>close</compare_source>
  <positive_color>1c6dbf</positive_color>
          <negative_color>c70003</negative_color>
  <fill_alpha>100</fill_alpha>
  </graph>  
  </graphs>
  </chart>
  </charts>
  
  <data_set_selector>
    <enabled>0</enabled>
  </data_set_selector>
 <period_selector>
   <from>09:30</from>
    <to>15:00</to>
    <enabled>1</enabled> 
    <custom_period_enabled>0</custom_period_enabled>
 </period_selector>
  
 <plot_area>
  <margins>0</margins>
  
 </plot_area>
 <scroller>
  <enabled>0</enabled>
 </scroller>  
   
</settings>

日K线配置:

<?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>
  <margins>0</margins>                                                   
  <max_series>100</max_series>
  <js_enabled>0</js_enabled>
  <start_on_axis>0</start_on_axis>
  <interactive>1</interactive> 
  <disable_custom_cursors>1</disable_custom_cursors>
  <max_grid_count>8</max_grid_count>  
  <data_reloading>
       <interval>6</interval> 
       <show_preloader>0</show_preloader>
  </data_reloading>
  
  <number_format>  
      <decimal_separator>.</decimal_separator>
      <thousand_separator>,</thousand_separator>
  </number_format>
  
  <data_sets> 
    <data_set did="0">
       <title>candle</title>
       <short>candle</short>
       <color>1133cc</color>
       <file_name>data3.csv</file_name>
       <csv>
         <reverse>true</reverse>
         <separator>,</separator>
         <date_format>YYYY-MM-DD</date_format>
         <decimal_separator>.</decimal_separator>
         <columns>
           <column>date</column>
           <column>open</column>
           <column>high</column>
           <column>low</column>
           <column>close</column>
           <column>volume</column>           
         </columns>
       </csv>
    </data_set>
    
   
  </data_sets>


  <charts>
  <chart cid="0">
  <title>candle</title>
    
      <grid>
        <x>
         
          <alpha>10</alpha>
          <dashed>0</dashed>    
        </x>
        
        <y_left>
          <alpha>10</alpha>
          <dashed>0</dashed>       
        </y_left>
    
      </grid>
      
     <values>
         <x>
 
           <enabled>1</enabled>
         </x>
         <y_left>
 
           <enabled>true</enabled>
            <digits_after_decimal> 
             <data>2</data>
            </digits_after_decimal>
         </y_left>
      
      </values>
      <events>
        <use_hand_cursor>0</use_hand_cursor>
      </events>
     <legend>
        <show_date>1</show_date>
        <positive_color>#CC0000</positive_color>
        <negative_color>#00CC00</negative_color>  
   
      </legend>


      <column_width>60</column_width>


  <graphs>
  <graph gid="0">
  <type>candlestick</type>
  <data_sources>
   <open>open</open>
   <high>high</high>
   <low>low</low>
   <close>close</close>
          </data_sources>
          
          <compare_source>close</compare_source>
  <cursor_color>002b6d</cursor_color>
  <positive_color>ff0000</positive_color>
          <negative_color>11aa11</negative_color>
  <fill_alpha>100</fill_alpha>
     <legend>
            <date key="false" title="false"><![CDATA[open:<b>{open}</b> low:<b>{low}</b> high:<b>{high}</b> close:<b>{close}</b>]]></date>
            <period key="false" title="false"></period>
            <date_comparing key="false" title="false"><![CDATA[<b>{close.percents}]]></date_comparing>
            <period_comparing key="false" title="false"><![CDATA[<b>{close.percents}]]></period_comparing>
          </legend>         
  </graph>  
  </graphs>
  </chart>  
 
 
 
  <chart cid="2">
  <title>Volume</title>
  <bg_color>ffffff</bg_color>
      <border_color>#cccccc</border_color>
      <border_alpha>100</border_alpha>
      <height>10</height>
      <grid>
        <y_left>
          <approx_count>3</approx_count>
        </y_left>
      </grid>
      <values>
         <x>
 
           <enabled>1</enabled>
         </x>
      </values>
      <column_width>30</column_width>


  <graphs>
  <graph gid="0">
  <type>column</type>
  <data_sources>
   <close>volume</close>
          </data_sources>


      <legend>
         <date title="0" key="0"><![CDATA[<b>{close}</b>]]></date>
      </legend>
          <compare_source>close</compare_source>
  <positive_color>#CC0000</positive_color>
          <negative_color>#00CC00</negative_color>  
  <fill_alpha>100</fill_alpha>
  </graph>  
  </graphs>
  </chart>
 
 
  </charts>
  


  <data_set_selector>
    <enabled>false</enabled>
  </data_set_selector>
  
  <period_selector>
    
   
    <enabled>1</enabled> 
    <custom_period_enabled>0</custom_period_enabled>
  </period_selector>


  <header>
    <enabled>false</enabled>
  </header>


  <plot_area>
   <margins>0</margins>
    <border_color>b6bece</border_color>
  </plot_area>


 <scroller>
  <enabled>0</enabled>
 </scroller>  
   
</settings>