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

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

?

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

?

      <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>是水平左右布局，所以如果要達(dá)到上圖那種效果則需要先定義一個(gè)上下布局再定義水平布局：

?

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

?

?

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

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

?

?

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

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

?最終效果如下圖所示

?