Bagaimana Anda memplot grafik dalam html?

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 Langkah

Secara umum, seluruh proses pembuatan bagan apa pun dalam JavaScript dipecah menjadi empat langkah, dan bagan garis tidak terkecuali

1. Buat halaman HTML dengan wadah
2. Sertakan file JavaScript
3. Tambahkan data Anda
4. 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

Parameter

8 dan

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 sendiri

2. 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]
];

0

Ada 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. )

_

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

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?

Bagan garis yang menunjukkan perburuan gelar 3 Besar - dibuat dengan AnyChart

Lihat versi dasar bagan garis ini dengan kode HTML/CSS/JS lengkap di CodePen. Untuk jaga-jaga, ini kodenya juga

_Cara Menyesuaikan Bagan Garis Anda

Bagan 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

_0

3. 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

_1

4. 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

_2

Lihat 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

_3

6. 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

_4

Untuk legenda bagan, mudah untuk mengubah ukuran font dan padding

_5

Lihat 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

_6

Nikmati 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

7Kesimpulan

Seperti 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

---

Shachee Swadia

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

Bagaimana cara menggambar grafik dalam HTML?

Bisakah Anda membuat grafik dalam HTML?

Bagaimana cara membuat grafik garis dalam HTML?

Bagaimana cara menampilkan bagan dalam HTML?