我正在尝试使用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,但我找不到其中两个已知问题。
谢谢,
托马斯
答案 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]]]);
}