我試圖在一段時間內創建一個溫度變化圖,所以開始時,我試圖繪製一些圖上繪製的測試數據,但這些數據似乎都不想顯示。我對JavaScript和flot有點新鮮,因此我試圖根據看到其他人如何創建圖表來拼湊所需的代碼。無法獲得flot圖來顯示
x軸上的時間數據,我在代碼中創建的只是爲了繪製溫度,而我從包含測試數據的.json文件中檢索溫度數據。將數據點放入一個集合以傳遞到繪圖函數似乎會合在一起,但我無法獲得顯示。相反,我得到的只是圖像中顯示的內容,我將在代碼後顯示。任何人都可以讓我知道我做錯了什麼或我失蹤了什麼?我真的很難過這裏。
源代碼(通過編輯海軍報示例頁面製作):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
\t <title>Flot Examples: Resizing</title>
\t <link href="../examples.css" rel="stylesheet" type="text/css">
\t <link href="../shared/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
\t <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
\t <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
\t <script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script>
\t <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
\t <script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
\t <script type="text/javascript">
\t
\t $(document).ready(function() {
\t \t //Creating an array to hold the plot data
\t \t var plotdata = new Array();
\t \t $.getJSON('test_data.json', function (data) {
\t \t \t //Creating a base date to make times off of
\t \t \t var basedate = new Date("February 20, 2017 08:00");
\t \t for(var i = 0; i < 10; i++)
\t \t {
\t \t \t var datepoint = new Date(basedate.getTime() + 600000*i).getTime();
\t \t \t switch(i) {
\t \t \t \t case 0:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-22 20:00"][0];
\t \t \t \t break;
\t \t \t \t case 1:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-18 22:50"][0];
\t \t \t \t break;
\t \t \t \t case 2:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-20 22:00"][0];
\t \t \t \t break;
\t \t \t \t case 3:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-20 13:50"][0];
\t \t \t \t break;
\t \t \t \t case 4:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-19 7:00"][0];
\t \t \t \t break;
\t \t \t \t case 5:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-21 15:30"][0];
\t \t \t \t break;
\t \t \t \t case 6:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-18 3:50"][0];
\t \t \t \t break;
\t \t \t \t case 7:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-16 5:20"][0];
\t \t \t \t break;
\t \t \t \t case 8:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-19 6:10"][0];
\t \t \t \t break;
\t \t \t \t case 9:
\t \t \t \t var temppoint = data["node 10"][0]["2017-02-16 0:40"][0];
\t \t \t \t break;
\t \t \t }
\t \t \t //plotdata[i] = [datepoint, temppoint];
\t \t \t plotdata.push(new Array(datepoint, temppoint));
\t \t }
\t \t console.log(plotdata)
\t \t }) //End of getJSON
\t \t var dataset = [
\t \t {
\t \t \t label: "temperature",
\t \t \t data: plotdata
\t \t }
\t \t \t ];//End of var dataset declaration
\t \t $.plot($("#placeholder"), dataset, {
\t \t \t series: {
\t \t \t \t lines: { show: true },
\t \t \t \t points: {show: true },
\t \t \t },
\t \t \t grid: {
\t \t \t \t hoverable: true,
\t \t \t \t clickable: true
\t \t \t },
\t \t \t xaxis:
\t \t \t {
\t \t \t \t mode: "time",
\t \t \t \t timeformat: "%h: %M\n %m/%d/%y",
\t \t \t \t min: (new Date("2017/02/19")).getTime(),
\t \t \t \t max: (new Date("2017/02/21")).getTime()
\t \t \t },
\t \t \t yaxis:
\t \t \t {
\t \t \t \t min: 50, max: 100, tickSize: 5
\t \t \t }
\t \t });
\t }) //End of (document).ready
\t </script>
</head>
<body>
\t <div id="content">
\t \t <div class="demo-container">
\t \t \t <div id="placeholder" class="demo-placeholder"></div>
\t \t </div>
\t </div>
</body>
</html>
這是從代碼是什麼結果: http://imgur.com/a/1lTvj
任何見解,以我所能做解決這個將非常感激。謝謝!
請參閱[本](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323)的詳細解釋。 – Raidri