Question

我正在尝试重新绘制load或show上的NVD3图表..但它不起作用，因为我需要为我的页面提供我需要的图表display:none;但图表是在重新加载width;25px;之后但我设置为窗口宽度的100% ..

当我调整浏览器大小时，当我加载页面时，一切正常工作......我为此编写了这段代码：

 // SLIDEUP
  $('#slide').click(function(){
    $('#border2').slideToggle(500);
    $('#slide1').slideToggle(500);
  });

  $('#slide').click(function (e) {
    e.preventDefault()
    $('#slide1').tab('show')
    $('#chart1 svg').trigger('resize'); // Added this line to force NVD3 to redraw the chart
});

   /* CHART */
   #slide1 {display: none; position: relative; width: 100%; overflow: hidden; right: 25px;}
   #chart1 { width: 100%; height: 25em; }

<div id="slide1">
    <div class="col-xs-12" id="margin-chart">
        <svg id="chart1"></svg>
    </div>
</div>

Answer 1

<强>解决：

多数民众赞成不是一个非常清晰的版本，但效果非常好，我可以帮助别人......

我只是通过.animation做了我设置高度为0所以图表可以完全加载然后通过jQuery我设置.animation进行高度扩展并且它的工作完美..这是代码vo NVD3或其他图表（使用NVD3和Rickshawn图表测试）

＆＃13;

  $('#slide').click(function(){
    $('#border2').slideToggle(500);
  });

  $("#slide").click(function(){
    if($('.slide1').hasClass('showtable')) {
        $('.slide1.showtable').animate({height:300},500).removeClass('showtable');
  } else { 
        $('.slide1').animate({height:0},500)
        $('.slide1').addClass('showtable');
      }
  });

＆＃13;

   /* CHART */
   .slide1 { position: relative; width: 100%; right: 25px;}
   .slide1.showtable {height: 0;}
    #chart1 {height: 300px;}

＆＃13;

<div class="slide1 showtable">
     <svg id="chart1"></svg>
</div>

＆＃13;

负载'show'上的NVD3重绘图表

1 个答案: