ruby-on-rails-3 - 初始页面加载时 Bootstrap 选项卡 Pane 中的浮点 Canvas 图表大小错误

Question

我正在使用 Twitter Bootstrap 和 Flot(还有 HAML 和 Coffeescript)构建 Rails 3.2.11 应用程序。

在 View 中，我像这样实现了 Bootstrap 选项卡(部分内容在选项卡 Pane 中呈现。)，

.tabbable
  %ul.nav.nav-tabs
      %li.active
        %a{'data-toggle' => 'tab', :href => '#tab1'} This is tab 1
      %li
        %a{"data-toggle" => "tab", :href => "#tab2"} This is tab 2

    .tab-content
      #tab1.tab-pane.active
        = render 'tab_one_content'
      #tab2.tab-pane
        = render 'tab_two_content'

在一个部分中，我有一张 table 。我想在 td 中渲染流程图。我想要渲染图表的部分看起来像这样，

  %table
    %tr
      %th
        Some heading text…
      %td
        -# Make the 12-month barchart
        - @chart_data = @barchart_12_mos_array.to_json
        #my_barchart.barchart{:data => {:bardata => @chart_data}}

我正在使用这样的 CSS 类来应用图表尺寸，

.barchart {
  width: 240px;
  height: 120px;
}

我的 Coffeescript 看起来像这样。我希望图表能够绘制在 document.ready 上

$ ->
  $.plot $('#my_barchart'), [
    data: $("#my_barchart").data("bardata")
    bars:
      show: true
      barWidth: (365/12)*24*60*60*1000*.75
      align: 'center'
  ],
    xaxis:
      mode: "time"
      timeformat: "%b"
      monthNames: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"]
    yaxis:
      position: 'right'

我已确认此 .js 正在加载。

问题:

当 DOM 最初加载时，图表会呈现，但尺寸错误。图表区域(只有条形图所在的位置)是使用 .barchart CSS 设置的，但轴标签等位于该维度之外(请参阅 http://i36.tinypic.com/2vte1rp.jpg ，红色破折号是 td 的边框)。

刷新后(我有 .js 刷新到之前选择的选项卡)，图表以我想要的正确大小呈现(即，轴标签位于维度内部，请参阅 http://i38.tinypic.com/4qq15g.jpg )。

我想我必须为 Flot 获取正确的占位符尺寸，但不知道如何实现。将宽度/高度 CSS 添加到 td 并不能解决问题。有什么想法吗？

Answer 1

听起来占位符位于一个开始隐藏的元素内。 jQuery 无法获取隐藏元素的尺寸，这是绘图尺寸错误的常见原因。如果是这种情况，请尝试在调用 $.plot 之前显示该元素(您可以将其绝对定位在屏幕外，以避免任何闪烁)，然后将其重置。