为什么我的JQuery Flot不工作？

我想用JQuery来绘制一个使用Flot的趋势，但没有任何事情发生。为什么我的JQuery Flot不工作？

<head runat="server"> 
    <title>Phenomena Tactical Detail</title> 
    <link href="../Styles/MainStyle.css" rel="stylesheet" type="text/css" /> 
    <script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script> 
    <script src="../Scripts/jquery.flot.js" type="text/javascript"></script> 

    <script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      var data = [[0, 3], [4, 8], [10, 2]]; 
      var area = $("#plotArea"); 
      $.plot(area, data); 
     }); 
    </script> 
</head>

我的div直接放入形式：

<div class="inCenter"> 
    <div id="plotArea" style="width:600px; height:400%"></div> 
    <br /> 
    <asp:Label ID="trendTimeLabel" runat="server"></asp:Label> 
</div>

我检查了多个教程和海军报网站在线指导，但我格是空的，规定甚至没有大小。

编辑：我现在做了我的数组值的字符串，但仍然没有。

var data = [["0", "3"], ["4", "8"], ["10", "2"]];

来源

2014-07-08 Phil

没有什么不对您的数据阵列。

试着改变你的脚本：

<script type="text/javascript" language="javascript"> 
$(document).ready(function() { 
    var data = [[0, 3], [4, 8], [10, 2]]; 
    var area = "#plotArea"; 
    $.plot(area, [data]); 
}); 
</script>

我也对排行榜的高度宽度得到错误丁目控制台（F12开发工具）：

<div class="inCenter"> 
    <div class="demo-container"> 
     <div id="plotArea" class="demo-placeholder"></div> 
    </div> 
    <br /> 
    <asp:Label ID="trendTimeLabel" runat="server"></asp:Label> 
</div>

：通过更改HTML固定

复制范例从example.css中的flot下载，here供您参考：

.demo-container { 
    box-sizing: border-box; 
    width: 850px; 
    height: 450px; 
    padding: 20px 15px 15px 15px; 
    margin: 15px auto 30px auto; 
    border: 1px solid #ddd; 
    background: #fff; 
    background: linear-gradient(#f6f6f6 0, #fff 50px); 
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px); 
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px); 
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px); 
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px); 
    box-shadow: 0 3px 10px rgba(0,0,0,0.15); 
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
} 

.demo-placeholder { 
    width: 100%; 
    height: 100%; 
    font-size: 14px; 
    line-height: 1.2em; 
}

希望这应该让它工作。

来源

2014-07-08 13:01:46

新：好像我错在他们写的文档的另一部分：

注意简化海军报的内在逻辑x和y的值必须是数字（即使指定时间序列，请参阅下文了解如何执行此操作）。这是一个常见的问题，因为您可能会从数据库中检索数据并将它们直接序列化为JSON，而不会注意到错误的类型。如果您遇到神秘错误，请仔细检查您是否输入了数字而不是字符串。

你所做的一个真正的错误似乎是数据参数需要是一个点数组（数列）。如此反复删除你的数据阵列的报价，然后使用绘图功能是这样的：

var data = [[0, 3], [4, 8], [10, 2]]; 
$.plot(area, [ data ]);

老：根据海军报的FAQ你必须使用字符串而非数字。

实际上，Flot喜欢JSON数据，你刚刚得到的格式错了。仔细检查你是不是输入字符串而不是数字，如[[“0”，“-2.13”]，[“5”，“4.3”]]。这是最常见的错误，并且错误可能不会立即显示，因为Javascript可以自动进行一些转换。

所以您应将数组改成这样：

var data = [["0", "3"], ["4", "8"], ["10", "2"]];

来源

2014-07-08 11:08:52 Shiffty

谢谢。尽管如此，仍然是一个空白的div – Phil

看起来像文档和常见问题有点误导。我已经根据这个更新了我的答案。 – Shiffty

为什么我的JQuery Flot不工作？

回答

相关问题