使用 jQuery Flot 绘制的外部数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7859974/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
External data to plot with jQuery Flot
提问by Nicolaesse
I am trying to use flot plug-in to plot some data which are wrote into a JSON file. It doesn't seem so hard to do but I can't find something that work...can you please help me.
我正在尝试使用 flot 插件来绘制一些写入 JSON 文件的数据。这似乎并不难做，但我找不到有用的东西......你能帮我吗。
That's the page I've wrote:
这是我写的页面：
$(function () {
var data;
$.getJSON("1.json", function(json) {
var data = json;
});
var options = {
legend: {
show: true,
margin: 10,
backgroundOpacity: 0.5
},
points: {
show: true,
radius: 3
},
lines: {
show: true
}
};
var plotarea = $("#placeholder");
$.plot(plotarea , data, options);
});
while the 1.json file coitain all of the following:
而 1.json 文件包含以下所有内容：
{ label: "Values",
data: [
[1, 50.026],
[2, 50.028],
[3, 50.029],
[4, 50.026],
[5, 50.025],
[6, 50.016]
]
}
@MarcoJohannesen Even if I write "console.log(data)" after the JSON call the script still dowsn't work and no message appear on the screen. Using Chrome utility (I don't remember the name ;-)) I can see that hte file 1.json has been loaded correctly. I think that the problem is that first of all the script is executed and after that the file 1.json is loaded. I've made a little edit on the page. You can see a demo on this pageThis is the page "1.htm" code:
@MarcoJohannesen 即使我在 JSON 调用之后写了“console.log(data)”，脚本仍然无法工作，屏幕上也没有出现任何消息。使用 Chrome 实用程序（我不记得名称 ;-)）我可以看到 hte 文件 1.json 已正确加载。我认为问题是首先执行脚本，然后加载文件 1.json。我在页面上做了一些修改。您可以在此页面上看到演示这是页面“1.htm”代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>
<h1>Graph</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script language="javascript" type="text/javascript">
$(function () {
var data;
$.getJSON("1.json", function(json) {
var data = json;
});
console.log(data);
var plotarea = $("#placeholder");
$.plot(plotarea , data);
});
</script>
</body>
</html>
and this is the 1.json (I've added the square brackets)
这是 1.json （我添加了方括号）
[{ label: "Values",
data: [
[1, 50.026],
[2, 50.028],
[3, 50.029],
[4, 50.026],
[5, 50.025],
[6, 50.016]
]
}}
I definitely found a way to make a working page. That's the code I used:
我确实找到了一种制作工作页面的方法。这是我使用的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>
<h1>Graph</h1>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$.getJSON("1.json", function(json) {
//succes - data loaded, now use plot:
var plotarea = $("#placeholder");
var data=[json.data];
$.plot(plotarea , data);
});
});
</script>
<div id="placeholder" style="width:600px;height:300px;"></div>
</body>
</html>
and that's the json file (taken from the flot official exaples to be sure that is correctly formatted)
这就是 json 文件（取自 flot 官方示例以确保格式正确）
{
"label": "Europe (EU27)",
"data": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
}
now I'm going to bed but tomorrow I we should try to add the label to the plot and trying with more than one series of values.
现在我要睡觉了，但明天我应该尝试将标签添加到情节中并尝试使用多个系列的值。
回答by Mark Ross
I use this to generate automatic updated information website for project progress.
我用它来生成自动更新的项目进度信息网站。
My small example using more than one type of diagram: line and bar.
我的小例子使用了不止一种类型的图表：线和条。
I find it easier to understand if I have a running example, so here we are:
如果我有一个运行示例，我发现更容易理解，所以我们在这里：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
</head>
<body>
<h1>Graph</h1>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$.getJSON("barLine.json", function(json) {
//succes - data loaded, now use plot:
var plotarea = $("#placeholder");
var dataBar=json.dataBar;
var dataLine=json.dataLine;
$.plot(plotarea , [
{
data: dataBar,
bars: {show: true}
},
{
data: dataLine,
lines: { show: true, steps: false }
}
]
);
});
});
</script>
<div id="placeholder" style="width:600px;height:300px;"></div>
</body>
</html>
And the data(barLine.json):
和数据（barLine.json）：
{
"label": "Europe (EU27)",
"dataBar": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]],
"dataLine": [[1999, 2], [2000, 3.23], [2001, 1], [2002, 5], [2003, 2.3], [2004, 6.5], [2005, 4.0], [2006, 3.1], [2007, 0.9], [2008, 6.9], [2009, 9.9] ]
}
回答by Marco Johannesen
Try this:
尝试这个：
$(function () {
var data;
var plotarea = $("#placeholder");
$.getJSON("1.json", function(json) {
//succes - data loaded, now use plot:
$.plot(plotarea , data);
});
});
And in your JSON file there is a syntax error (starting with a "[" and ending with a "}". Could you try this:
并且在您的 JSON 文件中存在语法错误（以“[”开头并以“}”结尾。您可以试试这个：
{ label: "Values",
data: [
[1, 50.026],
[2, 50.028],
[3, 50.029],
[4, 50.026],
[5, 50.025],
[6, 50.016]
]
}
