【拾貝】報表工具-AnyChart

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

簡介

AnyChart是一款收費的報表工具

1. AnyChart跨浏覽器，并且可以用于Web，桌面，以及移動應用

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.

 資料源

1.可以是關系型資料庫，mysql,oracle,sqlserver

2.可以是xml,excel,CSV file 

選擇AnyChart原因

1. 好看，動态

2. 互動性好

3. 跨平台

4. 不需要安裝

5. 基于xml

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

7. 你可以提出任何可以改進的意見，他們要争做第一。。

擷取：

入門：

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

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

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

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

<anychart>   

  <charts> 

   <!--類型設定-->   

    <chart plot_type="CategorizedHorizontal"> 

     <!--資料設定-->   

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

   <!--具體設定-->   

      <data_plot_settings>   

        <bar_series>   

          <tooltip_settings enabled="True" />   

        </bar_series>   

      </data_plot_settings> 

    <!--坐标軸，标題設定 -->   

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

              <text><![CDATA[Retail Channel]]></text>   

          </x_axis>   

        </axes>   

      </chart_settings>   

    </chart>   

  </charts>   

</anychart> 

下面我對自帶的例子的xml進行修改

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="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"/> 

或者采用預設的"Default", "Silver", "AquaLight" and "AquaDark"其中一個

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

5. 滑鼠滑過提示，和 柱子提示

在<data_plot_settings>中加入

<bar_series>   

          <tooltip_settings enabled="True">   

            <format>   

            {%Name}   

            ${%Value}{numDecimals:0}   

            </format>   

          </tooltip_settings>   

          <!--标簽提示 -->   

          <label_settings enabled="True">   

            <font bold="False" />   

            <format>{%Value}{numDecimals:0}</format>   

          </label_settings>   

        </bar_series> 

6. 圖例

<a href="http://yjplxq.blog.51cto.com/attachment/201208/7/4081353_13443079146NUg.jpg"></a>

紅圈内，叫圖例

a) 在chart_settings内添加

&lt;!-- 圖例--&gt;   

        &lt;legend enabled="True" ignore_auto_item="True"&gt;   

          &lt;title enabled="false" /&gt;   

          &lt;items&gt;   

            &lt;item source="Points" /&gt;   

          &lt;/items&gt;   

          &lt;format&gt;{%Icon} {%Name} (${%Value}{numDecimals:0})&lt;/format&gt;   

        &lt;/legend&gt; 

b) 然後在html頁面内做修改：

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

7. 傳入div

chart.write("divName");

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

<a href="http://yjplxq.blog.51cto.com/attachment/201208/7/4081353_1344307915HdiR.jpg"></a>

 我把xml和html打成附件，提供下載下傳，同時提供餅狀圖的下載下傳。

<a href="http://down.51cto.com/data/2361161" target="_blank">附件：http://down.51cto.com/data/2361161</a>

本文轉自 wws5201985 51CTO部落格，原文連結：http://blog.51cto.com/yjplxq/956865，如需轉載請自行聯系原作者