Auteur : CONSTRUCTEUR.COM
JSP fournit de nombreux outils simples et pratiques, notamment la lecture des données de la base de données, l'envoi de données et la possibilité d'afficher les résultats dans un diagramme circulaire. Examinons maintenant cette méthode simple mais pratique.
ce dont tu as besoin
Afin d'exécuter correctement les exemples liés à cet article, vous devez avoir besoin de JDK 1.2 ou supérieur, d'un système de gestion de base de données relationnelle et d'un serveur réseau JSP. J'ai débogué ces exemples dans Tomcat et j'ai également utilisé les classes com.sun.image.codec.jpeg publiées par le SDK Sun Java 2.
Conception de la base de données Supposons que vous travailliez pour une entreprise qui vend des fruits frais. Les fruits vendus par l'entreprise comprennent : des pommes, des oranges et des raisins. Maintenant, votre patron souhaite utiliser un graphique en forme de secteur pour afficher le volume total des ventes de chaque type de fruit. Le graphique en forme de secteur peut rendre les ventes de chaque produit claires en un coup d'œil, et le patron peut rapidement comprendre les transactions de produits de l'entreprise. .
Le tableau A utilise deux listes de bases de données de cet article. La première liste (Produits) contient les noms de tous les produits vendus ; la deuxième liste (Ventes) contient le volume des ventes correspondant à chaque produit.
La liste Produits contient deux champs : productID et productname. La liste Ventes contient saleID, productID et le montant total. Le productID dans la liste des ventes fournit l'association entre les deux listes. Les totaux de la liste des ventes contiennent le montant en espèces de chaque vente sous forme de nombre à virgule flottante.
La méthode getProducts() du tableau B connecte deux bases de données et enregistre tous les noms de produits dans un tableau. J'ai défini les règles de base de données suivantes :
ProductID est le plus unique de la liste de produits et est. aussi le plus critique ;
ProductID a la valeur 0 pour le premier enregistrement ;
Tous les enregistrements consécutifs suivants sont cumulatifs, donc l'ID produit du deuxième enregistrement est 1, l'ID produit du troisième enregistrement est 2, et ainsi de suite.
Ces règles de base de données permettent de stocker les données dans le tableau de produits, comme indiqué ci-dessous :
arr[rs.getInt("productID")] = rs.getString("productname");
Certains systèmes de gestion de base de données autorisent le stockage automatique des données par défaut. Accumulation ou tri automatique. Lorsque vous concevez une base de données, assurez-vous d'abord de connaître les règles suivies par votre système de gestion de base de données, telles que l'accumulation automatique, le tri automatique, etc.
Obtenez le volume total des ventes
Dans la plupart des cas, la liste des ventes comportera de nombreux enregistrements. Un accès rapide et efficace à la base de données est donc très important. Il ne nous reste plus qu'à accéder aux ventes totales de chaque produit de la base de données.
La méthode getSales() du tableau C se connecte à la base de données et renvoie un tableau contenant les ventes totales de chaque produit. Lorsque getSales() parcourt tous les enregistrements, il stocke uniquement le nouveau volume de ventes de chaque produit :
int product = rs.getInt("productID");
arr[produit] += rs.getFloat("montant");
Chaque produit du diagramme circulaire doit être affiché dans une couleur différente. Afin d'atteindre cet objectif, nous créons un objet pieColor (comme indiqué dans le tableau D). Cet objet contient un tableau de couleurs associées :
Color pieColorArray[] = {new Color(210,60,60), new Color(60,210, 60 )...}
La classe pieColor définit une méthode setNewColor(), qui peut incrémenter curPieColor et l'index en même temps, elle peut vérifier que l'index ne dépasse pas la plage limite, c'est-à-dire que la méthode utilisée est : si curPieColor est trop grand, une valeur de 0 est attribuée.
Plus efficacement, setNewColor() parcourt chaque couleur et exécute le code suivant sur la première couleur :
curPieColor++;
si (curPieColor >= pieColorArray.length)
{curPieColor = 0 ;}
Conseils de rendu et classes d'anticrénelage
La classe java.awt.RenderingHints définit de nombreuses méthodes pour afficher des graphiques bidimensionnels, notamment les méthodes alpha_interpolation, tramage et anticrénelage. Les RenderingHints aident à déterminer comment les graphiques sont affichés et comment les graphiques sont traités au mieux.
Afin de l'afficher de manière fluide, vous pouvez utiliser la méthode d'anticrénelage pour traiter les graphiques à secteurs. L'anticrénelage est une méthode de lissage graphique. L'algorithme sélectionne la valeur de couleur d'un pixel spécial et remplace le pixel d'intersection, lissant ainsi l'intersection des lignes.
La figure A illustre l'effet de la méthode d'anticrénelage. On peut voir que l'intersection des lignes du graphique circulaire utilisant la méthode d'anticrénelage devient très fluide.
La figure A
En même temps, vous pouvez également créer un objet RenderingHints et le transmettre à la méthode setRenderingHints() de Graphics2D, comme indiqué ci-dessous :
RenderingHints renderHints = new RenderingHints(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHints(renderHints);
Créer des bordures ajustables
La forme de tarte de la figure A comporte une bordure. Comment puis-je modifier la taille de la bordure ? Vous pouvez d'abord définir int border = 10, puis calculer la taille de la zone à l'intérieur de la bordure à obtenir :
Ellipse2D.Double elb = new Ellipse2D.Double(x_pie - border/2, y_pie - border/2, pieWidth + border, pieHeight + border);
x_pie La valeur de y_pie représente le coin supérieur gauche du carré entourant la forme du secteur. Nous obtenons le centre de la forme du gâteau en prenant la moitié de la zone de bordure (bordure/2).
Théorie des arcs (Arc) La méthode fillArc() héritée de la classe java.awt.Graphics fournit une méthode simple pour dessiner diverses parties (ou arcs) de graphiques en forme de secteur :
g2d.fillArc(x_position, y_position, width, height, startAngle , scanningAngle);
les entiers x_position et y_position représentent les coordonnées x, y du coin supérieur gauche de l'arc à remplir, et les entiers width et height représentent sa taille spécifique. Si les valeurs de largeur et de hauteur sont égales, le diagramme circulaire sera un cercle. Si la largeur et la hauteur ne sont pas égales, le diagramme circulaire sera une ellipse.
La méthode fillArc() détermine la taille de l'arc en fonction de la valeur entière de scanningAngle. Si la valeur de scanningAngle est positive, l'arc est dessiné dans le sens inverse des aiguilles d'une montre, sinon il est dessiné dans le sens des aiguilles d'une montre.
La première étape pour dessiner un arc consiste à utiliser la méthode getPieColor() de l'objet pieColor pour obtenir la couleur de l'arc en forme de secteur le plus proche et l'attribuer à l'arc actuel :
g2d.setColor
(pc.getPieColor());
, via le tableau sales[] en boucle continue et accumulez-le pour obtenir le volume total des ventes :
salesTotal += sales[i];
En utilisant le volume total des ventes, vous pouvez calculer le pourcentage des ventes de chaque produit dans le volume total des ventes :
float perc = (sales [i]/salesTotal);
Nous calculons l'angle de balayage pour attribuer des degrés à chaque partie de l'arc :
int scanningAngle = (int)(perc * 360);
Une fois que chaque partie de l'arc est dessinée, startAngle peut être incrémenté en fonction. à l'angle de balayage actuel. Cela garantit que la partie d'arc actuelle commence à partir de l'arc précédent, créant ainsi une forme de tarte complète.
Afficher les icônes Les icônes constituent le moyen le plus simple d'afficher les différentes parties d'un graphique circulaire. La taille d'une icône doit correspondre au montant occupé dans le diagramme circulaire.
La figure B montre un graphique circulaire complet et les icônes correspondant à chaque pièce, y compris le nom du produit, le volume total des ventes et la part de chaque pièce.
Image B
Résumé
Cet article décrit comment utiliser JSP pour dessiner des méthodes et des algorithmes de graphiques à secteurs. Ces méthodes et algorithmes sont simples et pratiques, et les développeurs peuvent tirer pleinement parti de ces méthodes.