Highmaps - 地图无法渲染

Question

我一直在使用highmaps库遇到一些问题。我收到了用户的报告，有时显示统计信息的地图无法呈现。

在查看问题时，我注意到地图渲染得非常不一致，有时很完美，但经常 - 根本不是。

在highcharts docs查阅文档时，我意识到jsfiddle上的示例遇到了完全相同的问题。有时地图根本无法渲染。我做了一个屏幕录制来显示问题。

chrome和ff中出现此问题，我还没有尝试过其他浏览器。

这是我的地图代码，它是Angular应用程序的一部分。

  function createChart() {
    chart = new Highcharts.Map({
      chart: {
        renderTo: 'mapContainer'
      },
      title: {
        text: '',
      },
      credits: {
        enabled: false
      },
      legend: {
        layout: 'horizontal',
        borderWidth: 0,
        backgroundColor: 'rgba(255,255,255,0.85)',
        floating: false,
        verticalAlign: 'bottom',
        horizontalAlign: 'center',
      },
      colorAxis: {
        maxColor: '#7b9b00',
        minColor: '#d7e241',
        type: 'linear',
        allowDecimals: false,
        marker: {
          color: 'black'
        },
        minPadding: 0.005
      },
      tooltip: {
        formatter: function() {
          return '<b>' + this.point.name + '</b><br>' +
            'Asset Hits: ' + this.point.options.hits + '<br>' +
            'Total Volume: ' + this.point.options.volume + '<br>';
        },
        style: {
          fontSize: '12px',
          fontFamily: 'Helvetica, Arial, sans-serif'
        }
      },
      series: [{
        mapData: Highcharts.maps['custom/world'],
        name: 'countries',
        showInLegend: false,
        borderWidth: 0.2,
        states: {
          hover: {
            borderWidth: 1
          }
        }
      }]
    });
  }

  scope.$on('geoData', function(event, data) {
    var validData = function (data) {
      var equal = _.isEqual(data, cachedData);
      if (!equal && data.length > 1) {
        return data;
      }
        };

        if (validData) {
          if (!chart) {
            createChart();
          }
          updateSeries(data);
        }
        cachedData = data;
      }, true);

      function updateSeries(data) {
        if (chart !== undefined) {
          if (chart.series.length > 1) {
            chart.series[1].remove();
          }
        }
        chart.addSeries({
          data: data,
          title: 'Performance by Country',
          mapData: Highcharts.maps['custom/world'],
          joinBy: ['hc-key', 'countryiso'],
          name: 'countries',
          borderWidth: 0.2,
          borderColor: 'black',
          states: {
            hover: {
              borderWidth: 1,
              color: '#7b9b00'
            }
          }
        });
      }
    }
  };
}

显示问题的视频： Link to video