Cara menggunakan jQuery untuk mencapai beberapa kesan carta mudah

jQuery ialah perpustakaan JavaScript yang sangat popular yang biasa digunakan oleh kebanyakan pembangun web untuk mengendalikan operasi DOM dan pengendalian acara.

Selain itu, ia juga mempunyai fungsi yang sangat berkuasa - fungsi carta.

Dalam artikel ini, kita akan melihat cara menggunakan jQuery untuk mencapai beberapa kesan carta mudah.

1. Cipta kod HTML asas

Sebelum kita mula menulis kod jQuery, kita perlu mencipta beberapa kod HTML asas terlebih dahulu.

Pertama, kita perlu mencipta halaman HTML yang mengandungi elemen div untuk memaparkan carta.

<title>jQuery图表功能实现</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

;<🎜

<div id="chart"></div></body></p>
<p></html><br></p>Di sini, kami memperkenalkan perpustakaan jQuery dan Chart.js. <p></p>Seterusnya, kami akan menulis beberapa kod jQuery untuk mencipta carta. <p></p>2. Buat carta lajur <p></p>Kami akan buat carta lajur dahulu. Kami akan menjana beberapa data rawak dan memaparkannya dalam carta lajur. <p></p>Untuk mencipta carta lajur, kita perlu menentukan objek yang mengandungi label dan data yang akan dipaparkan. <p></p>var data = {<p></p>
<pre class="brush:php;toolbar:false">labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
    {
        label: 'My First Dataset',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1,
        hoverBackgroundColor: 'rgba(255, 99, 132, 0.4)',
        hoverBorderColor: 'rgba(255, 99, 132, 1)',
        data: [random(), random(), random(), random(), random(), random(), random()]
    }
]

};

Di sini kami menggunakan fungsi rawak() untuk menjana nilai rawak bagi setiap titik data.

Seterusnya, kami akan menggunakan pemilih jQuery untuk memilih elemen div yang mengandungi carta dan mencipta elemen kanvas di dalamnya.

var ctx = $('#cart');

ctx.append('');

Akhir sekali , kami akan menggunakan pustaka Chart.js untuk membuat carta lajur.

Carta baharu($('#barChart'), {

type: 'bar',
data: data,
options: {
    responsive: true,
    legend: {
        position: 'top',
    },
    title: {
        display: true,
        text: 'Bar Chart'
    }
}

});

Di sini kami menggunakan atribut jenis untuk menentukan jenis carta— — Carta lajur.

3. Buat carta garisan

Seterusnya, kami akan buat carta garisan. Sama seperti carta lajur, kami akan menjana beberapa data rawak dan memaparkannya dalam carta garis.

var data = {

labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
    {
        label: 'My Second Dataset',
        fill: false,
        lineTension: 0.1,
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: 'rgba(75,192,192,1)',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
        pointHoverBorderColor: 'rgba(220,220,220,1)',
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [random(), random(), random(), random(), random(), random(), random()]
    }
]

};

Di sini kami menggunakan satu lagi fungsi rawak() untuk menjana nilai rawak bagi setiap titik data.

Seterusnya, kami akan menggunakan kaedah yang sama untuk mencipta elemen kanvas dan memilih elemen div yang mengandungi carta.

var ctx = $('#cart');

ctx.append('');

Akhir sekali , kami akan menggunakan pustaka Chart.js untuk membuat carta garis.

Carta baharu($('#lineChart'), {

type: 'line',
data: data,
options: {
    responsive: true,
    legend: {
        position: 'top',
    },
    title: {
        display: true,
        text: 'Line Chart'
    }
}

});

Di sini kami menggunakan atribut jenis untuk menentukan jenis carta— — Carta garisan.

Kesimpulan

Dalam artikel ini, kami telah berjaya mencipta carta lajur dan baris menggunakan pustaka jQuery dan Chart.js dan memaparkannya pada halaman HTML.

Contoh-contoh ini hanyalah sebahagian besar daripada kebolehan carta jQuery. Menggunakan jQuery dan pustaka Chart.js, anda boleh mencipta pelbagai jenis carta yang berbeza, seperti carta pai, carta radar dan banyak lagi.

Mari kita mendalaminya dalam artikel seterusnya!

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk mencapai beberapa kesan carta mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!