Question

我需要能够绘制美国作为州的地图，然后单击一个州以仅显示该州的县分区为州。我正在使用发现here的基本演示。我对此进行了扩展，并且遇到了一个问题，即数据没有呈现出饱和度（即所有区域都为空值）。我们的geojson来源是内部ESRI服务，该服务使用完整的fips代码作为区域标识符，并且数据包含“ Maparea”属性，然后在joinBy子句中使用该属性：

joinBy: ['fips', 'Maparea']

数据是从我们的数据源中动态撤回的（REST调用），但是即使使用硬编码数据，也不会出现导致此问题的原因。

如果我仅显示州或县，则此方法有效。如果添加了向下钻取功能，则会丢失有关向下钻取序列的信息，然后向上钻取会产生的有趣工件，该国家地图现在具有针对我单击的州而不是“形状”状态的县。所以，我有两个问题：

下钻不会产生choropleth
向上钻取会生成损坏的地图

我使用CT作为状态创建了一个简单的演示。点击它，它应该使县在CT和choropleth。向上钻取应该回到状态图。演示here。代码（减去测试数据）：

// Set drilldown pointers
$.each(statedata.data, function(i) {
  this.drilldown = this.Maparea.substring(0, 2);
});

// Instantiate the map
Highcharts.mapChart('container', {
  chart: {
    map: stateMap,
    events: {
      drilldown: function(e) {
        if (!e.seriesOptions) {
          var chart = this;
          
          //Neded this bit to just show the county shapes
          chart.update({
            chart: {
              map: countyMap
            }
          });
          
          chart.addSeriesAsDrilldown(e.point, [{
            mapData: countyMap
          }, countyData]);

        }

        this.setTitle(null, {
          text: e.point.areaname
        });
      },
      drillup: function() {
        this.setTitle(null, {
          text: ''
        });
      }
    }
  },

  title: {
    text: 'Highcharts Map Drilldown'
  },

  subtitle: {
    text: '',
    floating: true,
    align: 'right',
    y: 50,
    style: {
      fontSize: '16px'
    }
  },

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  colorAxis: {
    min: 0,
    minColor: '#E6E7E8',
    maxColor: '#005645'
  },

  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },

  plotOptions: {
    map: {
      states: {
        hover: {
          color: '#EEDD66'
        }
      }
    }
  },

  series: [{
    map: stateMap
  }, statedata],

  drilldown: {
    activeDataLabelStyle: {
      color: '#FFFFFF',
      textDecoration: 'none',
      textOutline: '1px #000000'
    },
    drillUpButton: {
      relativeTo: 'spacingBox',
      position: {
        x: 0,
        y: 60
      }
    }
  }
});

Answer 1

请注意，在官方演示中不存在chart.map更新-这种行为改变了追溯功能的工作。

尝试按以下方式将地图分配给细分数据系列：

mapData: Highcharts.geojson(countyMap),

演示：https://jsfiddle.net/BlackLabel/4hcxeku7/

这是您要实现的输出吗？

来自geojson的Highcharts Maps Drilldown Map

1 个答案:

来自geoj​​son的Highcharts Maps Drilldown Map

1 个答案:

来自geojson的Highcharts Maps Drilldown Map