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

Question

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

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 最初打开时我看到了这个:

当我调整窗口大小或打开开发工具时，我会看到以下内容:

我点击的任何功能都会发生同样的情况，数据会更新，但我必须再次调整大小才能获得漂亮的饼图。

Answer 1

显示模态不同步；模态框需要几秒钟的时间才能正确就位。

我想 C3/D3 无法正确渲染该项目，因为它渲染到的元素不可见或处于有效的 css“显示”模式。

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

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