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