为什么我的 jqPlot 不渲染画布？答案

【问题标题】：Why is my jqPlot not rendering a canvas?为什么我的 jqPlot 不渲染画布？
【发布时间】：2011-11-29 21:41:14
【问题描述】：

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

谢谢，

托马斯

【问题讨论】：

标签： javascript jquery jqplot html5boilerplate

【解决方案1】：

我发现了问题。我将 jqplot 位于内部的主容器 div 设置为 display:none 在页面加载时，一旦单击“输入”按钮，就会显示 .fadeIn()

我想它不能在父显示时添加画布：无； - 我已经通过调用 $.jqplot 在用户点击进入后淡入主容器中的函数中工作......

【讨论】：

【解决方案2】：

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

【讨论】：

我也将宽度/高度直接添加到#jqplot 中，并将其更改为
它仍然没有渲染。当我在没有样板的空白页面中执行此操作时，它呈现得很好......
感谢您的意见。我发现了问题。查看更新的问题。

【解决方案3】：

当您单击按钮时，在生成的图表上使用 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

【讨论】：

【解决方案4】：

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

【讨论】：