儀表盤是商業(yè)智能領(lǐng)域必不可少的一個工具，然而大多數(shù)企業(yè)儀表盤目前仍然需要自定義創(chuàng)建。現(xiàn)在，F(xiàn)lash圖表 AnyChart 的AnyChart Flash Component Dashboard mode 提供了一種創(chuàng)建儀表盤的新方式。所有通過AnyChart Flash圖表組件創(chuàng)建的圖表都要用一個單一的swf文件渲染，然后將圖表應(yīng)用到網(wǎng)頁中。本教程將手把手教你用AnyChart Flash組件創(chuàng)建一個數(shù)字儀表盤。

1、選擇要顯示的數(shù)據(jù)

假設(shè)你要在年會上給股東展示報表，你手頭有產(chǎn)品的銷售數(shù)據(jù)、盈利數(shù)據(jù)、產(chǎn)品流行排行榜等數(shù)據(jù)資料，你首先要從這些繁雜的資料當中選出你想要展示的數(shù)據(jù)。

2、選擇布局

通常，在確定最完美的布局之前你最好先在紙上簡單的畫一畫，做到心中有數(shù)：

畫出儀表盤的大致布局：

3、轉(zhuǎn)換數(shù)據(jù)

 接下來用 AnyChart - XML配置文件轉(zhuǎn)換數(shù)據(jù)。首先需要將數(shù)據(jù)轉(zhuǎn)換成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>

這樣我們就創(chuàng)建了一個<series>節(jié)點，新增幾個<point>節(jié)點，并設(shè)置名稱，定義<chart>節(jié)點中的plot_type="Doughnut"，設(shè)置格式化的工具提示、標簽和圖表標題，效果如圖所示：

然后將這個配置文件保存為pubs-revenue.xml.

4、轉(zhuǎn)換布局

前面我們在紙上設(shè)計了一下儀表盤的布局，下面我們將紙上布局轉(zhuǎn)換到AnyChart儀表盤布局配置中。

1） 在<anychart>節(jié)點中創(chuàng)建<dashboard>節(jié)點，創(chuàng)建<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）然后將其中兩個垂直放置，并調(diào)整寬高：

<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、將數(shù)據(jù)和布局放在一起

準備好了數(shù)據(jù)和布局后，接下來就要為儀表盤視圖指定特定的數(shù)據(jù)源：

<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、交互性概念規(guī)劃

我們需要創(chuàng)建通過點擊某個點就能顯示出具體銷售數(shù)據(jù)的儀表盤，如下圖：

7、交互式儀表盤的數(shù)據(jù)

現(xiàn)在我們需要創(chuàng)建更多的XML文件。
注：可以用AnyChart的圖表模板輕松實現(xiàn)圖表配置

8、交互式儀表盤的實現(xiàn)

我們可以用AnyChart Actions實現(xiàn)儀表盤數(shù)據(jù)的更新，在這個儀表盤中我們只用 "updateView"，就能更新儀表盤的某個視圖。修改圖表的數(shù)據(jù)部分，如下示例：

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

最后我們要做的就是安排新的儀表盤布局，設(shè)置適當?shù)膱D表來源和視圖名稱(用于更新操作)：

<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交互式儀表盤

效果圖：

結(jié)語

以上我們用 AnyChart 創(chuàng)建了一個簡單的Flash交互式儀表盤，但它還是一個相當靜態(tài)的儀表盤。本教程是用XML文件來實現(xiàn)的，你也可以用腳本語言來實現(xiàn)，這樣就可以從數(shù)據(jù)庫或報表中獲取相關(guān)數(shù)據(jù)。