我正在使用来自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') !!}
所以，我把显示代码放在下面的标签中（使用bootstrap）：
<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 - 在第二个选项卡上单击:(显示不正确;图表变小。）
知道如何解决这个问题吗？
EDIT 我想过调用$（window）.trigger（＆＃39; resize＆＃39;）;如下所示，但它没有工作
$('#tab2').on('click',function(){
$(window).trigger('resize');
});
答案 0 :(得分：2)
呈现Google图表时，其大小取决于其所在元素的大小。由于在绘制第二个图表时隐藏了第二个选项卡，因此它默认为标准大小。选择该选项卡后，您需要重新调整图表的大小。此外，如果您希望在窗口更改大小时让图表响应，则必须重新调整大小。查看Google chart redraw/scale with window resize了解如何重新调整图表大小。
答案 1 :(得分：2)
我对bootsrap模式有同样的问题。 修复是通过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
]);
答案 2 :(得分：1)
Lavacharts Dev here :)所以图表应该已经响应，并在窗口调整大小时调整大小。这是一个之前提出的问题，据我所知，它正在发挥作用。至于在选项卡中进入视图时调整大小，我不确定如何处理它。我想在lava.js模块中添加一个端点用于手动调整大小，因此用户可以使用显示的选项卡的bootstrap事件来激活调整大小。
思想？
PS：我在这里相当新，所以我不能评论，即使我知道这不是问题的“答案”。答案 3 :(得分：0)
发送一个调整大小的事件对我有用，希望对我有帮助
$("your-tab").on("click", function(){
window.dispatchEvent(new Event('resize'));
});