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

    
    
    
    



    

        
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

    
    
    
    



    

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

Bagaimana cara membuat diagram batang sederhana di HTML5?

Bagaimana cara menggambar grafik dalam HTML?

Apa itu bagan HTML5?

Bisakah Anda membuat grafik dalam HTML?