一天突然被通知開發要用第三方報表控件AnyChart，不得已去下載了一個試用版來研究。一試之下大吃一驚，AnyChart不僅美觀，功能還異常的豐富。一搜索，網上竟沒有什么關于該控件使用的說明，于是，便把自己的一點使用心得記錄下來。（C# .NET）

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元素的內容即可。