最近有個案子希望用上花俏的圖表效果，最好還會動的。

曾經找過 jQuery 的方案 Horizontal Bar Graph in jQuery，也有動態生長效果，但沒有立體；還有另一套也滿有名的 Open Flash Chart，但在 ASP.NET 中使用的方法不是拖拉元件、指定對應屬性那麼直觀，還沒空仔細研究，就先跳過了。

最後覺得在 ASP.NET 環境下，用 amchart 這套圖表元件相當適合，也滿簡單的。屬性與方法相當多，以下只簡單介紹一下用法。

1.
至 amchart 網站下載 ASP.NET Controls，我使用的時候版號是 1.6.4.0。

2.
將元件加入 ASP.NET 網站中，左方工具列也加入。
此外，複製 amcharts（圖片素材資料夾）至網站根目錄下，也可以只複製欲使用的類型，如長條圖是 amcharts/amcolumn。

3.
從工具箱中，將希望加入的類型控制項拖拉至 Web Form 上（這裡以長條圖 ColumnChart 為例），最上方會自動產生引入元件的語法：
[code]
<%@ Register Assembly="am.Charts" Namespace="am.Charts" TagPrefix="cc1" %>
[/code]

form 中則會加入控制項語法：
[code]
<cc1:ColumnChart ID="ColumnChart1" runat="server"></cc1:ColumnChart>
[/code]

稍作修改一下，變成下面這樣：
[code]
<cc1:ColumnChart ID="ColumnChart1" runat="server"
DataSourceID="SqlDataSourceResult" DataSeriesIDField="Q" Depth="10"
ColumnGrowTime="2" Width="100%" ColumnGradientDirection="Horizontal"
ColumnGrowEffect="Strong" ColumnSequencedGrow="True" ColumnType="Column3D"
ChartType="Bar" ColumnDataLabelsAlwaysOn="True" Height="600px">
<Graphs>
<cc1:ColumnChartGraph ID="ColumnChartGraph1" runat="server" DataSourceID="SqlDataSourceResult" DataSeriesItemIDField="Q" DataValueField="Counter" GraphType="Column" ForeColor="#ff6600" VisibleInLegend="False"></cc1:ColumnChartGraph>
</Graphs>
</cc1:ColumnChart>
[/code]

4.
再來簡單解釋一下相關的屬性：
[code]
<cc1:ColumnChart ID="ColumnChart1" runat="server"
DataSourceID="SqlDataSourceResult" DataSeriesIDField="Q" Depth="10"
ColumnGrowTime="2" Width="100%" ColumnGradientDirection="Horizontal"
ColumnGrowEffect="Strong" ColumnSequencedGrow="True" ColumnType="Column3D"
ChartType="Bar" ColumnDataLabelsAlwaysOn="True" Height="600px">
[/code]

• DataSourceID 指定資料結果的資料來源控制項。資料表結構例如：投票結果欄位有 Q（選項）、Counter（得票數）。
• DataSeriesIDField 則指定「項目」，如本例為投票結果的Q（選項）。
• ColumnGrowTime 指定長條圖「長高」的時間。
• ColumnGradientDirection 是長條圖方向，水平方向就是 Horizontal。
• ColumnGrowEffect 是長條圖「長」的效果，預設是會十分軟Q的 Elastic，如果不愛那麼花俏，可以用 Strong 這種一般的拉長模式。
• ColumnSequencedGrow 指定為 True 的話，柱子會個別長出來。
• ColumnType 長條圖類型，本例是 3D 效果。
• ChartType 圖表類型，如果用水平（Horizontal）的話，請用 Bar，反之（垂直）用預設的 Column。

5. 然後是 Graphs 中的屬性：
[code]
<Graphs>
<cc1:ColumnChartGraph ID="ColumnChartGraph1" runat="server" DataSourceID="SqlDataSourceResult" DataSeriesItemIDField="Q" DataValueField="Counter" GraphType="Column" ForeColor="#ff6600" VisibleInLegend="False"></cc1:ColumnChartGraph>
</Graphs>
[/code]

• DataSourceID 同上，資料來源控制項，撈取結果資料表。
• DataSeriesItemIDField 指定「項目」的欄位名稱，如本例的 Q（選項）。
• DataValueField 則是「數量」，本例是 Counter（得票數）。

依照設定，頁面上應該會出現如下圖的水平圖表，並附帶動態、3D呈現的效果。