lavacharts'沒有正確顯示圖表大小使用選項卡（第一個選項卡是好的，第二個選項卡不好）

Question

我使用的套件caled lavacharts從https://github.com/kevinkhill/lavacharts。

要顯示簡單的圖表，我的在我的控制器，該方法顯示（以下）：

public function show($id) 
    { 
    $product = Product::findOrFail($id); 

    $prices = \Lava::DataTable(); 


    $prices->addDateColumn('Month') 
     ->addNumberColumn('Retailer Price') 
     ->addNumberColumn('Consumer Price') 


     ->addRow(array('2014-10-1', 67, 65)) 
     ->addRow(array('2014-10-2', 68, 65)) 
     ->addRow(array('2014-10-3', 68, 62)) 
     ->addRow(array('2014-10-4', 72, 62)) 
     ->addRow(array('2014-10-5', 61, 54)) 
     ->addRow(array('2014-10-6', 70, 58)) 
     ->addRow(array('2014-10-7', 74, 70)) 
     ->addRow(array('2014-10-8', 75, 69)) 
     ->addRow(array('2014-10-9', 69, 63)) 
     ->addRow(array('2014-10-10', 64, 58)) 
     ->addRow(array('2014-10-11', 59, 55)) 
     ->addRow(array('2014-10-12', 65, 56)) 
     ->addRow(array('2014-10-13', 66, 56)) 
     ->addRow(array('2014-10-14', 75, 70)) 
     ->addRow(array('2014-10-15', 76, 72)) 
     ->addRow(array('2014-10-16', 71, 66)) 
     ->addRow(array('2014-10-17', 72, 66)) 
     ->addRow(array('2014-10-18', 63, 62)) 
     ->addRow(array('2014-10-19', 63, 55)) 
     ->addRow(array('2014-10-20', 63, 56)) 
     ->addRow(array('2014-10-21', 63, 55)) 
     ->addRow(array('2014-10-24', 63, 33)) 
     ->addRow(array('2014-10-29', 63, 64)) 
     ->addRow(array('2014-10-30', 63, 63)); 

    $linechart = \Lava::LineChart('Price_History') 
     ->dataTable($prices) 
     ->title('Price history for: '.$product->name) 
     ->legend(\Lava::Legend(array('position' => 'in'))); 

    // dd($product); 
    return view('admin.products.show', compact('product')); 
    } 

爲了從在視圖葉片顯示控制器中，我只把下面的代碼在葉片：

<div id="price_history_chart"></div> 
{!! \Lava::render('LineChart', 'Price_History','price_history_chart') !!} 

於是，我把上述顯示用代碼在標籤像下面（具有自舉使用）：

<div class="tab-content mar-top"> 
       <div id="tab1" class="tab-pane fade active in"> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <div class="panel"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             First Tab 
            </h3> 
           </div> 
           <div class="panel-body"> 
            <div class="col-md-8"> 
             <div class="panel-body"> 
              <div class="table-responsive"> 
               <table class="table table-bordered table-striped" id="users"> 
                <tr> 
                 <td>First Tab</td> 
                 <td>   
                 <div id="price_history_chart"></div> 
                  {!! \Lava::render('LineChart', 'Price_History','price_history_chart') !!} <!-- first tab display correctly like the screenshot --> 

                 </td> 
                </tr> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div id="tab2" class="tab-pane fade"> 
        <div class="row"> 
         <div class="col-lg-12"> 
          <div class="panel"> 
           <div class="panel-heading"> 
            <h3 class="panel-title"> 
             Second Tab 
            </h3> 
           </div> 
           <div class="panel-body"> 
            <div class="col-md-12"> 
             <div class="panel-body"> 
              <div class="table-responsive"> 
               <table class="table table-bordered table-striped" id="users"> 

                <tr> 
                 <td>Second Tab</td> 
                 <td> 
                  <div id="price_history_chart"></div> 
                  {!! \Lava::render('LineChart', 'Price_History','price_history_chart') !!} <!-- second tab the size doesn't render properly like the screenshot --> 

                 </td> 
                </tr> 
               </table> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

      </div> 

</div> 

問題：

http://postimg.org/image/o9gsju91f/ 截圖1對第一個選項卡裝載/點擊：（顯示正確地）

http://postimg.org/image/k18bhfsnd/ 截圖2上第二個標籤點：（顯示不正確;圖表變得更小）。

任何想法如何解決這個問題？我想調用$（window）.trigger（'resize'）;我想調用$（window）.trigger（'resize'）;像下面一樣，但它不起作用

$('#tab2').on('click',function(){ 

    $(window).trigger('resize'); 
}); 

Answer 1

我有與靴子模式相同的問題。 解決方法是通過在PHP代碼的配置，雖然我的是3.0版本

您的代碼：

$linechart = \Lava::LineChart('Price_History') 
     ->dataTable($prices) 
     ->title('Price history for: '.$product->name) 
     ->legend(\Lava::Legend(array('position' => 'in'))); 

新代碼：

$linechart = \Lava::LineChart('Price_History') 
     ->dataTable($prices) 
     ->title('Price history for: '.$product->name) 
     ->width(800)//add appropriate width 
     ->legend(\Lava::Legend(array('position' => 'in'))); 

在3。0代碼將一直

$datatable = \Lava::DataTable(); 
    \Lava::LineChart('Price_History',$datatable,[ 
     'title'=>'Price history for: '.$product->name, 
     'width'=>800 
    //and you other configs 
    ]); 

Answer 2

當Google圖表呈現時，其大小取決於它所在的元素的大小。由於第二個選項卡在繪製第二個圖表時隱藏，因此默認爲標準大小。選擇該選項卡時，您需要重新調整圖表的大小。另外，如果您希望在窗口更改大小時讓圖表響應，則必須重新調整大小。查看Google chart redraw/scale with window resize瞭解如何重新調整圖表大小。

Answer 3

Lavacharts Dev這裏:)因此，圖表應該已經響應，並調整窗口調整大小。這是一個前所未有的問題，據我所知，它正在起作用。至於在標籤中顯示時調整大小，我不確定如何處理。我想爲lava.js模塊添加一個端點用於手動調整大小，以便用戶可以使用顯示的選項卡的引導事件來激活調整大小。

想法？ PS：我在這裏相當新，所以我不能評論，即使我知道這不是對這個問題的「回答」。