前幾天朋友需要這個報表，于是一起研究了下。簡單做兩個實例傳上來。

簡介

AnyChart是一款收費(fèi)的報表工具

1. AnyChart跨瀏覽器，并且可以用于Web，桌面，以及移動應(yīng)用

2. AnyChart支持所有瀏覽器,如Chrome, Safari, Firefox, IE and Opera

3. 所有流行移動平臺 Android (2.2+) and iOS (iPhone, iPad, iPod Touch).

4. 支持所有腳本語言 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, Perl or any other.

 數(shù)據(jù)源

1.可以是關(guān)系型數(shù)據(jù)庫，mysql,oracle,sqlserver

2.可以是xml,excel,CSV file 

選擇AnyChart原因

1. 好看，動態(tài)

2. 交互性好

3. 跨平臺

4. 不需要安裝

5. 基于xml

6. 支持flash和HTML5，但不需要flash和HTML5的知識

入門：

AnyChart入手很容易，只需要打開basic-sample，啟動，就能看到第一個例子。

我按照一個柱狀圖入手，來講解這個教程  

這是一個橫向柱狀圖，看xml

<?xml version="1.0" encoding="UTF-8"?>   
<anychart>   
<charts> 
<!--類型設(shè)置--> 
<chart plot_type="CategorizedHorizontal"> 
<!--數(shù)據(jù)設(shè)置-->   
<data>   
 <series name="Year 2003" type="Bar"> 
 <point name="Department Stores" y="637166" />   
 <point name="Discount Stores" y="721630" />   
 <point name="Men's/Women's Specialty Stores" y="148662" />  
 <point name="Juvenile Specialty Stores" y="78662" />   
 <point name="All other outlets" y="90000" />   
</series>   
 </data> 
<!--具體設(shè)置-->   
 <data_plot_settings> 
 <bar_series> 
 <tooltip_settings enabled="True" /> 
 </bar_series>  
</data_plot_settings> 
 <!--坐標(biāo)軸，標(biāo)題設(shè)置 -->  
  <chart_settings>   
<title enabled="false" />   
 <axes>   
<y_axis position="Opposite">  
 <title> 
 <text><![CDATA[Sales]]></text> 
 </title>   
 <labels>   
<format><![CDATA[{%Value}{numDecimals:0}]]></format> 
 </labels>   
 </y_axis>  
 <x_axis>   
  <labels align="Inside" /> 
 <title>   
 <text><![CDATA[Retail Channel]]></text> 
  </title>  
  </x_axis>  
  </axes>  
 </chart_settings> 
 </chart>  
 </charts> 
</anychart> 

下面我對自帶的例子的xml進(jìn)行修改

1. 變成常用的柱狀圖

<!--原為橫向 CategorizedHorizontal -->

<chart plot_type="CategorizedVertical"> 

2. 加上3D效果

<data_plot_settings enable_3d_mode="True" z_aspect="0.3" z_padding="0.5">

在<y_axis>加上

<scale mode="Overlay" /> 

3. 修改y軸的最大，最小，間距

<scale mode="Overlay" minimum=&quot;0" maximum="100" major_interval="25"/> 

4. 修改柱子的樣式

增加

<styles>
<!-- 樣式s2-->
 <bar_style name="style2"> 
 <states> 
 <normal>  
 <fill enabled="true" type="solid" color="DarkBlue" /> 
  </normal>  
 <hover>  
 <fill enabled="true" type="solid" color="aqua" /> 
 </hover> 
 </states> 
 </bar_style> 
 <!-- 樣式1-->  
 <bar_style name="style1">
   <fill type="Solid" color="Gold" opacity="1" /> 
  <border thickness="4" color="Rgb(86,86,26)" />  
 <hatch_fill enabled="True" type="DiagonalBrick" color="Gray" />  
 <effects> 
<bevel enabled="true" highlight_opacity="0.4" shadow_opacity="0.4" distance="2" />
 <drop_shadow enabled="true" opacity="0.3" /> 
</effects> 
 <states> 
 <hover> 
<border color="DarkRed" thickness="6" /> 
<hatch_fill color="DarkRed" /> 
 </hover>
 </states> 
 </bar_style> 
 </styles>   

然后：

1. <point name = "懷柔" y="90" style="style1"/>

或者 直接

2. <point name = "豐臺" y="80" color="red"/>

或者采用默認(rèn)的"Default", "Silver", "AquaLight" and "AquaDark"其中一個

3. <point name = "通州" y="80" style="AquaDark"/> 

5. 鼠標(biāo)滑過提示，和 柱子提示

在<data_plot_settings>中加入

 <bar_series> 
 <tooltip_settings enabled="True"> 
<format>
 {%Name}
${%Value}{numDecimals:0}
 </format> 
 </tooltip_settings>
 <!--標(biāo)簽提示 --> 
<label_settings enabled=";True"> 
 <font bold="False" /> 
 <format>{%Value}{numDecimals:0}</format> 
</label_settings> 
 </bar_series> 

6. 圖例

紅圈內(nèi)，叫圖例

a) 在chart_settings內(nèi)添加

<!-- 圖例--> 
 <legend enabled="True" ignore_auto_item="True&quot;> 
<title enabled="false" /> 
 <items> 
  <item source="Points" /> 
</items> 
 <format>{%Icon} {%Name} (${%Value}{numDecimals:0})</format>
 </legend> 

b) 然后在html頁面內(nèi)做修改：

var chart = new AnyChart('./swf/AnyChart.swf', './swf/Preloader.swf'); 

7. 傳入div

chart.write("divName");

8. 還有一些小功能，最終成圖：