Highmaps地圖比例尺

Question

如何調整給定圖表div容器內地圖形狀的大小？ 我沒有看到任何方法來設置比例。我試圖做一些類似於demo的東西，但只使用少數幾個狀態（彼此相鄰）。當我刪除未使用的狀態時，其餘狀態在給定圖表區域內仍然顯示爲小。鑽到一個狀態後，您可以看到一個適合容器大小的放大版本。現在，當您單擊「向上鑽取」按鈕時，您會看到地圖路徑現在填充圖表容器。這是一個粗略的example。 這裏是div容器：

<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div> 

這裏是用來生成圖表的代碼（見的jsfiddle測試數據）：

// Set drilldown pointers 
    $.each(Highcharts.maps['US-FL'], function() { 
     this.drilldown = this.id; 
    }); 

    // Add some real data 
    $.each(Highcharts.maps['US-FL'], function() { 
     //this.value = Math.round(Math.random() * 100); 
     var theID = this.id.toString(); 
      var theData; 
      data1.some(function (arrayItem) { 
       var x = arrayItem[0]; 
       console.log(x); 
       if (x == theID) { 
        theData = arrayItem[1]; 
        return theData; 
       } 
      }); 
      this.value = theData; 
    }); 

    $.each(drilldownSeries, function() { 
     $.each(this.data, function() { 
      var theID = this.id.toString(); 
      var theData; 
      data1.some(function (arrayItem) { 
       var x = arrayItem[0]; 
       //console.log(x); 
       if (x == theID) { 
        theData = arrayItem[1]; 
        return theData; 
       } 
      }); 
      this.value = theData; 
     }); 
    }); 

    // Some responsiveness 
    var small = $('#container').width() < 400; 

    // Instanciate the map 
    $('#container').highcharts('Map', { 
     chart: { 
      events: { 
       drilldown: function (e) { 
        this.setTitle(null, { 
         text: e.point.name 
        }); 
        e.seriesOptions.name = e.point.name; 
       }, 
       drillup: function (e) { 
        this.setTitle(null, { 
         text: 'Florida' 
        }); 
       } 
      } 
     }, 

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

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

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

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

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

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

     series: [{ 
      data: Highcharts.maps['US-FL'], 
      name: 'State of Florida', 
      dataLabels: { 
       //enabled: true, 
       formatter: function() { 
        return this.point.id.substr(3, 2); 
       }, 
       format: null 
      } 
     }], 

     drilldown: { 
      series: drilldownSeries, 
      activeDataLabelStyle: { 
       color: 'white' 
      }, 
      drillUpButton: { 
       relativeTo: 'spacingBox', 
       position: { 
        x: 0, 
        y: 60 
       } 
      } 
     } 
    }); 
}); 

Answer 1

事實上，它看起來像一個可能的錯誤，在這裏https://github.com/highslide-software/highcharts.com/issues/2750報道這一刻它是beta版本，所以可以包含一些bug。瞭解。