爲什麼我的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不工作？

回答

相關問題