Это руководство проведет вас через создание интерактивных диаграмм в ваших приложениях Node.js с использованием универсальной библиотеки для построения диаграмм billboard.js. Сам Node.js не отображает диаграммы непосредственно в браузере; вместо этого мы используем billboard.js, клиентскую библиотеку, для предоставления необходимого HTML, CSS и JavaScript для рендеринга диаграмм в среде Node.js.
Содержание
- Обзор billboard.js
- Необходимые условия для billboard.js
- Создание простой линейной диаграммы
- Расширенная настройка диаграмм (необязательно)
Обзор billboard.js
billboard.js — это надежная библиотека JavaScript для построения диаграмм, созданная на основе D3.js. Ее чистый API упрощает создание различных типов диаграмм, включая линейные, столбчатые, диаграммы областей, диаграммы рассеяния и многое другое. Ее легковесность, обширные возможности настройки и подробная документация делают ее идеальной для интеграции диаграмм в приложения Node.js. Поскольку она работает полностью на стороне клиента, billboard.js обеспечивает улучшенную производительность и отзывчивость, освобождая ваш сервер Node.js для управления другими задачами.
Необходимые условия для billboard.js
Прежде чем начать, убедитесь, что у вас есть следующее:
- Node.js и npm (или yarn): Загрузите и установите Node.js и npm (Node Package Manager) или yarn с официального сайта Node.js.
- Базовые знания HTML, CSS и JavaScript: Хотя billboard.js упрощает создание диаграмм, базовые знания веб-разработки будут полезны.
- Редактор кода или IDE: Выберите предпочитаемый редактор кода (VS Code, Sublime Text, Atom и т. д.) для написания вашего кода.
Примечание: мы не будем устанавливать billboard.js через npm непосредственно в наш проект Node.js, так как это клиентская библиотека. Вместо этого мы подключим ее через тег <script> в нашем HTML.
Создание простой линейной диаграммы
В этом примере показана базовая линейная диаграмма. Мы настроим сервер Node.js для обслуживания HTML-файла, содержащего billboard.js и код диаграммы.
1. Настройка проекта: Создайте директорию (например, `node-chart-example`) и создайте в ней следующие файлы:
2. `index.js` (сервер Node.js):
const http = require('http');
const fs = require('fs');
const path = require('path'); // Добавлено для улучшенной обработки путей
const server = http.createServer((req, res) => {
const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404);
res.end('Файл не найден');
} else {
const extname = path.extname(filePath);
const contentType = extname === '.html' ? 'text/html' : 'application/javascript';
res.writeHead(200, { 'Content-Type': contentType });
res.end(data);
}
});
});
const port = 3000;
server.listen(port, () => {
console.log(`Сервер запущен на порту ${port}`);
});
3. `index.html` (HTML-файл с диаграммой):
<html>
<head>
<title>Диаграмма Billboard.js</title>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
var chart = bb.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line'
}
});
</script>
</body>
</html>
4. Запустите сервер: Перейдите в директорию проекта и запустите node index.js. Доступ к диаграмме осуществляется по адресу http://localhost:3000.
Расширенная настройка диаграмм (необязательно)
billboard.js предлагает широкие возможности настройки. Изучите ее документацию для ознакомления с такими функциями, как подписи осей, цвета, всплывающие подсказки, обработка данных и многое другое. Экспериментируйте с различными типами диаграмм и параметрами, чтобы создавать эффективные визуализации.