用 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>
如圖所示，我們已經定義好了第一個地圖：
設置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>部分就可以了，如圖所示：
