无法显示浮点图
[英]unable to get flot graph to display
问题描述
I'm trying to create a plot of temperature change over a period of time, so to start off, I'm trying to get a graph up with some test data plotted on it, but none of the data seems to want to show. 
我试图创建一段时间内的温度变化图，因此，开始时，我试图绘制带有一些测试数据的图表，但似乎没有想要显示的数据。 I'm a bit new to JavaScript and flot, so I tried piecing together the needed code based off of seeing how other people created graphs in flot. 我对JavaScript和flot有点陌生，因此我基于了解其他人如何在flot中创建图表的方式，将所需的代码拼凑在一起。
The data for the time on the x-axis, I created in the code just to have something to plot the temperature against, whilst I retrieved the temperature data from a .json file with test data in it. 我在代码中创建了x轴上的时间数据，只是为了针对温度进行绘图，同时我从包含测试数据的.json文件中检索了温度数据。 Getting the data points into a set to pass into the plot function seems to be coming together okay, but I just can't get a display. 将数据点放到一个集合中以传递到绘图函数似乎还可以，但是我只是无法显示。 Instead, all I get is what is shown in the image that I will display after my code. 相反，我所得到的只是我将在代码之后显示的图像中显示的内容。 Could anyone please let me know what I did wrong or what I'm missing? 谁能让我知道我做错了什么或我错过了什么？ I'm honestly stumped here. 老实说，我在这里难过。
Source code (made by editing a flot example page): 源代码（通过编辑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>
This is what results from the code: http://imgur.com/a/1lTvj 这是从代码中得到的结果： http : //imgur.com/a/1lTvj
Any insights as to what I can do to fix this would be much appreciated. 对于我能做些什么来解决此问题的任何见解将不胜感激。 Thanks! 谢谢！
1 个解决方案
解决方案1
0 已采纳 2017-04-01 20:09:12
As it turns out, the problem was that the plot function was outside of the .getJSON function. 事实证明，问题在于出图函数不在.getJSON函数之外。 As someone whose main programming knowledge is based on C, I assumed that having the plotdata variable outside of the .getJSON function tied it to that scope, but after the end of .getJSON, the plotdata variable showed to have a size of 0, instead of the 10 points of test data that I set into it in the .getJSON function. 作为主要编程知识基于C的人，我假设将.getJSON函数外部的plotdata变量绑定到该范围，但是.getJSON结束之后，plotdata变量的大小显示为0，而是我在.getJSON函数中设置的10个测试数据点中的10个点。
To fix this, I just moved the plot function into the .getJSON function, and now it keeps the changes made to plotdata and displays the proper graph. 为了解决这个问题，我只是将plot函数移到了.getJSON函数中，现在它保留了对plotdata所做的更改并显示正确的图形。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.