Anychart图表系列九之Dashboard

Dashboard中文释义为仪表盘、控制台，这个用词很生动，它指的是多个图组合在一起的效果，就像模具工作中的操作台一样由多种图形仪器组成。

 在项目中，特别是高管平台，领导看重的是多套数据的汇总，所以dashboard更为重要，下例是一个典型的dashboard，后面就从它入手，介绍dashboard的使用。

 

第一步，创建<dashboard>，要创建多图整合，就必须在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>

 最终效果如下图所示