在.Net开发中使用AnyChart的简单例子（上）

1.AnyChart控件相关

显示效果

2.AnyChart的简单原理

AnyChart是一个Flash作的控件，原理图在安装了AnyChart后的说明文档里面有，这里贴一下

 其实很好理解，就是想办法生成一个符合AnyChart解析的XML数据源，经过JavaScript绑定给报表文件（SWF）

3.在.Net中使用AnyChart

知道了原理，就好办了。新建了一个项目

项目结构以下：

js，swf两个文件夹内的文件是试用版提供的，能够查看说明文档。在安装目录/anychart/help/docs/SimpleChart.html这一页的底部，有一个Open Folder With Sample的连接，打开就能找到这几个文件。而xml文件夹是我本身建的，用于存放数据源。

界面：

由于只是作一个小例子，界面上我只放了2个按钮，随意的给了个左对齐：

<div style="text-align:left;">
 
        <asp:Button ID="barChart" runat="server" Text="柱状图" OnClick="barChart_Click" />
 
        <asp:Button ID="lineChart" runat="server" Text="曲线图" OnClick="lineChart_Click" />
 
</div>

 这两个按钮做用只是切换不一样的报表而已，柱状图和曲线图。接下来只要完成两个部分：组装XML文件，往页面写入js，就好了。

后台：

我只写了寥寥几个方法：

/// <summary>
 
/// 获取DataSet
 
/// </summary>
 
/// <returns></returns>
 
protected DataSet GetDataSet()

/// <summary>
 
 /// 建立出XML文件
 
 /// </summary>
 
 /// <param name="SeriesTypeNode">图表类型</param>
 
 private void CreateXml(string SeriesTypeNode)

/// <summary>
 
/// 建立客户端脚本，在页面后面添加脚本
 
/// </summary>
 
/// <param name="page">当前页实例</param>
 
/// <param name="scriptName">脚本名称</param>
 
/// <param name="script">要建立的脚本</param>
 
public static void CreateStartupScript(Page page, string scriptName, string script)

 

获取DataSet就不详述了，每一个人有本身不一样的数据集。个人数据库结构以下：

 

报表要显示的字段就TotalUser和Time两个，TotalUse是Y轴，Time是X轴。怎么把数据放到XML文件中呢？这里，咱们要分析一下AnyChart接受的XML文件的格式，拿自带文档中的SimpleChart章节的例子作说明，咱们来看一下： 

<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>
 
      <chart_settings>
 
        <title>
 
          <text>Sales of ACME Corp.</text>
 
        </title>
 
        <axes>
 
          <y_axis>
 
            <title>
 
              <text>Sales</text>
 
            </title>
 
          </y_axis>
 
          <x_axis>
 
            <labels align="Outside"/>
 
            <title>
 
              <text>Retail Channel</text>
 
            </title>
 
          </x_axis>
 
        </axes>
 
      </chart_settings>
 
    </chart>
 
  </charts>
 
</anychart>

能够看到，报表的数据就放在

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

series中的name属性是这组数据的名字，type是报表显示类型，这是Bar（柱状图），point是这组数据的信息，name是X轴，y就是Y轴。因此，若是咱们只是想得到一个能显示出图像的报表，而暂时无论它那些复杂的表现设置的话，只要写好data元素的内容便可。