将jqPlot嵌入bootstrap药丸中

Question

我正在尝试将不同的图表链接到我的引导程序中的不同选项卡。但是，它似乎不起作用。

我的标签段html是：

<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
    <li class="active"><a href="#system-analytics" role="tab" data-toggle="tab">System Analytics</a></li>
    <li><a href="#user-analytics" role="tab" data-toggle="tab" onclick="loadchart();">User Analytics</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="system-analytics">
    <div id="id_user_stats" class="col-lg-offset-1 col-lg-5" style="height: 400px; width: 90%"></div>
</div>
<div class="tab-pane" id="user-analytics">
    <div id="myChart" class="col-lg-offset-1 col-lg-5" style="height: 400px; width: 90%"></div>
</div>
</div>

javascript代码如下：

$(document).ready(function() {
    var ticks_user_stats = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
    var options_user_stats = { title: 'Visitors per Day',
                axes: {xaxis: {renderer: $.jqplot.CategoryAxisRenderer}},
                series: [{label: ' dev '},],
                legend: {show: true, placement: 'outsideGrid', location: 'e'}};


    $.jqplot('id_user_stats', [[1, 16, 2, 11, 1, 1, 4, 11, 6, 1]], options_user_stats); 
});

function loadchart() {
    var options1 = { title: 'Number of Page Visits per Day' };

    $.jqplot('myChart', [[27, 219, 9, 88, 15, 15, 64, 152, 12, 0]], options1);

}