Graphiques vectoriels faciles avec la bibliothèque JavaScript Raphaël

Raphaël est une petite bibliothèque JavaScript écrite par Dmitry Baranovskiy d'Atlassian, qui vous permet de créer et de manipuler des graphiques vectoriels dans vos pages Web. Il est incroyablement simple à utiliser et est compatible avec le croisement; Soutenir Internet Explorer 6.0, Safari 3.0, Firefox 3.0 et Opera 9.5. Raphaël en interne utilise VML dans IE et SVG dans les autres navigateurs.

Maintenant, les démos impliquant des cercles et des carrés sont bien, mais je voulais créer un exemple qui a démontré une utilisation légitime et pratique des graphiques vectoriels. Alors, qu'en est-il de la mesure des statistiques en temps réel? Voici une capture d'écran de mon graphique actuel de ligne d'utilisation du pignon qui trace les niveaux d'utilisation de «pignon» en temps réel. Mieux encore, c'était un instantané à faire.

Le HTML est simple; Nous avons juste besoin d'une rubrique et d'un conteneur pour tenir notre toile - un élément div:

<h1>Current Sprocket Usage: <span ></span></h1>
<div ></div>

Pour commencer, nous devons générer une nouvelle toile graphique. J'aime toujours placer tout mon code dans une définition d'objet afin de créer un espace de noms distinct, nous allons donc commencer par le code suivant:

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

À l'aide de l'événement Window.onload, nous appelons notre méthode spgraph.init. Dans cette méthode, nous créons notre toile en utilisant Raphael ("Graph", 400, 200). Le premier argument est l'ID de notre élément de conteneur, les deux autres représentent la largeur et la hauteur. Nous stockons l'objet en toile retourné dans notre propriété spgraph.graph. Avec la ligne suivante, nous créons un rectangle et définissons certains attributs:

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

La méthode RECT nous permet de dessiner un rectangle spécifiant les coordonnées x, les coordonnées Y, la largeur, la hauteur et éventuellement un rayon d'angle. Notez que nous avons également enchaîné un appel à la méthode ATR pour définir la couleur de remplissage. Tous les objets graphiques Raphaël prennent en charge la méthode ASTR et il existe une plage d'attributs que vous pouvez définir. Raphaël prend en charge le chainage de toutes ses méthodes, dont nous profiterons bientôt. Jusqu'à présent, notre effort a abouti à ce joli rectangle noir avec des coins arrondis.

Permet maintenant d'ajouter des rayures! Pour ce faire, nous ajoutons la boucle suivante à la méthode spgraph.init:

for(var x = 10; x < 110; x += 10) {
  var c = (x > 10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

La boucle exécute 10 fois en dessinant une ligne à chaque fois; Une ligne rouge pour la première et une ligne grise pour les autres. La méthode du chemin Raphaël initialise le mode de dessin de chemin, renvoyant un objet path. Il ne dessine rien lui-même; Vous devez utiliser les méthodes d'objet Path, qui sont chaînables. La méthode MoveTo déplace le curseur de dessin vers les coordonnées x et y spécifiées et la méthode LineTo dessine une ligne du point de curseur au point spécifié. Le résultat est l'arrière-plan Stripey ci-dessous:

Alors maintenant, nous devons dessiner la ligne de graphique réelle. L'axe vertical (représenté par les rayures) est le niveau d'utilisation en pourcentage. L'axe horizontal représentera le temps par incréments de 10 pixels. Dans le monde réel, chaque mise à jour du graphique serait obtenue via un appel ajax, disons toutes les 5 secondes, mais ici je crée simplement des valeurs aléatoires et met à jour le graphique à chaque seconde. Encore une fois, nous utilisons la méthode de chemin pour dessiner une ligne de large de 5 pixels.

nous initialisons le chemin et stockons la référence dans la propriété spgraph.path comme SO:

<h1>Current Sprocket Usage: <span ></span></h1>
<div ></div>

Chaque mise à jour, nous étendons la ligne à l'aide de la méthode Lineto comme SO:

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

for(var x = 10; x < 110; x += 10) {
  var c = (x > 10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

N'oubliez pas de le voir fonctionner dans la démo. OK, alors peut-être qu'un graphique d'utilisation du pignon n'est pas exactement l'exemple légitime et pratique que j'ai promis, mais au moins vous avez un coup d'œil à ce que vous pouvez réaliser avec Raphaël avec seulement un peu d'effort. La documentation sur le site n'est pas complète, mais il n'est pas trop difficile de s'entraîner de toute façon. Pourquoi ne pas aller vous-même? Des graphiques vectoriels rapides, simples, compatibles entre les navigateurs, sur le Web n'ont jamais été plus faciles.

Des questions fréquemment posées sur les graphiques vectoriels faciles avec la bibliothèque JavaScript Raphael

Quelle est la bibliothèque JavaScript Raphael?

La bibliothèque JavaScript Raphael est un outil puissant qui permet aux développeurs de travailler avec des graphiques vectoriels sur le Web. Il simplifie le processus de création, de manipulation et d'animation des graphiques vectoriels, ce qui en fait un excellent choix pour les développeurs qui souhaitent ajouter des éléments visuellement attrayants à leurs sites Web ou applications Web. La bibliothèque est compatible avec les navigateurs et utilise la recommandation SVG W3C et VML comme base pour créer des graphiques, ce qui signifie qu'il peut fonctionner dans pratiquement n'importe quel navigateur.

Comment commencer avec la bibliothèque Javascript Raphael? Vous pouvez le faire en téléchargeant la bibliothèque à partir du site officiel et en le liant dans votre fichier HTML. Une fois la bibliothèque incluse, vous pouvez commencer à créer des graphiques vectoriels en appelant la fonction Raphaël et en spécifiant la largeur et la hauteur de l'objet papier où vos graphiques seront dessinés.

Puis-je animer les graphiques vectoriels avec la bibliothèque Raphael Javascript?

Oui, l'une des caractéristiques clés de la bibliothèque Javascript Raphael? La bibliothèque fournit plusieurs méthodes d'animation, y compris la méthode Animate, qui vous permet d'animer la transformation d'un objet sur une durée spécifiée. Vous pouvez également contrôler l'assouplissement de l'animation et spécifier une fonction de rappel à exécuter lorsque l'animation est terminée.

Comment créer des formes avec la bibliothèque JavaScript Raphael?

La bibliothèque JavaScript Raphael fournit plusieurs méthodes pour créer des formes. Par exemple, vous pouvez utiliser la méthode Rect pour créer un rectangle, la méthode Circle pour créer un cercle et la méthode Ellipse pour créer une ellipse. Chaque méthode nécessite des paramètres spécifiques, tels que les coordonnées du coin supérieur gauche et la largeur et la hauteur de la méthode RECT, ou les coordonnées centrales et le rayon pour la méthode du cercle.

Comment appliquer des styles aux formes dans la bibliothèque Raphael Javascript?

Vous pouvez appliquer des styles à des formes dans la bibliothèque Raphael Javascript Raphael Javascript. Cette méthode vous permet de définir divers attributs d'une forme, tels que sa couleur de remplissage, sa couleur de trait, sa largeur de course et l'opacité. Vous pouvez également utiliser la méthode ATR pour appliquer des transformations à une forme, telles que la mise à l'échelle, la rotation et la traduction.

Puis-je interagir avec les formes dans la bibliothèque JavaScript Raphael?

Oui, la bibliothèque JavaScript Raphael fournit plusieurs méthodes pour interagir avec les formes. Par exemple, vous pouvez utiliser la méthode de clic pour connecter un gestionnaire d'événements de clics à une forme, ou la méthode de survol pour fixer les gestionnaires d'événements Mouseover et Mouseout. Ces méthodes vous permettent de créer des graphiques interactifs qui répondent aux actions des utilisateurs.

Comment regrouper les formes dans la bibliothèque JavaScript Raphael?

Vous pouvez regrouper les formes dans la bibliothèque JavaScript Raphael à l'aide de la méthode définie. Cette méthode crée un ensemble de formes qui peuvent être manipulées en une seule unité. Vous pouvez ajouter des formes à un ensemble à l'aide de la méthode PUSH, et appliquer des transformations ou des animations à toutes les formes de l'ensemble à la fois.

Puis-je utiliser la bibliothèque JavaScript Raphael pour créer des graphiques complexes?

Oui, la bibliothèque JavaScript Raphael est capable de créer des graphiques complexes. En plus des formes de base, la bibliothèque fournit des méthodes de création de chemins, qui peuvent être utilisées pour créer des formes et des conceptions complexes. Vous pouvez également combiner plusieurs formes et chemins pour créer des graphiques complexes.

Comment exporter des graphiques créés avec la bibliothèque JavaScript Raphael?

Les graphiques créés avec la bibliothèque JavaScript Raphael sont rendus dans le navigateur et peuvent être exportés sous forme de SVG ou de VML, en dépendant du Browser. Vous pouvez accéder au code source SVG ou VML d'un graphique en appelant la méthode ToString sur l'objet papier. Cette méthode renvoie une chaîne de code SVG ou VML qui représente l'état actuel de l'article.

Où puis-je trouver plus de ressources sur la bibliothèque JavaScript Raphael?

Pour plus de ressources sur la bibliothèque Javascript Raphael, vous pouvez visiter le site Web officiel, qui fournit une documentation complète du bibliothèque. Vous pouvez également consulter divers tutoriels en ligne et articles de blog qui fournissent des guides étape par étape sur la façon d'utiliser la bibliothèque. De plus, vous pouvez trouver de nombreux exemples et démos sur les plates-formes de partage de code comme GitHub et Codepen.

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!