Как я могу подключить свою базу данных с Highchart? - PullRequest
0 голосов
/ 23 апреля 2020

Я использую 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);
    }
});

Ищите информацию по inte rnet но я ничего не смог найти, надеюсь вы мне поможете, заранее спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...