import json
import bottle
@bottle.route("/getcount")
def getcount():
return json.dumps([[1,2,3], [4,5,6]])
@bottle.route("/")
def handleRequestHTML():
return bottle.static_file("Untitled-1.html", root="")
@bottle.route("/permitsnowtest.js")
def handleRequestCode():
return bottle.static_file("permitsnowtest.js", root="")
@bottle.route("/plot.js")
def handleRequestCode():
return bottle.static_file("plot.js", root="")
bottle.run(host='127.0.0.1', port='8086', debug=True)
<html>
<head>
<script src="plot.js"></script>
<script src="permitsnowtest.js"></script>
</head>
<h1>"welcome to our database "</h1>
<body onload="getData();">
<h2>Table Graph</h2>
<div id="div___1"></div>
</body>
</html>
function ajaxGetRequest(path, callback) {
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
callback(this.response);
}
}
request.open("GET", path);
request.send();
}
function getData() {
ajaxGetRequest("/getcount", tb_draw);
function tb_draw(response) {
let d=JSON.parse(response)
TESTER = document.getElementById('div___1');
var trace1 = {
type: 'bar',
x: d[0],
y: d[1],
marker: {
color: '#C8A2C8',
line: {
width: 2.5
}
}
};
var data = [trace1];
var layout = {
title: 'Responsive to window\'s size!',
font: { size: 18 }
};
var config = { responsive: true }
Plotly.newPlot(TESTER, data, layout, config);
}
https://blog.csdn.net/reallocing1/article/details/51694967