javascript - jVectorMap 渲染太小

Question

我的 jVectorMap 没有采用我在包含的 div 上提供的新高度，并且仅以 54px 的默认(？)高度呈现。

这是在我的 scripts.js 文件中的 document.ready 函数中:

$('#team-map-usa').vectorMap({
  map: 'us_lcc_en',
  backgroundColor: '#ffffff',
  hoverColor: '#999999',
  color: '#dddddd',
  normalizeFunction: 'polynomial',
  values: myData,
  scaleColors: ['#d0c4dc', '#d1b0eb', '#b296cb', '#47006b'],
  onLabelShow: function(event, label, code) {
    label.text(code);
  })
});

包含div:

    <section id="top">
      <div id="team-map-usa" style="width: 600px; height: 400px;"></div>
    </section>

文档建议如果我在包含的 div 上设置了宽度和高度，则应将其应用于创建的 jVectorMap。 div 在任何时候都没有隐藏(我在这里读到:Jvectormap very small on div change 可能是个问题)并且 $('#team-map-usa') clientHeight 和 clientWidth 都在 vectormap 时定义已初始化。

这是我第一次使用 jVectorMap，我一定遗漏了一些东西。有关如何使 map 显示正确大小的任何建议？

Answer 1

如果您的页面上没有包含 jquery-jvectormap-2.0.1.css，您需要设置由 jVectorMap 生成的内容的样式。

在您的情况下，将以下内容添加到您的样式中应该可以解决问题

.jvectormap-container {
    height:100%;
    width:100%;
}

你可以看看http://jvectormap.com/css/jquery-jvectormap-2.0.1.css希望找到您需要的所有样式。