[ASP.NET] Flash 圖表解決方案 amchart

Standard

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

曾經找過 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呈現的效果。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *