无法在龙卷风中使用 Vis.js 绘制图形

Question

大家好，我正在尝试在龙卷风框架中使用 vis.js 绘制图表，但我无法实现如何引导文件我现在只在 url 中获得 Helloworld 但不是图提前致谢

enter code here Tornado
 import tornado.httpserver
 import tornado.ioloop
 import tornado.options
 import tornado.web
 import os


 from tornado.options import define, options

 define("port", default=8888, help="run on the given port", type=int)
 settings = {
"static_path": os.path.join(os.path.dirname(__file__), "static"),
"template_path":os.path.join(os.path.dirname(__file__), "templates"),
 }


 class MainHandler(tornado.web.RequestHandler):
    def get(self):
        self.render("graph.html")




 def main():
     tornado.options.parse_command_line()
     application = tornado.web.Application([
    (r"/", MainHandler),
    (r"/", tornado.web.StaticFileHandler,
 dict(path=settings['static_path'])),

],**settings)
    http_server = tornado.httpserver.HTTPServer(application)
    http_server.listen(options.port)
    tornado.ioloop.IOLoop.current().start()


if __name__ == "__main__":
    main()

这里是 HTML

enter code here
 <html>
 <head>
 <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
 <meta content="utf-8" http-equiv="encoding">
 <title>Graph2d | Basic Example</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript"src="{{ static_url("vis.js") }}"></script>
<link rel="stylesheet" href="{{ static_url("vis.css") }}"
<script src="../static/vis.js"></script>
<link href="../static/vis.css" rel="stylesheet" type="text/css" />
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
<body>
<h1>helloworld</h1>
<div id="visualization"></div>
<script type="text/javascript">
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-11', y: 10},
{x: '2014-06-12', y: 25},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
  ];

var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18'
  };
var graph2d = new vis.Graph2d(container, dataset, options);
</script>
</body>
</html>

Answer 1

我已经测试过了，似乎一切正常。确保你有静态目录。我是如何测试的

~$ virtualenv test
~$ source test/bin/activate  # activate virtualenv
~$ pip install tornado
~$ mkdir static
~$ mkdir templates
~$ wget https://cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.css -O static/vis.css
~$ wget https://cdnjs.cloudflare.com/ajax/libs/vis/4.11.0/vis.min.js -O static/vis.js
~$ # copy your HTML into templates/graph.html
~$ # copy your py into app.py
~$ python app.py
[I 160106 20:46:51 web:1946] 200 GET / (127.0.0.1) 7.46ms
[I 160106 20:46:51 web:1946] 200 GET /static/vis.js?v=1a407e3a47f81c53518823bd11369678 (127.0.0.1) 10.71ms
[I 160106 20:46:51 web:1946] 200 GET /static/vis.css?v=4e678a04d8440cf16f35838950d9d673 (127.0.0.1) 1.67ms

无法在龙卷风中使用 Vis.js 绘制图形

unable to draw graphs using Vis.js in tornado

javascript

tornado

vis.js