nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Utilisation des bibliothèques de graphiques tierces avec l'API JavaScript 4.x

MunachisoOgbuchiekwe

<\/HEAD>

Introduction<\/H1>Ceci est un article de blog rapide pour montrer à quel point il est facile d'intégrer de beaux graphiques dans votre application JavaScript en utilisant l'API 4.x. Si vous êtes nouveau dans l'ArcGIS API for JavaScript, nous fournissons un moyen simple de commencer à créer des applications de cartographie web. Rendez-vous sur le site <\/SPAN>ArcGIS API for JavaScript<\/A> <\/SPAN>pour commencer. Pour cet exemple, nous utiliserons une bibliothèque tierce appelée <\/SPAN>Chart.js<\/A>. Chart.js est une bibliothèque de graphiques JavaScript simple mais flexible qui facilite la création de graphiques simples pour vos données.<\/P>

Charger la bibliothèque Chart.js dans votre application JavaScript<\/H2>Pour utiliser Chart.js dans notre application, nous devons la charger en tant que module. Cela est dû au fait que Dojo utilise le format <\/SPAN>Asynchronous Module Definition<\/A> <\/SPAN>(AMD) pour charger les modules au lieu de charger un fichier avec une balise <\/SPAN>script<\/CODE> <\/SPAN>. Pour cela, nous pouvons utiliser <\/SPAN><CODE>dojoConfig<\/CODE> <\/SPAN>pour charger notre package JS personnalisé en tant que module.<\/P><DIV class="" style="color: #24292e; background-color: #ffffff; margin-bottom: 16px;"><PRE class="lia-code-sample line-numbers language-none"><CODE><<\/SPAN>script<\/SPAN>><\/SPAN><\/SPAN>         const<\/SPAN> options =<\/SPAN> {<\/SPAN>             \/\/- indiquer à Dojo où charger les autres packages<\/SPAN>             dojoConfig:<\/SPAN> {<\/SPAN>                 async<\/SPAN>:<\/SPAN> true<\/SPAN>,<\/SPAN>             packages:<\/SPAN> [<\/SPAN>                 {<\/SPAN>                  & nbsp location:<\/SPAN> '<\/span><A class="jive-link-external-small" href="https:\/\/cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js" target="_blank">https:\/\/cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js</A>',   name: 'Chart'  }  ]  }  }; Interroger des données à partir d'une Feature Layer

Créer un graphique avec Chart.js

Nous allons maintenant inclure le module Chart que nous avons instancié il y a quelque temps. Dans le code précédent, nous avons défini le paramètre content a une fonction appelée setContentInfo puis passé les données. Dans l'extrait de code suivant, nous allons créer cette fonction et l'utiliser pour initialiser nos graphiques dans la fenêtre contextuelle. Pour commencer, nous allons créer un nouvel élément canvas puis lui donner l'id myChart.

 avec nos propres données. Dans ce cas particulier, nous utilisons un doughnut graph , qui aurait une structure de données différente d'un line graph. Pour plus d'informations sur les différents types de graphiques que vous pouvez utiliser, veuillez consulter le lien suivant documentation <\/SPAN><\/A>sur le site Chart.js. Pour un graphique en anneau, l'objet ressemblerait au snippet de code suivant ci-dessous.<\/P><SPAN class="keyword token">var<\/SPAN> data <SPAN class="operator token">=<\/SPAN> <SPAN class="punctuation token">{<\/SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; datasets<SPAN class="punctuation token">:<\/SPAN><SPAN class="punctuation token">[<\/SPAN><SPAN class="punctuation token">{<\/SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; data<SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">[<\/SPAN>results<SPAN class="punctuation token">.<\/SPAN>ASIAN<SPAN class="punctuation token">,<\/SPAN> results<SPAN class="punctuation token">.<\/SPAN>BLACK<SPAN class="punctuation token">,<\/SPAN> results<SPAN class="punctuation token">.<\/SPAN>HAWN_PI<SPAN class="punctuation token">,<\/SPAN> results<SPAN class="punctuation token">.<\/SPAN>HISPANIC<SPAN class="punctuation token">,<\/SPAN> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; results<SPAN class="punctuation token">.<\/SPAN>OTHER<SPAN class="punctuation token">,<\/SPAN> results<SPAN class="punctuation token">.<\/SPAN>WHITE<SPAN class="punctuation token">]<\/SPAN><SPAN class="punctuation token">,<\/SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; backgroundColor<SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">[<\/SPAN><SPAN class="string token">"#4286f4"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"#41f4be"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"#8b41f4"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"#e241f4"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"#f44185"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"#f4cd41"<\/Span><span class='punctuation token'>]<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class='punctuation token'>}<span><span class='punctuation token'>]<span><span class='punctuation token'>,<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; labels<span class='punctuation token'>:<span> <span class='punctuation token'>[<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class='string token'>'Asian'<span><span class='punctuation token'>,<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class='string token'>'Black'<span><span class='punctuation token'>,<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class='string token'>'Hawaiian'<span><span class='punctuation token'>,<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class='string token'>'Hispanic'<span><span class='punctuation token'>,<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class='string token'>'Other'<span><span class='punctuation token'>,<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class='string token'>'White'<span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class='punctuation token'>]<span>
&nbsp;&nbsp; <span class='punctuation token'>}<span><span class='punctuation token'>;<span>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPan clasS='line-numbers-rows'><SPan><EMOJI_1></SPan><SPan><EMOJI_2></SPan><SPan><EMOJI_3></SPan><SPan><EMOJI_4></SPan><SPan><EMOJI_5></SPan><SPan><EMOJI_6></SPan><SPan><EMOJI_7></SPan><SPan><EMOJI_8></SPan><SPan><EMOJI_9></SPan><SPan><EMOJI_10></SPan><SPan><EMOJI_11></SPan><SPan><EMOJI_12></SPan><SPan><EMOJI_13></SPan><SPan><EMOJI_14></SPan><SPan><EMOJI_15></SPan></Span><SPAn class = " keyword token " > var </SPAn > canvas <SPAn class = " operator token " > = </SPAn > document.createElement('canvas');
canvas.id = "myChart";<</CODE ></PRE ></DIV ><P style = "color : #24292e ; background-color : #ffffff ; margin-bottom : 16px ; " >Ensuite, nous allons configurer l'objet&#160;<code>Données Structure

Vous pouvez voir que dans le tableau data, nous définissons les résultats que nous avons obtenus de notre couche de fonctionnalités. Chaque résultat représentera une partie du graphique en anneau, la couleur de fond (backgroundColor) est également définie pour chaque valeur de résultat. De plus, l'attribut labels est défini pour chaque élément dans le tableau data.<\/P>

Enfin, notre dernière étape est de créer un nouvel objet Chart avec les propriétés data et type. Ensuite, nous retournons l'objet Chart.<\/P>

var

Une fois que l'objet est retourné, nous devrions obtenir un graphique dans notre popup affichant les informations démographiques à chaque fois que nous cliquons sur un comté. Vous pouvez également créer cet exemple en utilisant TypeScript . Voici un lien vers l'exemple, si vous vous demandez à quoi cela ressemblerait en TypeScript.<\/P>

Astuce : Voici une vidéo rapide montrant comment fonctionne l'exemple.<\/Strong ><\/Span ><\/P >https://www.screencast.com/users/mogbuchiekwe/folders/Snagit/media/ea3ff749-15b3-4de3-89ce-6e1e1526aeab/embed

Trouver plus de publications taguées avec

SDK

Support.Esri.com

Réponses

RobertMEIER

I have successfully integrated Chart.js into may application, but have not been able to get the zooming/panning to wok on my line chart. I've tried many options, etc. I even tried disabling the wheel zoom for map navigation. I'm not getting any errors, it just doesn't work.

has anyone gotten this to work?

MatthewHamilton-Smith

I am using typescript to develop applications using the ArcGIS Javascript API. When you import chart.js as above (importing using a script tag or dojoConfig), the type definitions are not available when coding. Alternatively, when you import the types using ...

import Chart from 'chart.js';

after running ...

npm i --save-dev @types/chart.js
npm i --save chart.js

a 404 error occurs at runtime, stating that "<websiteUrl>/chart.js is not found". The site is smart enough to not look for "esri/..." modules in the root of the url. How can I make it just as smart with respect to the "chart.js" module? Simply adding ...

{
    name: "chart.js",
    location: 
}

to window.dojoConfig.packages does not change anything - I still get a 404 error at runtime. 😞

If you have insight, please help!

* Update *

So it looks like dojoConfig does not like package names containing ".". Modifying the name of the type definition file (found in node_modules/@types) from "chart.js" to "chartjs" did the trick, along with this addition window.dojoConfig.packages:

{
    name: "chartjs",
    location: "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/",
    main: "Chart"
}

davidround

Super cool! A perfect example of why pie charts are terrible obviously but cool nonetheless. I'm going to have a go.

Rejoignez la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.