Question

我认为这可能只是一个简单的HTML格式问题，但我找不到任何解决方案。我正在使用Leaflet.js和c3将一些图表添加到网页地图中，请参阅下面的代码。会发生什么事情是当点击一个功能时会弹出一个新窗口，其中包含有关该点的一些信息。我在那里放了一个比较几个字段的饼图。

onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var numwhite = feature.properties.WHITE / feature.properties.POP2000;
      var numblack = feature.properties.BLACK / feature.properties.POP2000;
      var numhisp = feature.properties.HISPANIC / feature.properties.POP2000;
      var nummale = feature.properties.MALES / feature.properties.POP2000;
      var numfemale = feature.properties.FEMALES / feature.properties.POP2000;
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Population (2000)</th><td>" + feature.properties.POP2000 + "</td></tr>" +
      "<tr><th>Population (2007)</th><td>" + feature.properties.POP2007 + "</td></tr>" +
      "<tr><th>Percent White</th><td>" + (numwhite.toFixed(2) * 100) + "%</td></tr>" +
      "<tr><th>Percent Black</th><td>" + (numblack.toFixed(2) * 100) + "%</td></tr>" +
      "<tr><th>Percent Hispanic</th><td>" + (numhisp.toFixed(2) * 100) + "%</td></tr>" +
      "<tr><th>Percent Male</th><td>" + (nummale.toFixed(2) * 100) + "%</td></tr>" +
      "<tr><th>Percent Female</th><td>" + (numfemale.toFixed(2) * 100) + "%</td></tr>" +"<table>"
      ;
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);

          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {
            stroke: false,
            fillColor: "#00FFFF",
            fillOpacity: 0.7,
            radius: 10
          }));
          c3.generate({
            data: {
              // iris data from R
              columns: [
              ['Percent Male', nummale],
              ['Percent Females', numfemale],
              ],
              type : 'pie'
            }
          });
        }
      });

HTML：

 <div class="modal fade" id="featureModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title text-primary" id="feature-title"></h4>
          </div>
          <div class="modal-body" id="feature-info"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
          <div>
            <div id="chart"></div>
        </div>
      </div>
    </div>

所有这一切都正常但是当div初始打开时我看到了： enter image description here

当我调整窗口大小或打开开发工具时，我看到了： enter image description here

同样的事情发生在我点击的任何功能上，数据会更新，但我必须再次调整大小以获得那个漂亮的饼图。

Answer 1

显示模态不同步;在模态正确到位之前需要几秒钟。

我想象C3 / D3无法正确渲染项目，因为它渲染的元素不可见或者在有效的css中显示＆＃34;显示＆＃34;模式呢。

因此，您可能需要将c3.generate代码移至shown事件回调中，如下所示：

$('#featureModal').on('shown.bs.modal', function (e) {
  c3.generate( //...etc.
})

使用c3.js的图表仅显示在窗口更改/刷新上

1 个答案: