Dashboard中文釋義為儀表盤、控制臺，這個用詞很生動，它指的是多個圖組合在一起的效果，就像模具工作中的操作臺一樣由多種圖形儀器組成。

?在項目中，特別是高管平臺，領導看重的是多套數(shù)據(jù)的匯總，所以dashboard更為重要，下例是一個典型的dashboard，后面就從它入手，介紹dashboard的使用。

?

第一步，創(chuàng)建<dashboard>，要創(chuàng)建多圖整合，就必須在XML中定義<dashboard>標簽，他位置根標簽<anychart>之后，與<charts>標簽同級。下面代碼看字面意思都懂，不做詳細講述了。

?

      <dashboard>
  <view type="Dashboard">
    <margin all="10" left="0" right="0" />
    <title>
      <text>Dashboard Sample Title</text>
    </title>
    <background enabled="true">
      <border enabled="true" />
    </background>
  </view>
</dashboard>
    

?

?

第二步，定義<hbox>和<vbox>布局容器，在有了dashboard之后，就需要定義圖形的排列布局，<vbox>是上下布局，<hbox>是水平左右布局，所以如果要達到上圖那種效果則需要先定義一個上下布局再定義水平布局：

?

        <dashboard>
    <view type="Dashboard">
      <title enabled="False" />
	  <vbox height="100%" width="100%">
        <hbox width="100%" height="50%">
			<圖1/>
			<圖2/>
		</hbox>
		<hbox width="100%" height="50%">
			<圖3/>
		</hbox>
      </vbox>
    </view>
  </dashboard>
    

?

?

第三步，定義圖來源和圖大小，從示例中可以看到，一個dashboard總共有3個圖，上面兩個左右排列，左邊的圖占用整體的50%高度和70%寬度，右邊占用50%高度和30%寬度，要設置圖來源就必須使用<view>標簽：view標簽的type設置為Chart表示一個圖，source對應<chart>標簽的name屬性，height和width自然不用介紹了，通過這樣設置，一個簡單的布局和圖就出來了。

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <dashboard>
    <view type="Dashboard">
      <title enabled="False" />
	  <vbox height="100%" width="100%">
        <hbox width="100%" height="50%">
			<view type="Chart" source="chart2" height="100%" width="70%" />
			<view type="Chart" source="chart1" height="100%" width="30%" />
		</hbox>
		<hbox width="100%" height="50%">
			<view type="Chart" source="chart3" height="100%" width="100%" />
		</hbox>
      </vbox>
    </view>
  </dashboard>
  <charts>
    <chart plot_type="pie" name="chart1">
      <data>
        <series type="Pie" palette="default">
          <point name="Item 1" y="10" />
          <point name="Item 2" y="20" />
          <point name="Item 3" y="30" />
        </series>
      </data>
      <chart_settings>
        <title>
          <text>Pie Chart</text>
        </title>
        <chart_background>
          <border type="Solid" color="#CCCCCC" thickness="1" />
          <corners type="Square" />
          <effects enabled="false" />
          <inside_margin all="10" top="5" />
        </chart_background>
      </chart_settings>
    </chart>
    <chart name="chart2">
      <data>
        <series name="Line series" type="Line">
          <point name="Item 1" y="10" />
          <point name="Item 2" y="35" />
          <point name="Item 3" y="60" />
          <point name="Item 4" y="75" />
          <point name="Item 5" y="90" />
        </series>
        <series name="Bar series" type="Bar">
          <point name="Item 1" y="90" />
          <point name="Item 2" y="75" />
          <point name="Item 3" y="50" />
          <point name="Item 4" y="35" />
          <point name="Item 5" y="10" />
        </series>
      </data>
      <chart_settings>
        <title>
          <text>Combined Chart</text>
        </title>
        <chart_background>
          <border type="Solid" color="#CCCCCC" thickness="1" />
          <corners type="Square" />
          <effects enabled="false" />
          <inside_margin all="10" top="5" />
        </chart_background>
      </chart_settings>
    </chart>
    <chart name="chart3" plot_type="CategorizedVertical">
      <data_plot_settings default_series_type="Bar">
        <bar_series>
          <tooltip_settings enabled="True" />
        </bar_series>
      </data_plot_settings>
      <data>
        <series name="Quarter 1">
          <point name="John" y="10000" />
          <point name="Jake" y="12000" />
          <point name="Peter" y="18000" />
          <point name="James" y="11000" />
          <point name="Mary" y="9000" />
        </series>
        <series name="Quarter 2">
          <point name="John" y="12000" />
          <point name="Jake" y="15000" />
          <point name="Peter" y="16000" />
          <point name="James" y="13000" />
          <point name="Mary" y="19000" />
        </series>
      </data>
      <chart_settings>
	    <chart_background>
          <border type="Solid" color="#CCCCCC" thickness="1" />
          <corners type="Square" />
          <effects enabled="false" />
          <inside_margin all="10" top="5" />
        </chart_background> 
        <title enabled="false" />
        <axes>
          <y_axis>
            <title>
              <text>Sales</text>
            </title>
            <labels>
              <format>{%Value}{numDecimals:0}</format>
            </labels>
          </y_axis>
          <x_axis>
            <title>
              <text>Manager</text>
            </title>
          </x_axis>
        </axes>
      </chart_settings>
    </chart>
  </charts>
</anychart>
    

?

?

?有點特殊的是儀表圖的dashboard，如果想在一個anychart中顯示多個儀表圖，則只需要設置每一個儀表圖的x和y屬性來定義圖表的位置。從左上角開始第一個坐標為x=0,y=0；右上角為x=100,y=0；左下角為x=0,y=100，依次類推這樣整個儀表圖就出來。

      <?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <gauges>
    <gauge>
      <circular x="0" y="0" width="30" height="50">
      </circular>
      <circular x="33.3" y="0" width="30" height="50">
      </circular>
      <circular x="66.6" y="0" width="30" height="50">
      </circular>
      <linear x="0" y="50" width="33.3" height="50">
      </linear>
      <linear x="33.3" y="50" width="33.3" height="50">
      </linear>
      <linear x="66.6" y="50" width="33.3" height="50">
      </linear>
    </gauge>
  </gauges>
</anychart>
    

?最終效果如下圖所示

?