儀表盤是商業智能領域必不可少的一個工具，然而大多數企業儀表盤目前仍然需要自定義創建。現在，Flash圖表AnyChart 的AnyChart Flash Component Dashboard mode 提供了一種創建儀表盤的新方式。所有通過AnyChartFlash圖表組件創建的圖表都要用一個單一的swf文件渲染，然後將圖表應用到網頁中。本教程將手把手教你用AnyChart Flash組件創建一個數字儀表盤。
1、選擇要顯示的數據
假設你要在年會上給股東展示報表，你手頭有產品的銷售數據、盈利數據、產品流行排行榜等數據資料，你首先要從這些繁雜的資料當中選出你想要展示的數據。
2、選擇佈局
通常，在確定最完美的佈局之前你最好先在紙上簡單的畫一畫，做到心中有數：
畫出儀表盤的大致佈局：
3、轉換數據
接下來用 AnyChart - XML配置文件轉換數據。首先需要將數據轉換成XML，代碼示例：
<anychart>
<charts>
<!-- Set plot_type to display chart as Doughnut-->
<chart plot_type="Doughnut" template="template_bg">
<data>
<!-- One data series to show pubs revenue -->
<series>
<point name="Nevada Cocktail Lounge" y="4.173" />
<point name="Washington Highway Pub" y="3.77" />
<point name="Florida Beer Restaurant" y="3.5" />
<point name="Texas SteakHouse" y="4.14" />
<point name="Georgia Ale House" y="1.675" />
</series>
</data>
<data_plot_settings>
<pie_series style="Aqua">
<!-- Enable tooltips and set them to show revenue, percentage and pub name -->
<tooltip_settings enabled="true">
<format>{%Name} / ${%YValue}{numDecimals:2} mil. / {%YPercentOfSeries}{numDecimals:2}%</format>
</tooltip_settings>
<!-- Enable labels and set them to show percentage -->
<label_settings enabled="true" mode="inside">
<position anchor="Center" valign="Center" halign="Center" />
<background enabled="false" />
<font color="White">
<effects enabled="True">
<drop_shadow enabled="True" />
</effects>
</font>
<format>{%YPercentOfSeries}</format>
</label_settings>
</pie_series>
</data_plot_settings>
<chart_settings>
<!-- Set chart title text -->
<title>
<text>Pubs Revenue Ratio</text>
</title>
<!-- enable legend to show data points -->
<legend enabled="True" ignore_auto_item="True">
<title enabled="false" />
<items>
<item source="Points" />
</items>
</legend>
</chart_settings>
</chart>
</charts>
</anychart>
這樣我們就創建了一個<series>節點，新增幾個<point>節點，並設置名稱，定義<chart>節點中的plot_type="Doughnut"，設置格式化的工具提示、標籤和圖表標題，效果如圖所示：
然後將這個配置文件保存爲pubs-revenue.xml.
4、轉換佈局
前面我們在紙上設計了一下儀表盤的佈局，下面我們將紙上佈局轉換到AnyChart儀表盤佈局配置中。
1） 在<anychart>節點中創建<dashboard>節點，創建<view type="Dashboard">，示例如下：
<anychart>
<dashboard>
<view type="Dashboard">
<title>
<text>"Duff Pubs" Annual Report</text>
</title>
</view>
</dashboard>
</anychart>
2）我們有三個圖表，所以需要三個<view type="Chart">：
<anychart>
<dashboard>
<view type="Dashboard">
<view type="Chart" />
<view type="Chart" />
<view type="Chart" />
</view>
</dashboard>
</anychart>
3）首先我們將這三個圖表水平放置：
<anychart>
<dashboard>
<view type="Dashboard">
<hbox width="100%" height="100%">
<view type="Chart" />
<view type="Chart" />
<view type="Chart" />
</hbox>
</view>
</dashboard>
</anychart>
4）然後將其中兩個垂直放置，並調整寬高：
<anychart>
<dashboard>
<view type="Dashboard">
<hbox width="100%" height="100%">
<vbox width="50%" height="100%">
<view type="Chart" width="100%" height="50%" />
<view type="Chart" width="100%" height="50%" />
</vbox>
<view type="Chart" width="50%" height="100%" />
</hbox>
</view>
</dashboard>
</anychart>
5、將數據和佈局放在一起
準備好了數據和佈局後，接下來就要爲儀表盤視圖指定特定的數據源：
<anychart>
<dashboard>
<view type="Dashboard">
<hbox width="100%" height="100%">
<vbox width="50%" height="100%">
<view source="./dashboard/profit-and-sales.xml" type="Chart" width="100%" height="50%" />
<view source="./dashboard/pubs-revenue.xml" type="Chart" width="100%" height="50%" />
</vbox>
<view source="./dashboard/brands-chart.xml" type="Chart" width="50%" height="100%" />
</hbox>
</view>
</dashboard>
</anychart>
6、交互性概念規劃
我們需要創建通過點擊某個點就能顯示出具體銷售數據的儀表盤，如下圖：
7、交互式儀表盤的數據
現在我們需要創建更多的XML文件。
注：可以用AnyChart的圖表模板輕鬆實現圖表配置
8、交互式儀表盤的實現
我們可以用AnyChart Actions實現儀表盤數據的更新，在這個儀表盤中我們只用 "updateView"，就能更新儀表盤的某個視圖。修改圖表的數據部分，如下示例：
<data>
<series>
<actions>
<action type="updateView" view_id="Profit Details" source_mode="externalData" source="{%Name}_profit-and-sales.xml" />
<action type="updateView" view_id="Brands Details" source_mode="externalData" source="{%Name}_brands-poularity-chart.xml" />
</actions>
<point name="Nevada Cocktail Lounge" y="4.75" />
<point name="Washington Highway Pub" y="3.75" />
<point name="Florida Beer Restaurant" y="3.4" />
<point name="Texas SteakHouse" y="3.1" />
<point name="Georgia Ale House" y="2" />
</series>
</data>
最後我們要做的就是安排新的儀表盤佈局，設置適當的圖表來源和視圖名稱(用於更新操作)：
<anychart>
<dashboard>
<view type="Dashboard">
<vbox width="100%" height="100%">
<hbox width="50%" height="100%">
<view source="./dashboard/pubs-revenue.xml" type="Chart" width="100%" height="50%" />
<vbox height="100%" width="50%">
<view source="./dashboard/profit-and-sales.xml" type="Chart" width="100%" height="50%" />
</vbox>
</hbox>
<view name="Brands Details" source="./dashboard/brands-chart.xml" type="Chart" width="50%" height="100%" />
</vbox>
</view>
</dashboard>
</anychart>
9、Flash交互式儀表盤
效果圖：
結語
以上我們用 AnyChart 創建了一個簡單的Flash交互式儀表盤，但它還是一個相當靜態的儀表盤。本教程是用XML文件來實現的，你也可以用腳本語言來實現，這樣就可以從數據庫或報表中獲取相關數據。