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：我在这里相当新，所以我不能评论，即使我知道这不是对这个问题的“回答”。