【转】Flash图表AnyChart应用教程八:创建向下钻取仪表盘-优快云博客

本文介绍使用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>

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

向下钻取,FusionCharts,美国地图

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