Как передать данные из базы данных на график. js и отобразить их в мопсе - PullRequest
0 голосов
/ 26 апреля 2020

У меня следующая проблема. Я пытаюсь отобразить в pug chart. js диаграмму, которая получает данные из базы данных.

node.js сервер, который отображает pug

app. js

import express from 'express'
const app = express()
const port = 3003

app.use(express.static('public'))

app.set('view engine', 'pug')


app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

app.get('/', function (req, res) {
    res.render('index', { title: 'ttt', message: 'ttt'})
})

index.pug

html
  head
    title= title
    script(src="https://code.jquery.com/jquery-3.5.0.min.js")
    script(src='https://cdn.jsdelivr.net/npm/chart.js@2.8.0')
    script(type="text/javascript" src='http.js')

  body
    message= message
    canvas(id='test', width='350', height='350')
js file that takes the data from database

const sqlite3 = require('sqlite3').verbose();
const fetch = require("node-fetch");

let db = new sqlite3.Database('example.db', (err) => {
    if (err) {
        return console.error(err.message);
    }
    console.log('Connected to the in-memory SQlite database.');
});



function test(){

return db.get("SELECT JiraTotalCases FROM AC ORDER BY Timestamp DESC LIMIT 1;", 
function(err, rows) {

    row = rows.JiraTotalCases;
});
}

Chart details function

fun()
function fun() {

    $(document).ready(function () {

        var ctx = document.getElementById('test');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['issues'],
                datasets: [{
                    label: 'Jira issues',
                    data: [3, 8],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(255,44,132,1)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(255,99,132,1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                //cutoutPercentage: 40,
                responsive: false,

            }
        });

    })


}

По сути, я понятия не имею, как передать данные, извлеченные из базы данных, в раздел данных на диаграмме. js Функция детализации и визуализация ее позже в pug, каждый раз, когда я использую для Пример запроса или импорта Я получаю сообщение об ошибке, что он не может быть использован на стороне браузера, тогда я должен использовать browserify, который обычно не удается, и я не могу создать пакет. Есть ли способ сделать это как-нибудь?

...