jVectorMap呈现太小

问题描述

我的jVectorMap没有达到我在包含div上提供的新高度，只在54px的默认高度（？）下呈现。

这是在我的scripts.js文件的document.ready函数中：
$ b

  $（'＃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-usastyle =width：600px; height：400px;>< / div> 
< / section> 
  

文档建议如果我在包含div上设置了宽度和高度，应该应用创建的jVectorMap。该div没有隐藏在任何一点（我读这里：可能是一个问题），并且当vectormap被初始化时定义 $（'＃team-map-usa'） clientHeight和clientWidth。

这是我第一次使用jVectorMap，我必须缺少一些东西。任何有关如何使地图显示大小合适的建议？如果您不包括jquery-jvectormap-2.0.1 .css在你的页面上，你需要风格的jVectorMap生成的内容。

在你的情况下，添加以下内容到你的风格应该做的伎俩

  .jvectormap-container {
 height：100％; 
宽度：100％; 
} 
  

您可以查看希望能找到你所有的风格需要。

My jVectorMap isn't taking the new height I'm providing on the containing div and only renders at the default (?) height of 54px.

This is in a document.ready function in my scripts.js file:

$('#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);
  })
});

Containing div:

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

Documentation suggests that if I have a width and height set on the containing div, that should be applied to the created jVectorMap. The div is not hidden at any point (which I read here: Jvectormap very small on div change could be an issue) and $('#team-map-usa') clientHeight and clientWidth are both defined when the vectormap is initialized.

This is my first time using jVectorMap and I must be missing something. Any suggestions of how to make the map appear the right size?

解决方案

If your not including the jquery-jvectormap-2.0.1.css on your page you need to style the content generated by jVectorMap.

In your case adding the following to you styles should do the trick

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

You can look at the http://jvectormap.com/css/jquery-jvectormap-2.0.1.css to hopefully find all the styles you need.

这篇关于jVectorMap呈现太小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！