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

1.AnyChart控件相關(guān)

顯示效果

2.AnyChart的簡(jiǎn)單原理

AnyChart是一個(gè)Flash做的控件，原理圖在安裝了AnyChart后的說明文檔里面有，這里貼一下

其實(shí)很好理解，就是想辦法生成一個(gè)符合AnyChart解析的XML數(shù)據(jù)源，通過JavaScript綁定給報(bào)表文件（SWF）

3.在.Net中使用AnyChart

知道了原理，就好辦了。新建了一個(gè)項(xiàng)目

項(xiàng)目結(jié)構(gòu)如下：

js，swf兩個(gè)文件夾內(nèi)的文件是試用版提供的，可以查看說明文檔。在安裝目錄/anychart/help/docs/SimpleChart.html這一頁(yè)的底部，有一個(gè)Open Folder With Sample的鏈接，打開就能找到這幾個(gè)文件。而xml文件夾是我自己建的，用于存放數(shù)據(jù)源。

界面：

因?yàn)橹皇亲鲆粋€(gè)小例子，界面上我只放了2個(gè)按鈕，隨意的給了個(gè)左對(duì)齊：

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

這兩個(gè)按鈕作用只是切換不同的報(bào)表而已，柱狀圖和曲線圖。接下來只要完成兩個(gè)部分：組裝XML文件，往頁(yè)面寫入js，就行了。

后臺(tái)：

我只寫了寥寥幾個(gè)方法：

        /// <summary>

        /// 獲取DataSet

        /// </summary>

        /// <returns></returns>

        protected DataSet GetDataSet()

       /// <summary>

        /// 創(chuàng)建出XML文件

        /// </summary>

        /// <param name="SeriesTypeNode">圖表類型</param>

        private void CreateXml(string SeriesTypeNode)

        /// <summary>

        /// 創(chuàng)建客戶端腳本，在頁(yè)面后面添加腳本

        /// </summary>

        /// <param name="page">當(dāng)前頁(yè)實(shí)例</param>

        /// <param name="scriptName">腳本名稱</param>

        /// <param name="script">要?jiǎng)?chuàng)建的腳本</param>

        public static void CreateStartupScript(Page page, string scriptName, string script)

獲取DataSet就不詳述了，每個(gè)人有自己不同的數(shù)據(jù)集。我的數(shù)據(jù)庫(kù)結(jié)構(gòu)如下：

報(bào)表要顯示的字段就TotalUser和Time兩個(gè)，TotalUse是Y軸，Time是X軸。怎么把數(shù)據(jù)放到XML文件中呢？這里，我們要分析一下AnyChart接受的XML文件的格式，拿自帶文檔中的SimpleChart章節(jié)的例子做說明，我們來看一下：

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

可以看到，報(bào)表的數(shù)據(jù)就放在

<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屬性是這組數(shù)據(jù)的名字，type是報(bào)表顯示類型，這是Bar（柱狀圖），point是這組數(shù)據(jù)的信息，name是X軸，y就是Y軸。所以，如果我們只是想獲得一個(gè)能顯示出圖像的報(bào)表，而暫時(shí)不管它那些復(fù)雜的表現(xiàn)設(shè)置的話，只要寫好data元素的內(nèi)容即可。