Comment utiliser jQuery pour obtenir des effets graphiques simples

jQuery est une bibliothèque JavaScript très populaire que la plupart des développeurs Web sont habitués à utiliser pour gérer les opérations DOM et la gestion des événements.

De plus, il dispose également d'une fonction de diagramme de fonctions très puissante.

Dans cet article, nous verrons comment utiliser jQuery pour obtenir des effets graphiques simples.

1. Créer du code HTML de base

Avant de commencer à écrire du code jQuery, nous devons d'abord créer du code HTML de base.

Tout d'abord, nous devons créer une page HTML contenant un élément div pour afficher le graphique.

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

Her e, nous introduit les bibliothèques jQuery et Chart.js.

Ensuite, nous écrirons du code jQuery pour créer le graphique.

2. Créer un histogramme

Nous allons d'abord créer un histogramme. Nous allons générer des données aléatoires et les afficher dans un histogramme.

Pour créer un histogramme, nous devons définir un objet qui contient les étiquettes et les données à afficher.

var data = {

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()]
    }
]

};

Ici, nous utilisons une fonction random() pour générer une valeur aléatoire pour chaque point de données.

Ensuite, nous utiliserons les sélecteurs jQuery pour sélectionner l'élément div contenant le graphique et créer un élément canevas à l'intérieur.

var ctx = $('#chart');
ctx.append('');

Enfin, nous utiliserons la bibliothèque Chart.js pour créer un diagramme à colonnes.

new Chart($('#barChart'), {

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

});

Ici, nous utilisons un attribut de type pour spécifier le type de graphique - histogramme.

3. Créer un graphique linéaire

Ensuite, nous allons créer un graphique linéaire. Semblable au graphique à colonnes, nous générerons des données aléatoires et les afficherons dans un graphique linéaire.

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()]
    }
]

};

Ici, nous utilisons une autre fonction random() pour générer des valeurs aléatoires pour chaque point de données.

Ensuite, nous utiliserons la même méthode pour créer l'élément canevas et sélectionner l'élément div qui contient le graphique.

var ctx = $('#chart');
ctx.append('');

Enfin, nous créerons la polyligne à l'aide du graphique. image de la bibliothèque js.

new Chart($('#lineChart'), {

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

});

Ici, nous utilisons un attribut de type pour spécifier le type de graphique - graphique linéaire.

Conclusion

Dans cet article, nous avons créé avec succès des graphiques à colonnes et à courbes à l'aide de la bibliothèque jQuery et Chart.js et les avons affichés sur une page HTML.

Ces exemples ne sont que la pointe de l'iceberg des capacités de cartographie de jQuery. À l'aide de jQuery et de la bibliothèque Chart.js, vous pouvez créer différents types de graphiques, tels que des diagrammes circulaires, des graphiques radar, etc.

Découvreons-en plus dans le prochain article !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!