Jqplot在bootstrap选项卡上

Question

我在bootstrap选项卡上画一个简单的jqplot图有问题。

HTML:

<div id="tab">
<ul class="nav nav-tabs">
<li id="tabvariables" class="active"><a data-toggle="tab" class="custom_tab" href="#variables">Variables</a></li>
<li id="tabphoto"><a data-toggle="tab" class="custom_tab" href="#photo">photo</a></li>
<li id="tabtendencia"><a data-toggle="tab" class="custom_tab" href="#tendencia">Tendencia</a></li>
</ul>
<div class="tab-content">
<div id="variables" class="tab-pane fade in active custom_variables"></div>
<div id="photo" class="tab-pane fade"></div>
<div id="tendencia" class="tab-pane fade">
<div id="contenedorGrafica" style="border: 1px solid RED;">
<div id="chartdiv"></div>
</div>
</div>
</div>
</div>

JAVASCRIPT(示例来自jqplot web):

var l1 = [18, 36, 14, 11];
var l2 = [[2, 14], [7, 2], [8,5]];
var l3 = [4, 7, 9, 2, 11, 5, 9, 13, 8, 7];
var plot1 = $.jqplot('chartdiv', [l1, l2, l3],  {
    title: "I was hidden",
    lengend:{show:true},
    series:[{},{yaxis:'y2axis'}, {yaxis:'y3axis'}],
    cursor:{show:true, zoom:true},
    axesDefaults:{useSeriesColor:true, rendererOptions: { alignTicks: true}}
});
$('#tab').tabs({ activate : function(event, ui) {
    plot1.replot();
}});

当我点击图形标签(tabtendencia)它不画任何东西，但我可以看到它保留了一个空间来尝试绘制图形。

截图:https://i.stack.imgur.com/ewRhp.png

Answer 1

with

$('#tab').tabs({ activate : function(event, ui) {
    plot1.replot();
}});

或

$("#tabtendencia").click(function() {
    plot1.replot();
});

右转但是如果我双击标签…