为什么 jqplot 无法在 document.ready 上工作

Question

我正在尝试使用 jqplot 直观地显示我的数据，它在我的页面上运行没有任何问题，但，当我在 document.ready() 中调用它时，它不再起作用了。所以问题与 $(document).ready(function () {} of cource.

有关

有没有人可以enter code here帮我一下？

<div id="chartdiv" style="height: 400px; width: 500px;"></div>
<div id="chartdiv2" style="height: 400px; width: 500px;"></div>
<div id="chartdiv3" style="height: 400px; width: 500px;"></div>

<!-- Scripts JS  -->
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/jqPlot/jquery.jqplot.min.js"></script>
<script src="~/Scripts/jqPlot/plugins/jqplot.pieRenderer.min.js"></script>

<!-- CSS  -->
<link href="~/Scripts/jqPlot/jquery.jqplot.min.css" rel="stylesheet" />

<script>
//It works well

    $.jqplot('chartdiv', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
    
 //It not work
    $(document).ready(function () {           

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

</script>

Answer 1

图表已创建，问题出在您的 CSS 上。在 div 上设置相对位置可解决此问题。请参阅我的 Fiddle 以获得理由。

<div id="chartdiv3" style="height: 400px; width: 500px; position: relative;"></div>

https://jsfiddle.net/4v0ueohc/

Fiddle 基于 JQPlot 1.0.9 和 JQuery 3.2.1.

为什么 jqplot 无法在 document.ready 上工作

why jqplot not working on document.ready

jquery

jqplot

document-ready