Grafik Garis: Pelacakan Tren dan Data Berkelanjutan

Ketika melacak perkembangan berkelanjutan atau perubahan deret waktu, Grafik Garis berfungsi sebagai alat visual utama. Berbeda dengan grafik batang atau kolom diskret yang fokus pada perbandingan kategori individu, grafik garis menekankan koneksi dan kemiringan untuk menyoroti momentum, musiman, dan perubahan mendadak pada metrik di atas urutan yang tak terputus, seperti pertumbuhan pengguna aktif harian, pendapatan berulang bulanan, atau aliran data telemetri sensor.

Mekanisme Grafik Garis

Dalam Apache ECharts, visualisasi garis dikonfigurasi dengan mengatur properti series type properti menjadi 'line'. Grafik garis menghubungkan titik-titik data yang diurutkan secara berurutan sepanjang sumbu horizontal skala kategorikal atau waktu yang kontinu (xAxis) dan memetakan nilai numerik yang kontinu ke sumbu vertikal (yAxis).

1. Pengaturan Dasar

Untuk membuat grafik garis dasar, tentukan kategori berkelanjutan Anda sepanjang sumbu X dan peta dataset Anda ke objek series dengan type: 'line':

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            data: [150, 230, 224, 218, 135, 147, 260]
        }
    ]
};

Teknik Struktural Lanjutan

Grafik garis menawarkan fleksibilitas untuk overlay multi-metrik, kurva interpolasi halus, dan indikator titik data yang disesuaikan.

1. Kurva Interpolasi Halus

Secara default, seri garis menghubungkan titik data dengan segmen garis lurus. Mengaktifkan smooth: true menerapkan interpolasi spline kubik untuk menciptakan jalur garis melengkung dan organik melintasi dataset Anda:

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330],
            lineStyle: {
                width: 3,
                color: '#5470c6'
            }
        }
    ]
};

2. Perbandingan Kinerja Multi-Garis

Bandingkan metrik sekunder di seluruh interval waktu yang identik dengan menyediakan beberapa objek garis di dalam series array:

option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Periode Saat Ini', 'Periode Sebelumnya']
    },
    xAxis: {
        type: 'category',
        data: ['Minggu 1', 'Minggu 2', 'Minggu 3', 'Minggu 4']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Periode Saat Ini',
            type: 'line',
            smooth: true,
            data: [320, 332, 301, 334],
            itemStyle: { color: '#5470c6' }
        },
        {
            name: 'Periode Sebelumnya',
            type: 'line',
            smooth: true,
            data: [220, 182, 191, 234],
            itemStyle: { color: '#91cc75' }
        }
    ]
};

Penyesuaian Halus Isi Area dan Titik Data

Deret garis dapat ditingkatkan secara visual menggunakan isian gradien latar belakang yang halus dan penanda data yang ditargetkan untuk menarik perhatian pada tonggak penting.

1. Penataan Gaya Area Garis

Menambahkan areaStyleproperti mengubah grafik garis standar menjadi tampilan area, mengisi wilayah antara jalur garis dan sumbu horizontal:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false, // Sesuaikan garis langsung ke tepi sumbu
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 590, 820, 710, 430],
            areaStyle: {
                color: 'rgba(84, 112, 198, 0.25)' // Isian lembut di bawah garis
            },
            lineStyle: {
                width: 3,
                color: '#5470c6'
            },
            symbolSize: 8
        }
    ]
};

Praktik Terbaik Strategis

• Gunakan boundaryGap: false untuk Urutan Waktu: Menghilangkan jarak tepi bawaan pada sumbu waktu kontinu memungkinkan garis dimulai langsung dari margin nol untuk tampilan bersih dari ujung ke ujung.
• Jaga Jumlah Garis Tetap Rendah:Hindari menampilkan lebih dari 4 hingga 5 garis dalam satu kanvas. Grafik garis yang terlalu padat (‘grafik spaghetti’) dengan cepat menjadi tidak dapat dibaca.
• Pemicu Tooltip SumbuSelalu konfigurasitooltip: { trigger: 'axis' }sehingga pengguna dapat mengarahkan kursor di sepanjang titik horizontal mana pun untuk melihat nilai-nilai yang tepat dari semua seri garis aktif secara bersamaan.