Agar Anda siap untuk kebutuhan pengembangan HTML5 Anda, kami telah mengumpulkan banyak resep untuk membantu Anda memulai proyek Anda. Selain membacanya secara online, Anda dapat mengunduh eBuku dalam format PDF
Saya menyetujui Ketentuan dan Kebijakan Privasi
Terima kasih
Kami akan segera menghubungi Anda
Karena ini adalah contoh HTML, kami tidak memerlukan server web atau bahasa back-end apa pun yang dipasang di mesin kami, hanya browser web
Untuk contoh ini, browser berikut telah digunakan untuk pengujian
- Chromium 56. 0. 2924. 76
- Firefox 52. 0. 1
- Operasi 44. 0
Daftar isi
1. Elemen kanvas
Elemen kanvas adalah salah satu hal baru yang paling diharapkan dari HTML5. Elemen ini memungkinkan kita menggambar gambar secara dinamis di halaman web, biasanya dilakukan dengan JavaScript yang dikombinasikan dengan API kanvas
Seperti yang dikatakan, elemen yang harus kita gunakan adalah canvas
. Jadi, sesuatu seperti berikut ini sudah cukup untuk memulai
kanvas. html
Graph - Canvas #wrapper { width: 80%; margin: 0 auto; text-align: center; } #canvas { border: 1px solid black; }HTML5 Canvas
Ini akan merender kanvas putih di browser berukuran 400×400 [dengan batas hitam disetel dengan CSS]. Tidak ada yang sangat menarik
Namun, setelah kita memiliki kanvas, kita dapat menggambar di atasnya. Mari kita lihat cara menggambar garis untuk melihat fungsi kanvas yang paling mendasar
kanvas. js
document.addEventListener['DOMContentLoaded', function[event] { var canvas = document.getElementById['canvas'], context = canvas.getContext['2d']; context.beginPath[]; context.moveTo[0, 0]; context.lineTo[400, 400]; context.strokeStyle = '#7142f4'; context.stroke[]; }];_
Hal pertama yang kami lakukan adalah mengikat potongan kode yang memanipulasi kanvas ke DOMContentLoaded
listener, karena kami harus memastikan bahwa elemen dimuat sebelum kami mengaksesnya
Kemudian, kita mendapatkan objek kanvas dari DOM. Tapi, untuk menggambarnya, kita perlu mendapatkan konteks render dari kanvas, konteks 2D. Konteks ini menawarkan metode untuk menggambar di kanvas
Untuk menggambar garis, hal pertama yang kita lakukan adalah memanggil metode
document.addEventListener['DOMContentLoaded', function[event] { var canvas = document.getElementById['canvas'], context = canvas.getContext['2d']; context.beginPath[]; context.moveTo[0, 0]; context.lineTo[400, 400]; context.strokeStyle = '#7142f4'; context.stroke[]; }];0. Ini untuk memberi tahu kanvas bahwa, secara efektif, yang akan kita lakukan adalah menggambar jalur [garis]
Kemudian, kita harus mengatur awal jalur dalam sistem koordinat, dengan metode
document.addEventListener['DOMContentLoaded', function[event] { var canvas = document.getElementById['canvas'], context = canvas.getContext['2d']; context.beginPath[]; context.moveTo[0, 0]; context.lineTo[400, 400]; context.strokeStyle = '#7142f4'; context.stroke[]; }];1. Kita harus memperhitungkan bahwa, dalam sistem koordinat piksel, [0, 0] ditempatkan di sudut kiri atas, yaitu sumbu Y terbalik sehubungan dengan sistem koordinat kartesius. Jadi, jalurnya akan dimulai di pojok kiri atas kanvas
Kita juga dapat mengatur gaya garis, menetapkan warna ke properti
document.addEventListener['DOMContentLoaded', function[event] { var canvas = document.getElementById['canvas'], context = canvas.getContext['2d']; context.beginPath[]; context.moveTo[0, 0]; context.lineTo[400, 400]; context.strokeStyle = '#7142f4'; context.stroke[]; }];2 dari objek konteks. Warna standarnya adalah hitam
Akhirnya, untuk menggambar garis untuk jalur yang ditentukan, kita harus memanggil metode
document.addEventListener['DOMContentLoaded', function[event] { var canvas = document.getElementById['canvas'], context = canvas.getContext['2d']; context.beginPath[]; context.moveTo[0, 0]; context.lineTo[400, 400]; context.strokeStyle = '#7142f4'; context.stroke[]; }];3. Inilah yang akan kita lihat di browser
1. Menggambar garis di atas kanvas
2. Menggambar grafik [lebih kompleks].
Sebenarnya, kita dapat mempertimbangkan grafik apa yang telah kita lakukan di atas. Tapi mari kita lihat contoh yang lebih menyeluruh
Misalkan kita ingin menunjukkan grafik pertumbuhan populasi dunia, per benua. Kita dapat menggunakan dataset berikut untuk ini
Continent17001750180018501900195020002050Africa1061061071111332217832478America121831641563398201217Asia441502635809947140237005267Europe178190203276408547675734Oceania32226133057World71079197812621650252160089725[Sumber. Wikipedia]
Catatan. nilai untuk tahun 2050, jelas merupakan perkiraan. Tapi ini tidak penting untuk tujuan kita
Untuk ini, kami akan menggunakan basis HTML yang hampir sama
canvas_population. html
Graph - Canvas #wrapper { width: 80%; margin: 0 auto; text-align: center; }_World population growth
JavaScript akan menjadi sebagai berikut
canvas_population. js
var populationGrowth = { 'africa' : [106, 106, 107, 111, 133, 221, 783, 2478], 'america': [12, 18, 31, 64, 156, 339, 820, 1217], 'asia' : [411, 502, 635, 809, 947, 1402, 3700, 5267], 'europe' : [178, 190, 203, 276, 408, 547, 675, 734], 'oceania': [3, 2, 2, 2, 6, 13, 30, 57], 'world' : [710, 791, 978, 1262, 1650, 2521, 6008, 9725] }; var xScale = 50; function initCanvas[] { var canvas = document.getElementById['canvas'], context = canvas.getContext["2d"]; context.strokeColor = '#7142f4'; return context; } function plotDataset[context, dataSet] { var canvasHeight = context.canvas.height; context.beginPath[]; context.moveTo[0, dataSet[0]]; for [var populationIndex = 0; populationIndex < dataSet.length; populationIndex++] { var population = dataSet[populationIndex], xCoordinate = populationIndex * xScale, yCoordinate = canvasHeight - population; context.lineTo[xCoordinate, yCoordinate]; } context.stroke[]; } function draw[context, dataSet] { for [var continent in dataSet] { var population = dataSet[continent]; plotDataset[context, population]; } } document.addEventListener['DOMContentLoaded', function[event] { var context = initCanvas[]; draw[context, populationGrowth]; }];
Mari kita periksa kodenya
Hal pertama yang kami lakukan adalah mendefinisikan objek dengan data kami. Tidak ada yang sangat istimewa
Kemudian, kami mendefinisikan, pada baris 10, nilai skala untuk sumbu X. Ini untuk menentukan "jarak" antara setiap nilai dalam sumbu X. Seperti yang Anda lihat, ini adalah nilai arbitrer yang lengkap. Kami akan pergi seperti itu untuk saat ini
Fungsi untuk menginisialisasi kanvas tidak melakukan apa pun yang belum kita ketahui
The one for plotting the dataset [the dataset will be the array of values for each continent] is the most interesting one. Note that the first thing we do is to save the height of the canvas. After beginning the path and moving the initial point [which is the [0, ]] for the dataset in question, we start looping each value of the dataset. For the X coordinate, we multiply the value itself with the scaling value, as explained above. And, for the Y coordinate, we have to “invert” the actual value because, remember, the Y axis in the pixel coordinate system goes “top-down”. To display the actual value in the system, we just have to subtract the value in question to the canvas height.
Fungsi terakhir hanya untuk mengulang objek dengan kumpulan data dan memanggil metode yang dijelaskan dalam paragraf di atas
Terakhir, saat DOM dimuat, kita tinggal memasukkan konteksnya, dan menggambar datanya
Hasilnya adalah sebagai berikut
2. Menampilkan kumpulan data di atas kanvas
Mungkin hasilnya cukup mengecewakan. Terlepas dari gaya yang terus terang dapat diperbaiki, bahkan tidak semua kumpulan data ditampilkan. Dan, untuk yang ditampilkan, tidak semua data ditampilkan
Alih-alih menginvestasikan waktu dan upaya kita untuk menggambar bagan yang jelek, kita akan melihat cara menggambar bagan yang menakjubkan dengan perpustakaan JavaScript
3. Bagan. js
Kita telah melihat cara menggambar grafik secara native, mendefinisikan beberapa kumpulan data, dan membangun fungsi kita sendiri untuk menggambar data di kanvas. Tetapi fungsi yang telah kami kodekan hanya berlaku untuk jenis grafik tertentu, bagan garis. Saat ini kami perlu menampilkan jenis grafik lain, kami harus membangun fungsi dari awal
Untungnya, tersedia perpustakaan untuk menggambar bagan yang indah, dengan variasi yang sangat banyak, bernama Bagan. js. Pada bagian ini, kita akan melihat cara menggambar beberapa jenis grafik dengan library ini
Untuk menggunakannya, kita dapat memuatnya dari CDN, atau mengunduhnya ke ruang kerja kita. Ini tersedia di cdnjs. com. Dalam tutorial ini, kami telah menggunakan versi 2. 5. 0
3. 1. Bagan garis
Cara terbaik untuk mulai menggunakan Bagan. js menggunakan jenis bagan yang sama dengan yang kami buat secara manual
Basis HTML akan hampir sama, seperti biasanya
chartjs_line. html
Chart.js - Line chart #wrapper { width: 60%; margin: 0 auto; text-align: center; }_Chart.js - Population growth
JavaScript akan menjadi sebagai berikut
chartjs_line. js
var years = [1700, 1750, 1800, 1850, 1900, 1950, 2000, 2050]; var population = { labels: years, datasets: [ { label: 'Africa', borderColor: "rgba[220,180,0,1]", pointColor: "rgba[220,180,0,1]", lineTension: 0, fill: false, data: [106, 106, 107, 111, 133, 221, 783, 2478] }, { label: 'America', borderColor: "rgba[94,5,115,1]", pointColor: "rgba[151,187,205,1]", lineTension: 0, fill: false, data: [12, 18, 31, 64, 156, 339, 820, 1217] }, { label: 'Asia', borderColor: "rgba[151,187,205,1]", pointColor: "rgba[151,187,205,1]", lineTension: 0, fill: false, data: [411, 502, 635, 809, 947, 1402, 3700, 5267] }, { label: 'Europe', borderColor: "rgba[46,103,219,1]", pointColor: "rgba[151,187,205,1]", lineTension: 0, fill: false, data: [178, 190, 203, 276, 408, 547, 675, 734] }, { label: 'Oceania', borderColor: "rgba[189,50,189 ,1]", pointColor: "rgba[151,187,205,1]", lineTension: 0, fill: false, data: [3, 2, 2, 2, 6, 13, 30, 57] }, { label: 'World', borderColor: "rgb[3,202,103]", pointColor: "rgba[3,202,103,1]", lineTension: 0, fill: false, data: [710, 791, 978, 1262, 1650, 2521, 6008, 9725] }, ] }; document.addEventListener['DOMContentLoaded', function[event] { var context = document.getElementById['canvas'].getContext['2d']; var populationChart = new Chart[ context, { type: 'line', data: population, } ]; }];_
Itu dia. Yang harus kita lakukan adalah mendefinisikan sebuah objek, dengan struktur itu, dan kemudian membuat sebuah Bagan
Menyetel
document.addEventListener['DOMContentLoaded', function[event] { var canvas = document.getElementById['canvas'], context = canvas.getContext['2d']; context.beginPath[]; context.moveTo[0, 0]; context.lineTo[400, 400]; context.strokeStyle = '#7142f4'; context.stroke[]; }];_4 ke 0 akan membuat garis grafik lurus, jika tidak, akan melengkung; . Membiarkannya sebagai default, akan menghasilkan jenis bagan yang berbeda, bagan area
Dan, dengan ini, hasilnya adalah sebagai berikut
3. Data ditampilkan pada gambar 2, namun menggunakan Chart. js
Cantik. Dan tanpa perlu pengkodean JavaScript apa pun, selain definisi data
Tapi itu belum semuanya. Kita dapat berinteraksi dengan grafik. Misalnya, jika kita mengklik label teratas, kita dapat menyembunyikan/menampilkannya
4. Bagan yang sama, tetapi menyembunyikan beberapa kumpulan data
Dan, jika kita menempatkan kursor pada setiap titik nilai grafik, nilai yang tepat akan ditampilkan
3. 2. Grafik batang
Bagan batang digunakan untuk merepresentasikan secara grafis kumpulan data kuantitatif, atau kualitatif, data diskrit. Sumbu X mewakili modalitas atau konsep yang berbeda, dan sumbu Y mewakili frekuensi masing-masing
Jadi, ya, diagram batang juga dapat digunakan untuk menampilkan populasi di berbagai wilayah. Namun, dalam hal ini, akan mengurangi jumlah tahun untuk menampilkan populasi, menjadi 2, agar tidak memiliki grafik yang terlalu besar
Dengan ini, JavaScript akan menjadi sebagai berikut
var population = { labels: ['Africa', 'America', 'Asia', 'Europe', 'Oceania', 'World'], datasets: [ { label: '2000 year population', data: [783, 820, 3700, 675, 30, 6008], backgroundColor: [ 'rgba[255, 99, 132, 0.5]', 'rgba[255, 99, 132, 0.5]', 'rgba[255, 99, 132, 0.5]', 'rgba[255, 99, 132, 0.5]', 'rgba[255, 99, 132, 0.5]', 'rgba[255, 99, 132, 0.5]', ], borderColor: [ 'rgba[255,99,132,1]', 'rgba[255,99,132,1]', 'rgba[255,99,132,1]', 'rgba[255,99,132,1]', 'rgba[255,99,132,1]', 'rgba[255,99,132,1]', ], }, { label: '2050 year population [estimation]', data: [2478, 1217, 5267, 734, 57, 9725], backgroundColor: [ 'rgba[17,216,235, 0.5]', 'rgba[17,216,235, 0.5]', 'rgba[17,216,235, 0.5]', 'rgba[17,216,235, 0.5]', 'rgba[17,216,235, 0.5]', 'rgba[17,216,235, 0.5]', ], borderColor: [ 'rgba[17,216,235,1]', 'rgba[17,216,235,1]', 'rgba[17,216,235,1]', 'rgba[17,216,235,1]', 'rgba[17,216,235,1]', 'rgba[17,216,235,1]', ], } ] }; document.addEventListener['DOMContentLoaded', function[event] { var context = document.getElementById['canvas'].getContext['2d']; var clientsChart = new Chart[ context, { type: 'bar', data: population } ]; }];
Perhatikan bahwa, dalam hal ini, meskipun datanya sama, dalam kumpulan data harus dikelompokkan berdasarkan tahun, bukan menurut benua
Untuk ini, bagan yang diberikan adalah yang ini
5. Bagan batang menggunakan Bagan. js
3. 3. Pie chart
Bagan lingkaran atau "pai" umumnya digunakan untuk menampilkan persentase dan proporsi
Ini berarti bahwa contoh kami sebelumnya tidak berlaku untuk jenis bagan ini, jadi kami harus mengubah data yang akan kami wakili. Untuk kasus ini kita dapat menggunakan, misalnya, persentase perluasan wilayah masing-masing benua [menghilangkan laut]
chartjs_pie. js
var continentsArea = { labels: ['Asia', 'America', 'Africa', 'Europe', 'Antartica', 'Oceania'], datasets: [ { backgroundColor: [ 'rgba[234,223,74, 0.5]', 'rgba[252,21,56 , 0.2]', 'rgba[211,213,232 , 0.2]', 'rgba[75, 192, 192, 0.2]', 'rgba[153, 102, 255, 0.2]', 'rgba[255, 159, 64, 0.2]' ], borderColor: [ 'rgba[234,223,74, 0.8]', 'rgba[252,21,56 , 0.8]', 'rgba[211,213,232, 0.8]', 'rgba[83,210,189, 0.8]', 'rgba[153, 102, 255, 0.8]', 'rgba[255, 159, 64, 0.8]' ], data: [30, 28, 20, 7, 9, 6] }, ] }; document.addEventListener['DOMContentLoaded', function[event] { var context = document.getElementById['continents'].getContext['2d']; var continentsChart = new Chart[ context, { type: 'pie', data: continentsArea } ]; }];
Outputnya adalah sebagai berikut
6. Bagan pai menggunakan Bagan. js
Catatan. untuk diagram lingkaran, kita juga bisa "menyatukan" data. Menerapkannya pada contoh sebelumnya tentang pertumbuhan populasi sepanjang waktu, akan terdiri dari, pertama, menetapkan persentase populasi ke setiap benua per tahun; . Bagan yang dihasilkan akan menjadi kue dari beberapa lingkaran, dengan data setiap tahun untuk setiap lingkaran
Catatan 2. jika, alih-alih "pai", kami membuat bagan sebagai "donat", kami akan memiliki bagan yang sama, tetapi dengan tampilan "donat"
4. Ringkasan
Tutorial ini telah menunjukkan cara menggambar grafik dengan HTML5, dimulai dari awal dengan elemen kunci untuk ini, elemen kanvas. Elemen ini memungkinkan kita menggambar figur dengan JavaScript, mampu menggambar grafik membentuk dataset. Namun usaha yang dibutuhkan cukup tinggi untuk hasil yang akan kita peroleh. Itu sebabnya kami telah melihat cara menggunakan Bagan. js, pustaka JavaScript untuk menggambar bagan yang indah dengan cara yang sangat mudah. Kita telah melihat bahwa, dengan perpustakaan ini, kita dapat menggambar grafik yang paling umum tanpa pemrograman, selain dari mendeklarasikan objek dataset