Bagaimana cara membuat grafik garis di html5?

Untuk membuat artikel ini sangat menarik untuk Anda baca dan pelajari, saya memutuskan untuk menampilkan penerapan praktis bagan garis ke data dunia nyata. Bulan Juni dirayakan sebagai , dan saya pikir akan sangat menyenangkan melihat bagaimana sikap terhadap orang LGBT telah berubah selama beberapa tahun terakhir. Kemudian saya menemukan data opini publik yang menarik dari General Social Survey (GSS), sebuah proyek National Opinion Research Center (NORC) di University of Chicago, yang tampaknya cocok, dan mengambil bagian darinya untuk divisualisasikan dalam hal ini

Jadi, ikuti tutorialnya dan Anda juga akan dapat menjelajahi pergeseran penerimaan hubungan sesama jenis di Amerika Serikat selama dua dekade terakhir. Kami akan membuat diagram garis JS seri tunggal terlebih dahulu, yang mewakili tren umum, lalu diagram garis JS multi-seri untuk memvisualisasikan perincian berdasarkan kelompok usia

Semua naik

Pratinjau Grafik Garis JS

Sebelum kita mulai, periksa pratinjau. Berikut adalah tampilan bagan garis indah yang akan kita buat dengan JavaScript di akhir tutorial visualisasi data ini. Plus, itu akan interaktif dan mudah disematkan di halaman web atau aplikasi apa pun

Tidakkah senang melihat bagan penuh warna ini dan merasa positif tentang prospek masa depan?

Baca tutorial langkah demi langkah ini sampai akhir dan Anda akan belajar cara membuat grafik garis dengan mudah dengan sedikit pengkodean

Membuat Bagan Baris JavaScript Dasar dalam 4 Langkah Sederhana

Urutan normal untuk memvisualisasikan data dalam bagan JavaScript dapat dipecah menjadi empat langkah dasar, dan membuat bagan garis JS mengikuti pola yang sama

1. Membuat halaman HTML dasar untuk menampilkan grafik
2. Termasuk semua skrip JS yang kita butuhkan
3. Menambahkan data untuk bagan
4. Menulis kode charting JS

Jadi sekarang, mari gali setiap langkah ini untuk menggambar bagan garis kita dalam sekejap

1. Membuat halaman HTML dasar

Untuk memulai, kami membuat halaman HTML dasar dengan a

blok elemen untuk bagan garis kami. Untuk mereferensikan elemen blok ini nanti dalam kode, kami memberinya atribut id seperti "container".

  
    JavaScript Line Chart
    
  
  
    
  

Di sini, kami menyediakan

dengan lebar dan tinggi 100% untuk merender bagan garis di layar penuh. Tapi itu tidak perlu dan bisa disesuaikan dengan kebutuhan Anda tentunya

2. Termasuk semua skrip JS

Langkah kedua adalah mereferensikan semua skrip yang diperlukan untuk membuat bagan garis JS. Skrip ini akan masuk ke

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

3. Menambahkan data

Dalam tutorial ini, kita akan memvisualisasikan data dari GSS Data Explorer, yaitu data yang menunjukkan bagaimana perincian jawaban atas pertanyaan “Apakah salah orang dewasa sesama jenis melakukan hubungan seksual?” . Yaitu, kami akan mewakili persentase tanggapan "Tidak salah sama sekali" yang terlihat seperti indikator penerimaan yang baik di sini

AnyChart mendukung beberapa opsi untuk memuat data ke diagram. Kumpulan data untuk bagan garis kita cukup mudah dan tidak besar sama sekali. Jadi kita cukup memasukkannya ke dalam kode itu sendiri

Untuk melakukannya, kami membuat fungsi yang akan menampilkan data untuk menyimpannya sebagai blok kode terpisah

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

Semua persiapan sudah selesai dan sekarang saatnya membuat bagan garis dengan beberapa baris kode JavaScript

4. Menulis kode charting garis JS

Sebelum yang lainnya, kami menambahkan fungsi yang menyertakan semua kode JavaScript yang diperlukan untuk membuat bagan garis interaktif yang dimaksud. Ini memastikan bahwa kode di dalamnya hanya akan dieksekusi setelah semua halaman dimuat

Kami menyiapkan data dengan memanggil fungsi yang kami buat di langkah sebelumnya, lalu kami memetakan data untuk menunjukkan bahwa parameter pertama untuk setiap titik data adalah nilai X dan parameter kedua adalah nilai Y. Selanjutnya, kita memanggil fungsi

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

// create a data set on our data
var dataSet = anychart.data.set(getData());

// map data for the line chart,
// take x from the zero column and value from the first column
var seriesData = dataSet.mapAs({ x: 0, value: 1 });

// create a line chart
var chart = anychart.line();

Sekarang, kita menetapkan judul untuk bagan garis dan sumbu Y

// configure the chart title text settings
chart.title('Acceptance of same-sex relationships in the US over the last 2 decades');

// set the y axis title
chart.yAxis().title('% of people who accept same-sex relationships');

Terakhir, kita memuat data yang dipetakan ke bagan garis, menyetel id penampung, dan menggambar grafik

// create a line series with the mapped data
var lineChart = chart.line(seriesData);

// set the container id for the line chart
chart.container('container');

// draw the line chart
chart.draw();

Voila. Bagan garis fungsional, interaktif, berbasis JavaScript dibuat. Ini cukup cepat dan sederhana, bukan?

Lihat hasilnya di bawah, dan Anda dipersilakan untuk melihat diagram ini dan memainkan kodenya di AnyChart Playground

Apa yang dikatakan bagan garis ini kepada kita?

Tapi jangan pergi dulu. Meskipun bagan ini sudah terlihat bagus, ini hanyalah versi paling dasar dari bagan garis JS yang dapat kami peroleh. Hanya diperlukan beberapa langkah lagi untuk menambahkan fungsionalitas dan interaktivitas

Sekarang, bersiaplah untuk membuat bagan multi-garis menakjubkan yang akan memvisualisasikan pengelompokan berdasarkan usia

Membuat Diagram Garis JS Multi-Seri Interaktif

Saat ada data terpisah, kami menggunakan bagan garis multi-seri untuk menunjukkan setiap segmen sebagai garis terpisah. Mari kita lihat bagaimana hal itu dilakukan

Kode dasarnya tetap sama. Namun, alih-alih satu seri, kami akan membuat beberapa seri. Tentu saja, data tersebut akan berisi beberapa poin data untuk setiap tahun sekarang karena kami membagi persentase total untuk “Tidak salah sama sekali” menurut kelompok umur. 18-34, 35-49, 50-64, dan 65+

function getData() {
  return [
    ['1990',16.9,12.2,10.2,5.2],
    ['1991',17,17.8,10,4.8],
    ['1993',26.5,23.8,16.8,6.6],
    ['1994',28.7,22,17.3,9.1],
    ['1996',35.7,24,22.6,9.2],
    ['1998',37.2,24.6,22.4,11.2],
    ['2000',36.5,26.2,23.7,9.9],
    ['2002',40,34.4,23.8,16.4],
    ['2004',33.3,28.8,32.5,14.3],
    ['2006',40.2,32.1,27.5,15.1],
    ['2008',49.3,37.2,31.4,17.1],
    ['2010',51.9,42.5,36.1,28.5],
    ['2012',53.1,43.8,36,24.6],
    ['2014',63.7,45.9,44.7,31.3],
    ['2016',66.3,52,42.3,37.2],
    ['2018',70.1,57.7,49.2,39]
  ];
}

Kita perlu membuat pemetaan data yang berbeda untuk setiap seri

// map data for the first series,
// take x from the zero column and value from the first column
var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 });

// map data for the second series,
// take x from the zero column and value from the second column
var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 });

// map data for the third series,
// take x from the zero column and value from the third column
var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 });
  
// map data for the fourth series,
// take x from the zero column and value from the fourth column
var fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 });

Kami kemudian menautkan setiap seri tersebut ke garis yang berbeda dan menamai setiap seri berdasarkan segmennya

// create the first series with the mapped data
var firstSeries = chart.line(firstSeriesData);
firstSeries.name('18-34');

// create the second series with the mapped data
var secondSeries = chart.line(secondSeriesData);
secondSeries.name('35-49');

// create the third series with the mapped data
var thirdSeries = chart.line(thirdSeriesData);
thirdSeries.name('50-64');
  
// create the fourth series with the mapped data
var fourthSeries = chart.line(fourthSeriesData);
fourthSeries.name('65+');

Di sini, karena kami memiliki beberapa garis yang digambarkan dalam plot garis JS, kami memerlukan legenda yang akan membantu mengidentifikasi garis mana yang mewakili segmen mana. Jangan khawatir, tidak ada yang rumit. Legenda bagan secara otomatis dibuat oleh pustaka JS dan kita hanya perlu mengaktifkannya

// turn the legend on
chart.legend().enabled(true);

Itu dia. Dengan modifikasi sederhana ini, kami mendapatkan bagan garis multi-seri yang tampak cantik yang dibuat dengan JavaScript. Ini juga dapat dilihat dan diputar lebih lanjut di AnyChart Playground

Sekali lagi, kita dapat dengan jelas memahami bagaimana keseluruhan tren positif di semua kelompok umur, terutama di generasi muda

Menyesuaikan Desain Diagram Garis JS Multi-Seri

Bagan garis multi-seri terlihat bagus apa adanya, tetapi kami dapat membuatnya lebih keren lagi dengan beberapa penyesuaian. AnyChart sangat bagus dalam hal itu karena menawarkan banyak opsi siap pakai yang memungkinkan Anda mengubah diagram JS (HTML5) seperti ini dengan mudah

Jadi, mari lakukan beberapa penyesuaian cepat untuk mendapatkan tampilan data yang lebih mendalam

1. Menghaluskan garis

Seperti yang bisa kita lihat, garis-garis yang terbentuk saat ini tajam pada sambungannya dan memberikan kesan yang lebih geometris. Di library AnyChart JS, kita bisa mendapatkan garis yang lebih mulus hanya dengan mengganti “garis” dengan “spline” saat menautkan data dengan rangkaian

// create the first series with the mapped data
var firstSeries = chart.spline(firstSeriesData);
firstSeries.name('18-34');

// create the second series with the mapped data
var secondSeries = chart.spline(secondSeriesData);
secondSeries.name('35-49');

// create the third series with the mapped data
var thirdSeries = chart.spline(thirdSeriesData);
thirdSeries.name('50-64');
  
// create the fourth series with the mapped data
var fourthSeries = chart.spline(fourthSeriesData);
fourthSeries.name('65+');

Setelah perubahan sederhana ini, bagan garis kami menjadi bagan spline

2. Menambahkan crosshair pada hover untuk setiap titik data

Karena garis dalam visualisasi kita kini halus, membuat garis bidik muncul saat pemirsa mengarahkan kursor ke garis dapat meningkatkan keterbacaan. Juga mudah untuk menyesuaikan perilaku crosshair. Dalam hal ini, misalnya, biarkan konektor dan label sumbu X saja

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

Lihat bagan spline JavaScript interaktif dengan crosshair. Ini tersedia di AnyChart Playground

Terakhir, untuk bagan terakhir dari tutorial bagan garis JS ini, mari lanjutkan dengan garis lurus, bukan kurva halus. Tapi kami akan tetap mempertahankan crosshair

3. Meningkatkan tooltip bagan garis JS

Untuk membuat tooltip bagan garis lebih informatif, kami membuatnya menampilkan bahwa angka adalah nilai persentase dan segmen adalah kelompok usia

Ini dapat dengan mudah dilakukan dengan menyetel fungsi

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

4. Mengubah warna dan estetika lainnya

Karena bagan garis berbasis JavaScript ini berbicara tentang hubungan sesama jenis, kita dapat menggunakan warna kebanggaan untuk mewakili garis. Ini membuat bagan terlihat lebih personal dan mewakili topik dengan lebih baik

Mari kita buat juga garisnya sedikit lebih tebal agar terlihat lebih jelas. Memodifikasi warna dan lebar garis dapat dilakukan bersamaan dengan menggunakan atribut

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

Terakhir, kami menambahkan animasi sederhana untuk meramaikan bagan garis, yang sekali lagi dilakukan dengan sangat mudah karena perpustakaan JavaScript memilikinya sebagai fitur bawaan.

function getData() {
  return [
    ['1990',12],
    ['1991',14],
    ['1993',21],
    ['1994',21],
    ['1996',26],
    ['1998',26],
    ['2000',27],
    ['2002',31],
    ['2004',29],
    ['2006',31],
    ['2008',36],
    ['2010',41],
    ['2012',42],
    ['2014',48],
    ['2016',50],
    ['2018',57]
  ];
}

Selesai. Bagan garis JavaScript yang menakjubkan dan interaktif semuanya terbungkus

Untuk kenyamanan Anda, kode bagan garis HTML/CSS/JS terakhir ada di bawah visualisasi. Jangan ragu untuk memeriksanya di AnyChart Playground dan mungkin menerapkan data Anda dan perubahan lainnya

Bagaimana Anda membuat grafik garis di HTML5?

Bagaimana Anda memplot grafik dalam HTML?

Bagaimana cara membuat grafik garis dalam HTML menggunakan JavaScript?

Bagaimana cara membuat grafik garis?