我正在使用Flask,MySQL和SQLAlchemy制作仪表板,我正在尝试使用HIGHCHART库(特别是仪表图),在服务器'/ datos'的路由中,我获得了所有想要显示的数据我的量规图,但是我对javascript还是陌生的,这里我留下了服务器的代码:
app.py
@app.route('/datos', methods=["GET", "POST"])
def data1():
datos = ahora.query.first()
data = [datos.temperatura,
datos.humedad,
datos.canal1,
datos.canal2,
datos.canal3,
datos.canal4,
datos.tempGabinete]
response = make_response(json.dumps(data))
response.content_type = 'application/json'
return response
正如您在这里看到的那样,我正在返回一个JSON,并且希望在量规图中具有值data.temperatura,这是javascript代码:
dibujo.js
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [
{
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[
0, '#FFF'
],
[
1, '#333'
]
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[
0, '#333'
],
[
1, '#FFF'
]
]
},
borderWidth: 1,
outerRadius: '107%'
}, { // default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}
]
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [
{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}
]
},
series: [
{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}
]
},
// Add some life
function (chart) {
if (! chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
在Internet上查找信息,但我找不到任何东西,希望您能为我提供帮助,谢谢您