大佬教程收集整理的这篇文章主要介绍了用jQuery Flot绘制的外部数据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
$(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); });@H_874_6@而1.json文件包含以下所有内容： @H_874_6@
{ label: "Values",data: [ [1,50.026],[2,50.028],[3,50.029],[4,[5,50.025],[6,50.016] ] }@H_874_6@@marcoJohannesen即使我在JSON调用之后编写“console.log(data)”,脚本仍然无法正常工作,并且屏幕上不会显示任何消息.使用Chrome实用程序(我不记得名称;-))我可以看到hte文件1.json已正确加载.我认为问题在于首先执行脚本,然后加载文件1.json.我在页面上做了一些编辑.
<!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>@H_874_6@这是1.json(我添加了方括号) @H_874_6@
[{ label: "Values",50.016] ] }}@H_874_6@我确实找到了制作工作页面的方法.这是我使用的代码： @H_874_6@
<!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>@H_874_6@这是json文件(取自flot官方exaples以确保格式正确) @H_874_6@
{ "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]] }@H_874_6@现在我要睡觉但是明天我们应该尝试将标签添加到情节并尝试使用多个值的系列.
<!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",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>@H_874_6@和数据(barLine.json)： @H_874_6@
{ "label": "Europe (EU27)","dataBar": [[1999,0.9]],"dataLine": [[1999,2],3.23],5],2.3],6.5],4.0],0.9],6.9],[2009,9.9] ] }
以上是大佬教程为你收集整理的用jQuery Flot绘制的外部数据全部内容，希望文章能够帮你解决用jQuery Flot绘制的外部数据所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。