初始页面加载时Bootstrap选项卡窗格中的错误flot画布图表大小

Question

我正在使用Twitter Bootstrap和Flot(也是HAML和Coffeescript)构建一个Rails 3.2.11应用程序.

在一个视图中,我有像这样实现的Bootstrap选项卡(部分在选项卡窗格中呈现.),

.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'

在一个部分,我有一张桌子.我想在td内渲染一个flot图表.我想要渲染图表的部分看起来像这样,

  %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,红色破折号为边框of td).

刷新后(我有.js刷新到之前选择的选项卡),图表呈现我想要的正确尺寸(即轴标签在尺寸内,请参阅http://i38.tinypic.com/4qq15g.jpg).

我想我必须得到正确的占位符维度到Flot,但不知道如何.将宽度/高度CSS添加到td不能解决问题.有任何想法吗？

Answer 1

听起来像占位符在一个隐藏的元素内.jQuery难以获得隐藏元素的维度,这是错误大小的图的常见原因.如果是这种情况,请在调用$ .plot之前尝试显示该元素(您可以绝对定位,屏幕外,以避免任何闪烁),然后重置它.