无法显示浮点图

Question

我正在尝试创建一段时间内的温度变化图，所以首先，我正在尝试绘制一个图表，上面绘制了一些测试数据，但是 none的数据似乎要显示。我对 JavaScript 和 flot 有点陌生，所以我尝试根据其他人如何在 flot 中创建图表来拼凑所需的代码。

x 轴上的时间数据，我在代码中创建只是为了绘制温度，同时我从 .json 文件中检索温度数据，其中包含测试数据它。将数据点放入一个集合中以传递到绘图函数中似乎可以很好地融合在一起，但我就是无法显示。相反，我得到的只是我将在我的代码之后显示的图像中显示的内容。任何人都可以让我知道我做错了什么或我错过了什么吗？老实说，我在这里被难住了。

源代码（编辑flot示例页面制作）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Flot Examples: Resizing</title>
 <link href="../examples.css" rel="stylesheet" type="text/css">
 <link href="../shared/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css">
 <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
 <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
 <script language="javascript" type="text/javascript" src="../shared/jquery-ui/jquery-ui.min.js"></script>
 <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>

 <script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>

 <script type="text/javascript">

 
 $(document).ready(function() {


  //Creating an array to hold the plot data
  var plotdata = new Array();

  $.getJSON('test_data.json', function (data) {

   //Creating a base date to make times off of
   var basedate = new Date("February 20, 2017 08:00");

  for(var i = 0; i < 10; i++)
  {
   var datepoint = new Date(basedate.getTime() + 600000*i).getTime();
   switch(i) {

    case 0:
    var temppoint = data["node 10"][0]["2017-02-22 20:00"][0];
    break;

    case 1:
    var temppoint = data["node 10"][0]["2017-02-18 22:50"][0];
    break;

    case 2:
    var temppoint = data["node 10"][0]["2017-02-20 22:00"][0];
    break;

    case 3:
    var temppoint = data["node 10"][0]["2017-02-20 13:50"][0];
    break;

    case 4:
    var temppoint = data["node 10"][0]["2017-02-19 7:00"][0];
    break;

    case 5:
    var temppoint = data["node 10"][0]["2017-02-21 15:30"][0];
    break;

    case 6:
    var temppoint = data["node 10"][0]["2017-02-18 3:50"][0];
    break;

    case 7:
    var temppoint = data["node 10"][0]["2017-02-16 5:20"][0];
    break;

    case 8:
    var temppoint = data["node 10"][0]["2017-02-19 6:10"][0];
    break;

    case 9:
    var temppoint = data["node 10"][0]["2017-02-16 0:40"][0];
    break;
   }
   //plotdata[i] = [datepoint, temppoint];
   plotdata.push(new Array(datepoint, temppoint));
  }
  console.log(plotdata)

  }) //End of getJSON

  var dataset = [
  {
   label: "temperature",
   data: plotdata
  }
   ];//End of var dataset declaration


  $.plot($("#placeholder"), dataset, {
   series: {
    lines: { show: true },
    points: {show: true },
   },
   grid: {
    hoverable: true,
    clickable: true
   },
   xaxis:
   {
    mode: "time",
    timeformat: "%h: %M\n %m/%d/%y",
    min: (new Date("2017/02/19")).getTime(),
    max: (new Date("2017/02/21")).getTime()
   },

   yaxis:
   {
    min: 50, max: 100, tickSize: 5
   }
  });

 }) //End of (document).ready

 </script>
</head>
<body>

 <div id="content">

  <div class="demo-container">
   <div id="placeholder" class="demo-placeholder"></div>
  </div>

 </div>

</body>
</html>

这是代码的结果： http://imgur.com/a/1lTvj

任何关于我可以做些什么来解决这个问题的见解将不胜感激。谢谢！

Answer 1

事实证明，问题在于绘图函数在 .getJSON 函数之外。作为主要编程知识基于 C 的人，我假设将 .getJSON 函数之外的 plotdata 变量绑定到该范围，但在 .getJSON 结束后，plotdata 变量的大小显示为 0，而不是我在.getJSON函数中设置的10点测试数据。

为了解决这个问题，我只是将 plot 函数移到了 .getJSON 函数中，现在它会保留对 plotdata 所做的更改并显示正确的图形。

无法显示浮点图

unable to get flot graph to display

javascript

flot