【拾贝】报表工具-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，如需转载请自行联系原作者