为什么我的jqPlot没有渲染画布?

时间:2011-11-29 21:41:15

标签: javascript jquery jqplot html5boilerplate

我正在尝试使用jqPlot作为条形图,我无法让它显示任何内容。

我已经包含了jqPlot代码和所有插件。我没有收到任何错误

我直接复制了示例代码:

HTML:

<div id="jqplot" class="plot">

</div>

使用Javascript:

"use strict";
(function ($){

        $.jqplot('jqplot',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

})(jQuery);

它将'jqplot-target'类添加到'jqplot'div中,因此javascript必须正常工作,但它没有向div添加画布/图表,它只显示一个带有添加的类的空div它。

为什么这不是渲染的任何想法?

我也在使用html5boilerplate,但我找不到其中两个已知问题。

谢谢,

托马斯

4 个答案:

答案 0 :(得分:5)

我发现了问题。我有jqplot内部设置的主容器div显示:在页面加载时没有,一旦你点击'enter'按钮就会显示.fadeIn()

我认为当父显示时它无法添加画布:none; - 我通过在用户单击enter后调用主容器中淡入的函数内的$ .jqplot来实现它...

答案 1 :(得分:2)

你能说明你的CSS对班级“情节”的影响吗? jqPlot Usage page表示您需要确保为绘图目标添加宽度和高度。

答案 2 :(得分:0)

单击按钮时,在生成的图表上使用重新绘制功能。

// create your chart
var plot1 = $.jqplot(...);

// hook the button press
$("button#enter").on("click", function(){
    // fade your tab in, wait for it to complete,
    $(".tab").fadeIn(1000, function(){
        // then replot, if not already drawn
        if(!plot1._drawCount){
            plot1.replot();
        }
    });
});

http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

答案 3 :(得分:0)

我之前遇到过这个问题,由于某种原因,以下jqplot代码不起作用:

$(document).ready(function () {
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
}

然而,当我将$(document).ready(function {...}切换到jQuery(function($){..}时,jqplot代码正常工作。

jQuery(function ($) {
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
}