7

I am building a Rails 3.2.11 app with Twitter Bootstrap and Flot (also HAML and Coffeescript).

In a view, I have Bootstrap tabs implemented like so (partials are rendered in the tab panes.),

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

Within a partial, I have a table. I want to render a flot chart within a td. My partial where I want to render the chart looks something like this,

  %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}}

I am applying the chart dimensions with a CSS class like this,

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

My Coffeescript looks like this. I expect the chart to plot on 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'

I have confirmed this .js is loading.

The Problem:

When the DOM initially loads, the chart renders, but it is the wrong size. The chart area (where the bars are only) is as set with the .barchart CSS, but the axes labels, etc. are outside that dimension (see http://i36.tinypic.com/2vte1rp.jpg, red dashes are border of td).

Upon refresh (I have .js that refreshes to the previously selected tab), the chart renders in the correct size I want (i.e., the axes labels are inside the dimension, see http://i38.tinypic.com/4qq15g.jpg ).

I think I have to get the correct placeholder dimensions to Flot, but don't know how. Adding width/height CSS to the td does not fix the problem. Any ideas?

4

1 回答 1

7

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

于 2013-04-22T01:13:43.770 回答