График на странице
Для создания страницы с графиком на Node.js, использующей данные из SQLite, вам потребуется несколько компонентов:
Установите пакет sqlite3 с помощью npm для работы с базой данных SQLite:
Создайте файл с именем, например, server.js и импортируйте необходимые модули:
const sqlite3 = require('sqlite3').verbose();
const express = require('express');
const app = express();
const port = 3000;
Установите обработчик маршрута GET для вашей страницы графика. Внутри этого обработчика вы можете выполнить запрос к базе данных SQLite, получить данные и отправить их вместе с шаблоном страницы графика веб-браузеру:
app.get('/chart', (req, res) => {
const db = new sqlite3.Database('database.db');
// Выполните запрос к базе данных SQLite для получения данных
db.all('SELECT value FROM data', (err, rows) => {
if (err) {
console.error(err);
res.status(500).send('Внутренняя ошибка сервера');
} else {
// Преобразуйте данные в нужный формат графика, например, JSON
const chartData = rows.map(row => row.value);
// Отправьте данные и шаблон страницы графика веб-браузеру
res.send(`
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.1/chart.min.js"></script>
</head>
<body>
<canvas id="chart"></canvas>
<script>
const ctx = document.getElementById('chart').getContext('2d');
const chartData = ${JSON.stringify(chartData)};
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: [...Array(chartData.length).keys()],
datasets: [{
label: 'Значения',
data: chartData,
borderColor: 'blue',
backgroundColor: 'rgba(0, 0, 255, 0.2)',
}],
},
});
</script>
</body>
</html>
`);
}
// Закройте соединение с базой данных
db.close();
});
});
app.listen(port, () => {
console.log(`Сервер запущен на порту ${port}`);
});
Создайте базу данных SQLite (например, database.db) и создайте таблицу для хранения ваших данных:
sqlite3 database.db
sqlite> CREATE TABLE data (value INTEGER);
sqlite> INSERT INTO data (value) VALUES (10);
sqlite> INSERT INTO data (value) VALUES (20);
sqlite> INSERT INTO data (value) VALUES (30);
sqlite> .quit
Теперь, когда сервер запущен и база данных настроена, вы можете получить страницу графика, перейдя по адресу http://localhost:3000/chart в вашем веб-браузере. Используемый здесь пример создает линейный график, отображающий значения из столбца value в таблице data вашей базы данных SQLite. Вы можете настроить этот пример в соответствии с вашими потребностями и использовать другие библиотеки для отрисовки графиков, если вам это удобнее.