7

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 内でフロート チャートをレンダリングしたいと考えています。チャートをレンダリングしたい部分は次のようになります。

  %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 に追加しても問題は解決しません。何か案は？

4

1 に答える 1

7

プレースホルダーが非表示で始まる要素内にあるようです。jQuery では、非表示の要素のサイズを取得するのに問題があり、これがプロット サイズの誤りの一般的な原因です。その場合は、 $.plot を呼び出す前に要素を表示してみてください (ちらつきを避けるために、絶対にオフスクリーンに配置できます)、後でリセットします。

于 2013-04-22T01:13:43.770 に答える