首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Flash >

【转】Flash图表AnyChart应用教程八:创建向上钻取仪表盘

2012-12-27 
【转】Flash图表AnyChart应用教程八:创建向下钻取仪表盘用 AnyChart 创建向下钻取地图有两种方式:用AnyChart

【转】Flash图表AnyChart应用教程八:创建向下钻取仪表盘

AnyChart 创建向下钻取地图有两种方式:用AnyChart JavaScript库,或者用AnyChart仪表盘。本文将为你讲解第二种方式。 假设地图中包含两部分,第一部分包含USA地图,当用户点击某个州时,这个州的地图会显示在第二个地图上。

创建仪表盘布局

首先我们要用到AnyChart的仪表盘功能,这个仪表盘包含两部分,代码如下:

<?xml version="1.0" encoding="UTF-8"?><anychart>  <dashboard>    <view type="Dashboard">      <title>        <text>USA Drilldown Map</text>      </title>      <hbox width="100%" height="100%">        <view name="Country" type="Chart" width="50%" height="100%" source="USA" />        <view name="State" type="Chart" width="50%" height="100%" />      </hbox>    </view>  </dashboard></anychart>

?

如何创建仪表盘,请移步 AnyChart应用教程一

创建地图图表

然后创建一张国家地图,示例代码如下:

<chart plot_type="Map" name="USA">  <chart_settings>    <title enabled="false" />    <chart_background enabled="false" />    <data_plot_background enabled="false" />  </chart_settings>  <data_plot_settings>    <map_series source="usa/country/states.amap">      <projection type="orthographic" />      <undefined_map_region palette="Default">        <actions>          <action type="updateView" view="State" source_mode="internalData" source="State">            <replace token="{$region_amap}">{%REGION_ID}</replace>            <replace token="{$title}">{%REGION_NAME}</replace>          </action>        </actions>      </undefined_map_region>    </map_series>  </data_plot_settings></chart>

?

如图所示,我们已经定义好了第一个地图:

【转】Flash图表AnyChart应用教程八:创建向上钻取仪表盘

设置Map XML

这里我们要为所有的州配置参数化XML,{$title} 和 {$region_amap} 将由主要的图表 <action>处理:

<chart plot_type="Map" name="State">  <chart_settings>    <title>      <text>{$title}</text>    </title>    <chart_background enabled="false" />    <data_plot_background enabled="false" />  </chart_settings>  <data_plot_settings>    <map_series source="usa/states/counties/{$region_amap}.amap">      <projection type="orthographic" />      <undefined_map_region palette="Default" />    </map_series>  </data_plot_settings></chart>

?

向下钻取仪表盘

下面我们将 "State"放入<charts>部分就可以了,如图所示:

【转】Flash图表AnyChart应用教程八:创建向上钻取仪表盘

?

?

?

?

本文转自:http://www.evget.com/zh-CN/info/catalog/18170.html?

热点排行