前幾天朋友需要這個(gè)報(bào)表，于是一起研究了下。簡(jiǎn)單做兩個(gè)實(shí)例傳上來(lái)。

簡(jiǎn)介

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

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

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

3. 所有流行移動(dòng)平臺(tái) Android (2.2+) and iOS (iPhone, iPad, iPod Touch).

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

 數(shù)據(jù)源

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

2.可以是xml,excel,CSV file 

選擇AnyChart原因

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

2. 交互性好

3. 跨平臺(tái)

4. 不需要安裝

5. 基于xml

6. 支持flash和HTML5，但不需要flash和HTML5的知識(shí)

入門(mén)：

AnyChart入手很容易，只需要打開(kāi)basic-sample，啟動(dòng)，就能看到第一個(gè)例子。

我按照一個(gè)柱狀圖入手，來(lái)講解這個(gè)教程  

這是一個(gè)橫向柱狀圖，看xml

<?xml version="1.0" encoding="UTF-8"?>   
<anychart>   
<charts> 
<!--類(lèi)型設(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> 

下面我對(duì)自帶的例子的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 = "豐臺(tái)" y="80" color="red"/>

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

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

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

在<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頁(yè)面內(nèi)做修改：

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

7. 傳入div

chart.write("divName");

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