lavacharts 无法使用选项卡正确显示图表大小（第一个选项卡可以，第二个选项卡不行）

Question

我正在使用来自https://github.com/kevinkhill/lavacharts 的名为 lavacharts 的包。

为了显示简单的图表，我在控制器中使用 show() 方法执行以下操作：

   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-on 第一个加载/单击的选项卡：（正确显示）

http://postimg.org/image/k18bhfsnd/ 单击第二个选项卡的屏幕截图 2：（显示不正确；图表变小。）

知道如何解决这个问题吗？

编辑 我想调用 $(window).trigger('resize');如下所示，但它不起作用

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

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

Answer 1

我在 bootsrap modal 上遇到了同样的问题。 修复是通过 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 here :) 所以图表应该已经响应，并在窗口调整大小时调整大小。这是之前提出的一个问题，据我所知，它正在发挥作用。至于在选项卡中显示时调整大小，我不确定如何处理。我想在 lava.js 模块中添加一个端点以手动调整大小，因此用户可以使用选项卡显示的引导事件来激活调整大小。

想法？

PS：我是新手，所以我无法发表评论，尽管我知道这不是问题的“答案”。

Answer 4

调度调整大小事件对我有用，希望对您有所帮助

$("your-tab").on("click", function(){
    window.dispatchEvent(new Event('resize'));
});