儀表盤是商業智能領域必不可少的一個工具，然而大多數企業儀表盤目前仍然需要自定義創建。現在，Flash圖表 AnyChart 的AnyChart Flash Component Dashboard mode 提供了一種創建儀表盤的新方式。所有通過AnyChart Flash圖表組件創建的圖表都要用一個單一的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文件來實現的，你也可以用腳本語言來實現，這樣就可以從數據庫或報表中獲取相關數據。