Cara menggunakan diagram batang bootstrap

Bar Chart adalah grafik yang mewakili data kelompok dengan chart vertikal atau horizontal. Pada dasarnya, Bar Chart digunakan untuk menunjukkan perbandingan yang mudah dimengerti. Bar Chart membantu membuat aplikasi web lebih user-friendly. Untuk menunjukkan perbandingan data antar kategori dalam persentase, Bar Chart adalah pilihan yang tepat.

Dalam tutorial ini, saya akan menunjukkan cara membuat bar chart responsive menggunakan CSS dan jQuery. Kamu tidak perlu menggunakan plugin chart jQuery untuk menambahkan Bar Chart di website. Kamu dapat dengan mudah membuat Bar Chart kamu sendiri dengan CSS dan jQuery murni.

HTML

HTML berikut menunjukkan diagram batang dengan nilai persentase. Selain itu, label masing-masing akan muncul di bawah grafik.

<div class="container">
    <h2>Tingkat Keahlian</h2>
    <div class="bar-chart">
        <!-- legend label -->
        <div class="legend">
            <div class="label">
                <h4>Newbie</h4>
            </div>
            <div class="label">
                <h4>Menengah</h4>
            </div>
            <div class="label">
                <h4>Mahir</h4>
            </div>
            <div class="label last">
                <h4>Suhu</h4>
            </div>
        </div>

        <!-- bar -->
        <div class="chart clearfix">
            <div class="item">
                <div class="bar">
                    <span class="persen">85%</span>

                    <div class="progress" data-persen="85">
                        <span class="title">PENGETAHUAN PHP</span>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="bar">
                    <span class="persen">68%</span>

                    <div class="progress" data-persen="68">
                        <span class="title">PENGETAHUAN MySQL</span>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="bar">
                    <span class="persen">59%</span>

                    <div class="progress" data-persen="59">
                        <span class="title">PENGETAHUAN JavaScript</span>
                    </div>
                </div>
            </div>

            <div class="item">
                <div class="bar">
                    <span class="persen">92%</span>

                    <div class="progress" data-persen="91">
                        <span class="title">PENGETAHUAN HTML&amp;CSS</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

Pertama, library jQuery perlu disertakan.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Fungsi barChart() digunakan untuk menentukan lebar baris berdasarkan persentase yang ditentukan. Pada fungsi barChart() document ready dan window resizedimuat.

Download now

Jump to Page

Search inside document

You're Reading a Free Preview
Pages 5 to 9 are not shown in this preview.

Reward Your Curiosity

Everything you want to read.

Anytime. Anywhere. Any device.

No Commitment. Cancel anytime.

Share this document

Share or Embed Document

Sharing Options

• Share with Email, opens mail client