Bu öğretici, çok yönlü grafik kütüphanesi billboard.js kullanarak Node.js uygulamalarınızda etkileşimli grafikler oluşturma adımlarını göstermektedir. Node.js, doğrudan tarayıcıda grafik oluşturmaz; bunun yerine, Node.js ortamında grafik oluşturma için gerekli HTML, CSS ve JavaScript’i sağlamak üzere istemci tarafı bir kütüphane olan billboard.js’yi kullanıyoruz.
İçindekiler
- billboard.js Genel Bakış
- billboard.js Ön Koşulları
- Basit Bir Çizgi Grafiği Oluşturma
- Gelişmiş Grafik Özelleştirme (İsteğe Bağlı)
billboard.js Genel Bakış
billboard.js, D3.js üzerine kurulu sağlam bir JavaScript grafik kütüphanesidir. Temiz API’sı, çizgi grafikleri, sütun grafikleri, alan grafikleri, saçılma grafikleri ve daha fazlası dahil olmak üzere çeşitli grafik türlerinin oluşturulmasını basitleştirir. Hafif yapısı, kapsamlı özelleştirme seçenekleri ve kapsamlı dokümantasyonu, Node.js uygulamalarına grafik entegre etmek için idealdir. Tamamen istemci tarafında çalıştığı için billboard.js, performansı ve yanıt vermeyi artırır ve Node.js sunucunuzun diğer görevleri yönetmesi için serbest kalmasını sağlar.
billboard.js Ön Koşulları
Başlamadan önce şunlara sahip olduğunuzdan emin olun:
- Node.js ve npm (veya yarn): Node.js ve npm (Node Package Manager) veya yarn’ı resmi Node.js web sitesinden indirin ve yükleyin.
- HTML, CSS ve JavaScript’in temel bilgisi: billboard.js grafik oluşturmayı basitleştirirken, temel web geliştirme bilgisi faydalı olacaktır.
- Bir kod editörü veya IDE: Kodunuzu yazmak için tercih ettiğiniz bir kod editörü (VS Code, Sublime Text, Atom, vb.) seçin.
Not: İstemci tarafı bir kütüphane olduğu için billboard.js’yi npm aracılığıyla doğrudan Node.js projemize yüklemeyeceğiz. Bunun yerine, HTML dosyamıza bir “ etiketi aracılığıyla ekleyeceğiz.
Basit Bir Çizgi Grafiği Oluşturma
Bu örnek, temel bir çizgi grafiğini göstermektedir. billboard.js ve grafik kodunu içeren bir HTML dosyası sunmak için bir Node.js sunucusu kuracağız.
1. Proje Kurulumu: Bir dizin oluşturun (örneğin, `node-chart-example`) ve içine aşağıdaki dosyaları oluşturun:
2. `index.js` (Node.js sunucusu):
const http = require('http');
const fs = require('fs');
const path = require('path'); // Geliştirilmiş yol işleme için eklendi
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('Dosya bulunamadı');
} 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(`Sunucu ${port} numaralı bağlantı noktasında dinliyor`);
});
3. `index.html` (Grafik içeren HTML dosyası):
<html>
<head>
<title>Billboard.js Grafiği</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. Sunucuyu çalıştırın: Proje dizininize gidin ve node index.js çalıştırın. Grafiğe http://localhost:3000 adresinden erişin.
Gelişmiş Grafik Özelleştirme (İsteğe Bağlı)
billboard.js kapsamlı özelleştirme sunar. Eksen etiketleri, renkler, araç ipuçları, veri işleme ve daha fazlası gibi özellikler için dokümantasyonuna göz atın. Etkileyici görselleştirmeler oluşturmak için farklı grafik türleri ve seçeneklerle deney yapın.