Lorsque j'ai besoin de créer des graphiques, mon premier choix est Google Charts ou une autre bibliothèque dédiée. Parfois, cependant, j'ai besoin de fonctionnalités spécifiques que je ne trouve pas là-bas. Dans ces cas, les images SVG s'avèrent très précieuses.
Récemment, j'ai dû construire une page de rapport capable de montrer une carte de l'Italie dans laquelle chaque région avait un ton de couleur différent selon certaines valeurs récupérées à partir d'une base de données. Grâce à SVG, cette tâche a été très facile.
Tout d'abord, j'ai dessiné une carte de l'Italie avec illustrator:
Chaque région est dessinée comme un seul objet, et chacun d'eux a son propre niveau, avec un nom correspondant au code utilisé dans la base de données pour identifier ses données relatives (par exemple: «TOS» pour la Toscane).
Enfin, la carte doit être enregistrée en tant que fichier SVG. Vous devez prêter attention pour définir l'option «propriété CSS» sur «Style Elements» dans Illustrator, comme indiqué ci-dessous:
Ouverture du fichier qui vient d'être créé, vous le verrez contient un ensemble de balises G dont les ID correspondent aux noms des niveaux d'illustrateur.
Chaque élément contenu dans les balises G a une classe ST0 afin que les propriétés CSS de course et de remplissage puissent leur être affectées:
Si vous essayez de modifier ces valeurs, la carte changera immédiatement:
Maintenant, nous pouvons utiliser ce code pour créer notre fichier HTML avec SVG en ligne comme indiqué ci-dessous (le code a été raccourci pour la commodité):
<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="UTF-8"</span>></span>
</span> <span><span><span><title</span>></span>Map Sample<span><span></title</span>></span>
</span> <span><span><span><style</span> type<span>="text/css"</span> media<span>="all"</span>></span><span>
</span></span><span><span> <span><span>.map svg</span> {
</span></span></span><span><span> <span>height: auto;
</span></span></span><span><span> <span>width: 350px;
</span></span></span><span><span> <span>}
</span></span></span><span><span> <span><span>.map g</span> {
</span></span></span><span><span> <span>fill: #ccc;
</span></span></span><span><span> <span>stroke: #333;
</span></span></span><span><span> <span>stroke-width: 1;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span> <span><span><span><div</span> class<span>="map"</span>></span>
</span> <span><span><span><svg</span> version<span>="1.1"</span> id<span>="Livello_1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span> <span>xmlns:xlink</span><span>="https://www.w3.org/1999/xlink"</span> x<span>="0px"</span> y<span>="0px"</span> viewBox<span>="0 -21.6 761 919"</span> <span>style<span>="<span>enable-background:new 0 -21.6 761 919;</span>"</span></span> <span>xml:space</span><span>="preserve"</span>></span>
</span> <span><span><span><g</span> id<span>="sar"</span>></span>
</span> <span><span><span><polygon</span> class<span>="st0"</span> points<span>="193,463 ... "</span>/></span>
</span> <span><span><span></g</span>></span>
</span>
<span><!-- etc ... -->
</span>
<span><span><span></svg</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>Vous pouvez voir que l'attribut de style à l'intérieur de la balise SVG a été effacé et remplacé par un nouveau situé à l'intérieur de la tête de document; Tous les éléments G ont été initialement remplis d'un gris clair.
La classe ST0 n'est plus utilisée (vous pouvez le supprimer de votre code SVG) et il a été remplacé par le sélecteur .map G. Quoi qu'il en soit, ce n'est pas obligatoire, vous pouvez utiliser les sélecteurs CSS que vous préférez.
La deuxième étape consiste à lier notre carte à certaines données récupérées de notre base de données. Dans cet exemple, notre objectif est de peindre la carte selon la population de chaque région.
Les données sont récupérées au format JSON et collées directement à l'intérieur de notre fichier HTML (dans le monde réel, bien sûr, les données seraient récupérées à l'aide d'Ajax ou similaires).
Maintenant, notre page contiendra JSON dans notre fichier javascript qui ressemble à ceci (encore une fois, abrégé):
<span>var regions=[
</span> <span>{
</span> <span>"region_name": "Lombardia",
</span> <span>"region_code": "lom",
</span> <span>"population": 9794525
</span> <span>},
</span> <span>{
</span> <span>"region_name": "Campania",
</span> <span>"region_code": "cam",
</span> <span>"population": 5769750
</span> <span>},
</span>
<span>// etc ...
</span>
<span>];</span>Après cela, une couleur est choisie (dans ce cas, # 0B68AA), et nous l'a attribuée à la région avec la plus grande valeur de population. Les autres régions seront colorées avec des tons de la couleur principale proportionnellement à leur pourcentage de la population.
Ensuite, nous pouvons ajouter du javascript.
Tout d'abord, nous devons déterminer la région avec la valeur de population maximale. Cela peut être fait avec quelques rangées de code.
Une fois qu'un tableau temporaire contenant les valeurs de population a été construit, nous pouvons utiliser la méthode Math.max dessus:
<span>var temp_array= regions.map( function( item ) {
</span> <span>return item.population;
</span><span>});
</span>
<span>var highest_value = Math.max.apply( Math, temp_array );</span>Ensuite, nous pouvons parcourir toutes les éléments de toutes les régions et leur appliquer un pourcentage de transparence en fonction du calcul Population / valeur maximale (avec un peu d'aide de jQuery):
<span>$(function() {
</span> <span>for(i=0; i < regions.length; i++) {
</span> <span>$('#'+ regions[i].region_code).css({'fill': 'rgba(11, 104, 170,'
</span> <span>+ regions[i].population/highest_value
</span> <span>+ ')'});
</span> <span>}
</span><span>});</span>C'est le résultat:
La carte peut être améliorée en ajoutant par une certaine interactivité. Nous voulons qu'il montre la valeur de la population lorsque la souris est positionnée sur les régions.
Tout d'abord, nous ajoutons une règle CSS pour G: Hover et une nouvelle classe Info_Panel pour styliser nos boîtes d'information:
<span><span>.map g:hover</span> {
</span> <span>fill: #fc0 !important;
</span> <span>cursor: help;
</span><span>}
</span>
<span><span>.info_panel</span> {
</span> <span>background-color: <span>rgba(255,255,255, .7)</span>;
</span> <span>padding: .3em;
</span> <span>font-size: .8em;
</span> <span>font-family: Helvetica, Arial, sans-serif;
</span> <span>position: absolute;
</span><span>}
</span>
<span><span>.info_panel::first-line</span> {
</span> <span>font-weight: bold;
</span><span>}</span>Le! Modificateur important dans .map g: Hover est nécessaire pour améliorer la spécificité de la règle de remplissage, sinon il serait contourné par injecté en ligne CSS.
Ensuite, nous devons modifier notre précédent pour le cycle, en ajoutant .data () pour stocker des informations qui seront affichées sur le plan de survol:
<span>for (i = 0; i < regions.length; i++) {
</span> <span>$('#'+ regions[i].region_code)
</span> <span>.css({'fill': 'rgba(11, 104, 170,'
</span> <span>+ regions[i].population/highest_value
</span> <span>+')'}).data('region', regions[i]);
</span><span>}</span>Enfin, nous pouvons compléter notre script en ajoutant des effets de souris:
<span>$('.map g').mouseover(function (e) {
</span> <span>var region_data=$(this).data('region');
</span> <span>$('<div >'
</span> <span>+ region_data.region_name
</span> <span>+ '<br>'
</span> <span>+ 'Population: '
</span> <span>+ region_data.population.toLocaleString("en-UK")
</span> <span>+ '</div>').appendTo('body');
</span><span>}).mouseleave(function () {
</span> <span>$('.info_panel').remove();
</span><span>}).mousemove(function(e) {
</span> <span>var mouseX = e.pageX, // X coordinates of mouse
</span> mouseY <span>= e.pageY; // Y coordinates of mouse
</span>
<span>$('.info_panel').css({
</span> <span>top: mouseY-50,
</span> <span>left: mouseX - ($('.info_panel').width() / 2)
</span> <span>});
</span><span>});</span>comment cela fonctionne:
Voici le résultat final sur Codepen:
Voir le stylo kdhfh par SitePoint (@SitePoint) sur Codepen.
Rendre votre carte SVG réactive implique de définir la largeur et la hauteur du SVG à 100% et de s'assurer que l'attribut Viewbox est correctement défini. L'attribut ViewBox vous permet de spécifier qu'une certaine zone de la carte est visible et que le rapport d'aspect est conservé lors de la mise à l'échelle vers le haut ou vers le bas. Vous pouvez également utiliser des requêtes multimédias pour ajuster la taille et la position de la carte en fonction de la taille de l'écran.
Oui, les cartes SVG peuvent être utilisé avec d'autres bibliothèques JavaScript telles que D3.js, Raphaël et Snap.Svg. Ces bibliothèques offrent des fonctionnalités supplémentaires pour créer et manipuler les graphiques SVG. Cependant, l'implémentation peut différer de jQuery, vous devrez donc vous référer à la documentation de la bibliothèque respective.
Vous pouvez ajouter de l'interactivité à votre Carte SVG utilisant JavaScript ou jQuery. Cela peut inclure des fonctionnalités telles que les régions à petit, le zoom, le panoramique et les régions cliquables. Par exemple, vous pouvez utiliser les événements 'Mouseover' et 'Mouseout' pour afficher les infractions, et l'événement 'cliquer' pour rendre les régions cliquables.
Les cartes SVG peuvent être utilisées pour la visualisation des données par des régions de coloration basées sur les valeurs de données, une technique connue sous le nom de mappage de choropleth. Vous pouvez utiliser JavaScript pour lier des données à vos éléments SVG et appliquer une échelle de couleurs. Des bibliothèques comme D3.JS fournissent des fonctionnalités intégrées pour créer des cartes Choropletth.
La création d'une carte SVG personnalisée implique de dessiner la carte à l'aide d'un logiciel graphique vectoriel comme Adobe Illustrator ou Inkscape, puis l'exportant en tant que fichier SVG. Vous pouvez ensuite utiliser JavaScript ou JQuery pour manipuler les éléments SVG et ajouter l'interactivité. Gardez à l'esprit que la création d'une carte personnalisée nécessite une bonne compréhension des données SVG et géographiques.
Si vos régions de carte SVG ne s'affichent pas correctement, cela pourrait être dû à plusieurs raisons. Le fichier SVG peut ne pas être formaté correctement, ou il pourrait y avoir une erreur dans votre code JavaScript. Vérifiez la console pour tous les messages d'erreur et assurez-vous que votre fichier SVG est valide.
SVG est pris en charge dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari et bord. Cependant, les versions plus anciennes d'Internet Explorer (IE8 et ci-dessous) ne prennent pas en charge SVG. Si vous devez prendre en charge ces navigateurs, vous pouvez utiliser un polyfill comme Raphaël ou convertir votre SVG en un autre format comme VML.
Optimisation de votre SVG La carte des performances peut impliquer plusieurs techniques. Ceux-ci incluent la minimisation de la taille de votre fichier SVG, l'utilisation de CSS pour le style au lieu d'attributs en ligne et l'utilisation efficace de JavaScript. Vous pouvez également utiliser des outils comme SVGO pour optimiser vos fichiers SVG.
Vous pouvez animer votre carte SVG à l'aide d'animations CSS ou JavaScript. Cela peut inclure l'animation des couleurs, des formes et des positions de vos éléments SVG. Gardez à l'esprit que les animations complexes peuvent avoir un impact sur les performances, alors utilisez-les avec parcimonie.
Oui, les cartes SVG peuvent être utilisées dans des applications mobiles. SVG est pris en charge dans les vues Web Android et iOS, et peut être utilisé dans des applications mobiles hybrides à l'aide de frameworks comme Cordova ou React Native. Cependant, gardez à l'esprit que les performances peuvent être un problème sur les appareils plus anciens ou les cartes complexes.
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!
Qu'est-ce que la recherche Spotlight ?
Quelles sont les caractéristiques du LAN
emplacement.reload
Combien de temps faut-il pour que la recharge Douyin arrive ?
Requête blockchain du navigateur Ethereum
Puis-je récupérer une courte vidéo Douyin supprimée ?
Comment définir le texte supérieur sur WeChat
A quoi sert le commutateur KVM ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
