Ada beberapa library charting yang bisa digunakan. gRaphael, Highcharts dan yang disebutkan oleh orang lain. Pustaka ini cukup mudah digunakan dan terdokumentasi dengan baik [misalkan 1 pada skala kesulitan]
AFAIK, lib ini bukan "real-time" karena tidak memberikan kemungkinan untuk menambah poin baru dengan cepat. Untuk menambahkan poin baru, Anda perlu menggambar ulang grafik penuh. Tapi menurut saya ini bukan masalah karena menggambar ulang grafik itu cepat. Saya telah mencoba beberapa kali dengan gRaphael dan saya tidak melihat ada masalah dengan pendekatan ini. Jika Anda memperbarui tingkat 10-an, itu seharusnya berfungsi dengan baik [tetapi mungkin tergantung pada kerumitan bagan Anda]
Jika menggambar ulang bagan lengkap merupakan masalah, Anda mungkin harus mengembangkan bagan sendiri dengan lib grafik vektor seperti Raphael atau kertas. js. Itu akan sedikit lebih sulit daripada menggunakan lib charting tetapi harus layak. [Katakanlah 5 pada skala kesulitan]
Saat Anda mendapatkan data pada interval tetap, Anda dapat menggunakan lib ajax biasa. jQuery baik-baik saja untuk saya tetapi ada beberapa pilihan lain. Itu mungkin bukan pilihan terbaik untuk interval tidak tetap dan dalam hal ini Anda mungkin harus melihat sesuatu seperti soket. io tetapi itu akan memiliki konsekuensi di sisi server juga
Catatan 1. Raphael, gRaphael dan Highcharts bukan murni HTML5 tetapi SVG/VML tapi saya kira ini adalah pilihan yang dapat diterima juga
Tetapi ada beberapa grafik dasar dan selalu hijau yang harus diketahui oleh setiap perancang data dan pengembang web yang berurusan dengan analitik
Salah satunya adalah Line Chart [atau Grafik Garis]. Ini terutama dirancang untuk mewakili data dari waktu ke waktu
Anda dapat mengikuti tutorial ini untuk mempelajari cara cepat membuat bagan garis [dan garis langkah] interaktif yang indah menggunakan JavaScript. Kita akan melihat beberapa contoh keren dan membuatnya langkah demi langkah, yang akan membuat prosesnya jelas dan menghibur
Demi kenyamanan Anda, Anda dapat menemukan semuanya di CodePen sehingga Anda dapat bermain dengan kode bagan garis lebih lanjut tanpa batas
Kumpulan Data kami
Dua dekade terakhir tidak kalah spektakulernya di dunia tenis. Tiga Besar - Roger Federer, Rafael Nadal, dan Novak Djokovic - telah memenangkan gabungan 63 [dari 78] turnamen Grand Slam yang menakjubkan. Ini adalah kejuaraan paling bergengsi
Saya memutuskan untuk merencanakan persaingan mereka yang luar biasa. Jadi, grafik garis JS dalam tutorial ini akan memvisualisasikan perebutan gelar Grand Slam Tiga Besar. Dan servis pertama sudah datang
Cara Membuat Bagan Garis dalam 4 LangkahSecara umum, seluruh proses pembuatan bagan apa pun dalam JavaScript dipecah menjadi empat langkah, dan bagan garis tidak terkecuali
- Buat halaman HTML dengan wadah
- Sertakan file JavaScript
- Tambahkan data Anda
- Kode visualisasi
Mari kita bahas setiap langkah ini sekarang
1. Buat halaman HTML dengan wadah
Untuk memulainya, Anda memerlukan tempat di mana Anda ingin bagan Anda muncul
Jika Anda belum memilikinya, buat halaman web dasar. Kemudian buat wadah untuk bagan garis — tambahkan elemen tingkat blok HTML dan berikan ID unik untuk referensi lebih lanjut
Seperti inilah tampilan halaman tersebut
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
Parameter
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
8 dan
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
9 elemen ditetapkan sebagai 100%. Akibatnya, bagan garis akan ditampilkan di seluruh halaman web. Tentu saja Anda dapat mengatur pengaturan gaya sesuai dengan keinginan dan kebutuhan Anda sendiri2. Sertakan file JavaScript
Selanjutnya, sertakan semua file JavaScript, yang akan kita gunakan untuk membuat bagan garis, di bagian
var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
0Ada banyak pustaka pembuatan bagan JavaScript berbeda yang memungkinkan Anda memvisualisasikan data dengan cara yang cepat dan sederhana. Banyak dari mereka mendukung bagan garis, dan Anda dapat memilih satu atau yang lain tergantung pada kebutuhan proyek Anda
Untuk tujuan ilustrasi, dalam tutorial ini, saya menggunakan AnyChart JS Charts. Ini fleksibel, dilengkapi dengan dokumen pembuatan bagan dan referensi API yang ekstensif, dan Anda dapat menggunakannya secara gratis [kecuali jika Anda sedang membangun sesuatu untuk bisnis. ]
Untuk bagan garis, saya menambahkan modul "Base" dari CDN. [Tentu saja, Anda dapat mengunduhnya, memasukkannya ke dalam folder di situs web Anda, dan menggunakan tautan Anda sendiri untuk itu. ]
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
_Kode JavaScript untuk grafik garis akan disisipkan di antara tag
var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
1 dan var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
2 yang terletak di bagian var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
3 [Anda dapat menempatkannya di bagian var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
0 jika Anda mau]3. Tambahkan data Anda
Kemudian, tambahkan data yang ingin Anda visualisasikan di bagan garis Anda
Saya menghitung semuanya, berdasarkan tahun. Saya akan menambahkannya begitu saja sebagai array dari array
Jika Anda lebih suka format lain dalam kasus khusus Anda, seperti JSON, XML, CSV, atau yang lainnya, periksa cara bekerja dengan data
var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
Di setiap larik, tahun adalah parameter pertama [kolom #0]. Kemudian muncul jumlah gelar yang dimenangkan oleh ketiga pemain tersebut secara berurutan [kumulatif untuk masing-masing]
4. Kode visualisasi
Sekarang, sesi pemanasan selesai, dan lapangan sudah siap. Jadi, mari kita mulai pertandingannya dan lakukan pengkodean JavaScript cepat
Pertama, tambahkan
var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
_5 seperti yang ditunjukkan di bawah ini
anychart.onDocumentReady[function[] {
// The main JS line charting code will be here.
}];
Segala sesuatu yang lain masuk ke dalam fungsi itu
Jadi, kedua, sertakan data [dari langkah sebelumnya]
Ketiga, buat kumpulan data dan petakan untuk setiap seri [satu untuk setiap pemain]
// create a data set
var dataSet = anychart.data.set[data];
// map the data for all series
var firstSeriesData = dataSet.mapAs[{x: 0, value: 1}];
var secondSeriesData = dataSet.mapAs[{x: 0, value: 2}];
var thirdSeriesData = dataSet.mapAs[{x: 0, value: 3}];
Keempat, buat contoh diagram garis dan tiga rangkaian dengan data yang dipetakan
// create a line chart
var chart = anychart.line[];
// create the series and name them
var firstSeries = chart.line[firstSeriesData];
firstSeries.name["Roger Federer"];
var secondSeries = chart.line[secondSeriesData];
secondSeries.name["Rafael Nadal"];
var thirdSeries = chart.line[thirdSeriesData];
thirdSeries.name["Novak Djokovic"];
Kelima, untuk memperjelas sekilas apa yang ditampilkan di bagan garis, ada baiknya menambahkan legenda dan judul
// add a legend
chart.legend[].enabled[true];
// add a title
chart.title["Big Three's Grand Slam Title Race"];
Terakhir, rujuk ID elemen penampung dan gambar bagan garis yang dihasilkan
// specify where to display the chart
chart.container["container"];
// draw the resulting chart
chart.draw[];
Itu dia. Grafik garis yang berfungsi penuh dibuat dengan JS sudah siap. Terasa seperti kemenangan straight set, bukan?
Lihat versi dasar bagan garis ini dengan kode HTML/CSS/JS lengkap di CodePen. Untuk jaga-jaga, ini kodenya juga
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
anychart.onDocumentReady[function [] {
// add data
var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
// create a data set
var dataSet = anychart.data.set[data];
// map the data for all series
var firstSeriesData = dataSet.mapAs[{x: 0, value: 1}];
var secondSeriesData = dataSet.mapAs[{x: 0, value: 2}];
var thirdSeriesData = dataSet.mapAs[{x: 0, value: 3}];
// create a line chart
var chart = anychart.line[];
// create the series and name them
var firstSeries = chart.line[firstSeriesData];
firstSeries.name["Roger Federer"];
var secondSeries = chart.line[secondSeriesData];
secondSeries.name["Rafael Nadal"];
var thirdSeries = chart.line[thirdSeriesData];
thirdSeries.name["Novak Djokovic"];
// add a legend
chart.legend[].enabled[true];
// add a title
chart.title["Big Three's Grand Slam Title Race"];
// specify where to display the chart
chart.container["container"];
// draw the resulting chart
chart.draw[];
}];
_Cara Menyesuaikan Bagan Garis AndaBagan garis dasar yang kita buat dengan mengikuti empat langkah di atas sudah terlihat bagus. Tetapi bagaimana jika Anda ingin menyesuaikannya?
Izinkan saya menunjukkan cara membuat beberapa perubahan dengan cara yang sama cepat dan mudahnya
1. Beri nama sumbu
Itu selalu merupakan ide yang baik untuk menjelaskan apa yang diwakili oleh setiap sumbu bagan garis, meskipun tampaknya cukup jelas. Untuk menambahkan judul ke sumbu X dan Y, gunakan berikut ini
chart.yAxis[].title["Titles won"];
chart.xAxis[].title["Year"];
2. Sesuaikan penanda
Secara default, saat Anda menggerakkan penunjuk tetikus ke atas plot, penanda muncul di setiap rangkaian garis, dan bentuknya berbeda. Mengapa tidak memberi penanda bentuk yang sama?
Lihat bagaimana Anda dapat menyesuaikan tampilan penanda rangkaian garis
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
_03. Aktifkan garis bidik
Garis bidik adalah sepasang garis tegak lurus yang mengikuti penunjuk tetikus untuk membantu Anda lebih memahami nilai X dan Y pada titik mana pun yang sedang dilayangkan
Dalam hal ini, cukup untuk mendapatkan hanya satu garis seperti itu, vertikal, untuk menyorot tahun. Begini caranya
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
_14. Ubah posisi tooltip
Saat ini, tooltip mengikuti pointer mouse. Namun dalam situasi ini, akan lebih baik membuatnya tetap pada poin data
Untuk mencapai perilaku semacam itu, cukup tentukan mode posisi tooltip bagan garis sebagai "titik" dan sesuaikan pengaturan posisi lainnya sesuai keinginan Anda. Sebagai contoh
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
_2Lihat bagaimana bagan garis JavaScript terlihat sekarang setelah semua penyesuaian ini. [Lihat langsung dengan kode lengkap di CodePen. ]
5. Ubah warnanya
Salah satu cara paling sederhana, namun paling efektif untuk mempersonalisasi visualisasi data adalah dengan bermain dengan warna
Kode di bawah ini mengubah warna garis setiap pemain menjadi warna utama turnamen Grand Slam yang paling banyak dimenangkannya. Wimbledon ungu untuk Federer, Prancis Terbuka cokelat untuk Nadal, dan biru Australia Terbuka untuk Djokovic. Selain itu, ketebalan garis disesuaikan
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
_36. Perbaiki judul dan teks legenda
Perubahan terakhir yang ingin saya tunjukkan dalam tutorial ini — dan melengkapi bagan garis interaktif — adalah penyesuaian judul dan legenda
Anda dapat menambahkan subtitle untuk memberikan lebih banyak konteks, dan Anda dapat membuat gaya teks lebih menarik dalam beberapa perubahan cepat dengan bantuan HTML
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
_4Untuk legenda bagan, mudah untuk mengubah ukuran font dan padding
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
_5Lihat apa yang kami punya. [Lihat bagan garis JS ini di CodePen. ]
Cara Membuat Bagan Garis Langkah
Sama seperti selalu lebih seru ketika pertandingan tenis adalah pertandingan lima setter, berikut adalah tambahan untuk membuat tutorial ini dan visualisasi grafik garis ini menjadi lebih mengagumkan
Dari sudut pandang visualisasi data, diagram garis berundak sebenarnya akan berfungsi lebih baik dalam kasus ini. Dan kita bisa membuatnya hanya dengan satu modifikasi kecil
Cukup ubah fungsi
var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
_6 menjadi var data = [
["2003", 1, 0, 0],
["2004", 4, 0, 0],
["2005", 6, 0, 0],
["2006", 9, 1, 0],
["2007", 12, 2, 0],
["2008", 13, 5, 1],
["2009", 15, 6, 1],
["2010", 16, 9, 1],
["2011", 16, 10, 4],
["2012", 17, 11, 5],
["2013", 17, 13, 6],
["2014", 17, 14, 7],
["2015", 17, 14, 10],
["2016", 17, 14, 12],
["2017", 19, 16, 12],
["2018", 20, 17, 14],
["2019", 20, 19, 16],
["2020", 20, 20, 17],
["2021", 20, 20, 20],
["2022", 20, 22, 20]
];
7 dan bagan garis Anda akan menjadi bagan garis berundak Anda
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
_6Nikmati bagan garis langkah bertenaga JavaScript yang elegan yang memvisualisasikan perebutan gelar Grand Slam antara Tiga Besar dalam tenis. [Jangan ragu untuk menjelajahi dan terus bermain dengan kode sumber lengkapnya di CodePen. ]
Dan ini kode lengkapnya
Line Chart JS
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
// JavaScript code for the line chart.
7KesimpulanSeperti yang dapat Anda lihat dalam tutorial ini, membuat bagan garis interaktif [dan garis berundak] dengan JavaScript bisa sangat mudah. Beri tahu saya jika Anda memiliki pertanyaan atau saran
Sangat memotivasi untuk melihat bagaimana orang-orang hebat ini telah mencapai banyak hal dalam kehidupan profesional mereka
Mari kita gunakan inspirasi ini untuk maju dalam bidang pengembangan visualisasi data dengan membangun lebih banyak lagi [dan semakin mengagumkan] bagan dan grafik
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
Saya seorang pekerja lepas perangkat lunak yang suka bepergian dan membaca. Secara profesional, saya membuat cerita visual untuk individu dan organisasi untuk membantu menyampaikan pesan mereka dengan cara yang efektif
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai