用 AnyChart 創(chuàng)建向下鉆取地圖有兩種方式：用AnyChart JavaScript庫(kù)，或者用AnyChart儀表盤。本文將為你講解第二種方式。 假設(shè)地圖中包含兩部分，第一部分包含USA地圖，當(dāng)用戶點(diǎn)擊某個(gè)州時(shí)，這個(gè)州的地圖會(huì)顯示在第二個(gè)地圖上。

創(chuàng)建儀表盤布局

首先我們要用到AnyChart的儀表盤功能，這個(gè)儀表盤包含兩部分，代碼如下：

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

如何創(chuàng)建儀表盤，請(qǐng)移步 AnyChart應(yīng)用教程一

創(chuàng)建地圖圖表

然后創(chuàng)建一張國(guó)家地圖，示例代碼如下：

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

如圖所示，我們已經(jīng)定義好了第一個(gè)地圖：

設(shè)置Map XML

這里我們要為所有的州配置參數(shù)化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>部分就可以了，如圖所示：