如何将数据库与highchart连接起来?

时间:2020-04-23 15:32:09

标签: javascript flask sqlalchemy

我正在使用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上查找信息,但我找不到任何东西,希望您能为我提供帮助,谢谢您

0 个答案:

没有答案