從 SQLite 獲取數據作為數組並使用 HTML 中的 Chart.js 生成圖表

Question

我目前正在開發一個 web 應用程序，我想將一些數據可視化放在一個頁面上。 我用來生成視覺效果的數據來自存儲在我機器本地的 SQLite 數據庫。 根據Chart.js的文檔，它將獲取一個數組並基於該數組生成圖表，並將代碼放在標簽下的 HTML 文件中，因此基本上是 JavaScript 代碼。

下面是我正在使用的 Chartjs 文檔中的代碼。

 <canvas id="myChart" width="400" height="400"></canvas> <script> var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: *there will be the data array from my SQLite*, backgroundColor: [ ], borderColor: [ ], borderWidth: 1 }] } }); </script>

因此，我需要從我的 SQLite 數據庫中獲取數據，將我想要圖表的字段轉換為數組，並將數組傳遞給數據字段。

所以我的問題是，有可能做到這一點嗎？ 我知道一些 Node.js，因此在 require() 和 Sequelize 的幫助下從數據庫中獲取數據沒有任何困難。 然而，當我想對 JavaScript 做基本相同的事情時，我仍然發現自己幾乎無能為力。 或者，是否可以使用 Node.js 准備好數據數組，然后以某種方式讓它將數組傳遞給 HTML 文件？

謝謝！

編輯：下面是項目結構

 C:\USERS\XLYU0\VUE\PRACTICE\SQLITENODEJS\USER_AUTHEN | app.js | package-lock.json | package.json | +---config | auth.js | database.js | passport.js | +---models | CONTACT_TIME.js | USER.js | +---public | | bootstrap.css | | | +---css | | style.css | | | \---JS | sqlite.js | +---routes | contacts.js | index.js | services.js | statistics.js | uploads.js | users.js | \---views | contacts.ejs | dashboard.ejs | layout.ejs | layoutB.ejs | login.ejs | register.ejs | services.ejs | statistics.ejs | uploads.ejs | welcome.ejs | \---partials messages.ejs

生成圖表的 JS 代碼在 statistics.ejs 中，我打算將從數據庫中獲取數據的代碼放在 JS/sqlite.js 中，不過我想它可以放到 statistics.ejs 中，只要它是 JavaScript。

SQLite 文件本地存儲在我機器的其他位置，現在我知道如何按照說明連接到它，這就是我現在得到的。

 var sqlite3 = require('sqlite3').verbose(); var db = new sqlite3.Database('../../../../../../database.db'); let reportingTag = []; let sql = `SELECT * FROM CONTACT_TIME`; db.all(sql, [], (err, rows) => { if (err) { throw err; } rows.forEach((row) => { reportingTag.push(row.reportingTag); }); console.log(reportingTag); }); // close the database connection db.close();

編輯：這是我目前的進展

 const express = require('express') const CONTACT = require('../models/CONTACT_TIME') const { render } = require('ejs') const router = express.Router() router.post('/', (req, res) => { CONTACT.findAll().then((contacttime) =>{ const context = { contextContactTime: contacttime.map(contacttime =>{ return{ id: contacttime.id, reportingTag: contacttime.reportingTag, } }) } let tags = [] context.contextContactTime.forEach((contact) =>{ tags.push(contact.reportingTag) }) res.send(tags) })}) router.get('/', (req, res) => res.render('statistics', { layout: 'layoutB' })) module.exports = router

我設法通過 Express.js 路由器發送數據，但我還希望模板引擎呈現頁面，所以我在下面也調用了 res.render()。 那么看來下一步就是檢索statistics.ejs上的數據了。 雖然我知道如何使用 ejs 直接在頁面上顯示數據，但我無法使用 JavaScript 訪問數據。 我需要這樣做，因為要使用 Chart.js 生成圖表，我需要在標簽之間編寫一些代碼。

Answer 1

嘗試將數據從標簽正文傳遞到標簽腳本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <title>Documment</title>
</head>

<body>
    <div class="container">
        <canvas>
        </canvas>
        <p id="data" style="display:none"><%= value %></p>
    </div>
</body>
<script>
    // your data change to string
    let data = document.getElementById("data").innerText 
  
    let array = data.split(',')
</script>
</html>

從 SQLite 獲取數據作為數組並使用 HTML 中的 Chart.js 生成圖表

問題描述

1 個解決方案

解決方案1
0 2021-08-14 07:45:50

從 SQLite 獲取數據作為數組並使用 HTML 中的 Chart.js 生成圖表

問題描述

1 個解決方案

解決方案1 0 2021-08-14 07:45:50

解決方案1
0 2021-08-14 07:45:50