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

Question

我正在尝试使用 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，但我找不到它们两个的任何已知问题。

谢谢，

托马斯

Answer 1

你能展示你的 CSS 对“plot”类做了什么吗？ jqPlot 使用页面 表示您需要确保添加宽度和到绘图目标的高度。

Answer 2

单击按钮时，在生成的图表上使用replot 函数。

// 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

Answer 3

我之前遇到过这个问题，由于某种原因，以下 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]]]);
}

Answer 4

我发现了问题。我将 jqplot 所在的主容器 div 设置为在页面加载时显示：无，一旦您单击“输入”按钮，就会显示 .fadeIn()

我想当显示父级时它无法添加画布：没有任何; - 我通过在用户单击 Enter 后在主容器中淡入淡出的函数内调用 $.jqplot 来使其工作...