Ketika memetakan jaringan yang saling terhubung, hierarki struktural, atau hubungan entitas yang kompleks, maka Grafik Chart (atau Grafik Jaringan) adalah kerangka visual yang ideal. Dengan menampilkan item sebagai simpul dan koneksi sebagai tautan terarah atau tak terarah, grafik chart memungkinkan pengguna untuk mengeksplorasi kluster, pohon ketergantungan, dan aliran hubungan yang tidak dapat disampaikan oleh grafik tabel standar—seperti arsitektur mikroservis, interaksi jaringan sosial, atau graf pengetahuan.
Mekanisme Grafik Chart
Di Apache ECharts, grafik chart menggunakan type: 'graph'. Alih-alih memetakan nilai numerik langsung ke koordinat sumbu horizontal dan vertikal, grafik chart mengambil kumpulan eksplisit simpul (atau data) dan tautan (atau sisi). ECharts kemudian mengatur simpul-simpul ini menggunakan penempatan koordinat tetap, tata letak melingkar, atau mesin fisika dinamis berbasis gaya tarik-menarik.
1. Pengaturan Dasar
Untuk membuat grafik jaringan dasar menggunakan fisika berbasis gaya tarik-menarik, deklarasikan simpul Anda di dalam data, peta koneksi di dalam tautan, dan atur layout: 'force':
option = {
tooltip: {},
legend: {
data: ['Layanan', 'Database']
},
series: [
{
name: 'Jaringan Sistem',
type: 'graph',
layout: 'force',
roam: true, // Memungkinkan zoom dan geser
label: {
show: true,
position: 'right'
},
force: {
repulsion: 100,
edgeLength: 80
},
data: [
{ id: '0', name: 'API Gateway', symbolSize: 30, category: 0 },
{ id: '1', name: 'Layanan Autentikasi', symbolSize: 20, category: 0 },
{ id: '2', name: 'Layanan Pesanan', symbolSize: 20, category: 0 },
{ id: '3', name: 'Database Pengguna', symbolSize: 25, category: 1 },
{ id: '4', name: 'Database Pesanan', symbolSize: 25, category: 1 }
],
links: [
{ source: '0', target: '1' },
{ source: '0', target: '2' },
{ source: '1', target: '3' },
{ source: '2', target: '4' }
],
categories: [
{ name: 'Layanan' },
{ name: 'Database' }
]
}
]
};
Teknik Struktur Lanjutan
Grafik chart mendukung mesin tata letak alternatif seperti penataan cincin melingkar atau panah terarah untuk menunjukkan ketergantungan data dengan jelas.
1. Tata Letak Melingkar dengan Panah Tautan Terarah
Atur layout: 'melingkar'untuk mengatur simpul dalam struktur cincin yang rapi, dan mengaktifkan panah tepi untuk menunjukkan hubungan arah antar komponen:
option = {
tooltip: {},
series: [
{
type: 'graph',
layout: 'melingkar',
roam: true,
label: {
show: true,
position: 'luar'
},
edgeSymbol: ['tidak ada', 'panah'], // Gambar panah di ujung tautan
edgeSymbolSize: [0, 8],
data: [
{ id: 'A', name: 'Node A', symbolSize: 24 },
{ id: 'B', name: 'Node B', symbolSize: 24 },
{ id: 'C', name: 'Node C', symbolSize: 24 },
{ id: 'D', name: 'Node D', symbolSize: 24 },
{ id: 'E', name: 'Node E', symbolSize: 24 }
],
links: [
{ source: 'A', target: 'B' },
{ source: 'B', target: 'C' },
{ source: 'C', target: 'D' },
{ source: 'D', target: 'E' },
{ source: 'E', target: 'A' },
{ source: 'A', target: 'C' }
],
lineStyle: {
color: '#5470c6',
width: 2,
curveness: 0.2 // Melengkungkan garis koneksi untuk menghindari tumpang tindih
}
}
]
};
Penyesuaian Halus Tata Letak dan Gaya Simpul
Menyesuaikan kelengkungan tepi, bayangan batas simpul, dan opsi interaksi menjaga kelompok jaringan yang padat tetap dapat dibaca di halaman web interaktif.
1. Warna Kategori Simpul Kustom dan Fisika Gaya
Sesuaikan nilai tolakan dan gaya garis untuk menciptakan kelompok yang terstruktur dan terpisah secara visual:
option = {
legend: {
top: '5%',
left: 'tengah'
},
series: [
{
type: 'graph',
layout: 'gaya',
roam: true,
draggable: true,
force: {
repulsion: 250,
gravity: 0.1,
edgeLength: [50, 100]
},
categories: [
{ name: 'Frontend', itemStyle: { color: '#5470c6' } },
{ name: 'Backend', itemStyle: { color: '#91cc75' } },
{ name: 'Infrastruktur', itemStyle: { color: '#fac858' } }
],
data: [
{ name: 'Aplikasi Web', category: 0, symbolSize: 32 },
{ name: 'Aplikasi Mobile', category: 0, symbolSize: 28 },
{ name: 'Gateway API', category: 1, symbolSize: 26 },
{ name: 'Microservice A', category: 1, symbolSize: 22 },
{ name: 'Microservice B', category: 1, symbolSize: 22 },
{ name: 'Cache Redis', category: 2, symbolSize: 20 },
{ name: 'PostgreSQL', category: 2, symbolSize: 24 }
],
links: [
{ source: 'Aplikasi Web', target: 'Gateway API' },
{ source: 'Aplikasi Mobile', target: 'Gateway API' },
{ source: 'Gateway API', target: 'Microservice A' },
{ source: 'Gateway API', target: 'Microservice B' },
{ source: 'Microservice A', target: 'Cache Redis' },
{ source: 'Microservice B', target: 'PostgreSQL' }
],
lineStyle: {
color: 'sumber', // Warna tepi berdasarkan warna simpul sumber
width: 2,
curveness: 0.1
}
}
]
};
Praktik Terbaik Strategis
- Aktifkan
roam: trueuntuk Navigasi:Jaringan interaktif tumbuh dengan cepat. Mengaktifkan navigasi zoom dan geser memungkinkan pengguna fokus pada kelompok tertentu tanpa merasa sesak. - Terapkan
kelengkunganke Tepi:Menetapkan kelengkungan sedikit (misalnya,lineStyle.kelengkungan: 0.1hingga0.2) mencegah tautan dua arah antara dua node yang identik dari tumpang tindih menjadi satu garis. - Gaya Penolakan Fisika Keseimbangan: Sesuaikan
gaya.penolakandengan hati-hati. Nilai yang terlalu rendah akan menyebabkan node tumpang tindih menjadi kelompok padat, sementara nilai yang terlalu tinggi akan mendorong node keluar sepenuhnya dari area tampilan.