【问题标题】:jqplot on bootstrap tab引导选项卡上的 jqplot
【发布时间】:2015-07-16 10:50:13
【问题描述】:

我无法在引导选项卡上绘制简单的 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) 时,它不会绘制任何内容,但我可以看到它保留了尝试绘制图形的空间。

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

【问题讨论】:

    标签: javascript jqplot bootstrap-tabs


    【解决方案1】:

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

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

    正确,但如果我双击选项卡...

    我不明白...

    【讨论】:

    • 谢谢,最后我在“tab”创建中创建了一个函数来创建一个 jqplot,它运行正常
    猜你喜欢
    • 2013-10-10
    • 2021-08-15
    • 2013-11-18
    • 2012-10-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多