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

Derde partij grafiekbibliotheken gebruiken met de 4.x JavaScript API

MunachisoOgbuchiekwe

<\/HEAD>

Introductie<\/H1>Dit is een korte blogpost om te laten zien hoe eenvoudig het is om mooie grafieken te integreren in je JavaScript-toepassing met behulp van de 4.x API. Als je nieuw bent met de ArcGIS API for JavaScript, bieden we een gemakkelijke manier om te beginnen met het maken van webmappingtoepassingen. Ga naar de <\/SPAN>ArcGIS API for JavaScript<\/A> <\/SPAN>site om aan de slag te gaan. Voor dit voorbeeld gebruiken we een bibliotheek van derden genaamd <\/SPAN>Chart.js<\/A>. Chart.js is een eenvoudige maar flexibele JavaScript-grafiekbibliotheek die het gemakkelijk maakt om eenvoudige grafieken voor je data te maken.<\/P>

Laad de Chart.js-bibliotheek in je JavaScript-toepassing<\/H2>Om Chart.js in onze toepassing te gebruiken, moeten we het laden als een module. Dit komt omdat Dojo gebruikmaakt van <\/SPAN>Asynchronous Module Definition<\/A> <\/SPAN>(AMD)-formaat om modules te laden in plaats van een bestand te laden met een <\/SPAN>script<\/CODE> <\/SPAN>tag. Om dit te bereiken kunnen we <\/SPAN><CODE>dojoConfig<\/CODE> <\/SPAN>gebruiken om ons aangepaste JS-pakket als module te laden.<\/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>             \/\/- vertel Dojo waar andere pakketten geladen moeten worden<\/span>             dojoConfig:<\/span> {<\/span>                 async<\/span>:<\/span> true<\/span>,<\/span>             packages:<\/span> [<\/span>                 {<\/span>                     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>'<\/span><\/span>,<\/span>           & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp name:< \/ span > 'Chart' < \/ span > &nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;& nbsp ;} &nbsp ;& nb sp ;& nb sp ;] &nbsp ;& nb sp ;} &nbsp ;} </script> <script src=\"https:\/\ /js.arcgis.com/4.7/\">< /script > ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ < / code >< / pre >< / div > Zoals je kunt zien in de bovenstaande voorbeeldcode, gaan we Dojo vertellen om een module te laden vanaf een Content Delivery Network (CDN). In dit geval gebruiken we het CDN dat Chart.js voor ons levert. Je kunt de bestanden ook installeren via een pakketbeheerder zoals npm of Bower. Je kunt de verschillende manieren om Chart.js te installeren leren via hun&nb sp;< \/ SPAN >< A href = "http : \/ \/www.chartjs.org \/docs \/latest \/getting-started \/installation.html " rel = "nofollow noopener noreferrer " style = "color : #0366d6 ; background-color : transparent ; text-decoration : none ; " target = " _blank " > Installatiedocumentatie < \/ A > . Om mogelijke fouten te voorkomen, zorg ervoor dat de<CODE>dojoConfigwordt gedeclareerd vóór de ArcGIS for JavaScript API.< \/ P >< H2 style = " color : #24292e ; background-color : #ffffff ; border-bottom : 1px solid #eaecef ; font-weight : 600 ; font-size : 1.5em ; margin-top : 24px ; margin-bottom : 16px ; padding-bottom : 0.3em ; " id = " toc-hId-1035670582 " id = " toc-hId-1035670582 " > Integratie van Chart.js in je JavaScript-toepassing < \/ H2 > Zodra je de bovenstaande stappen hebt voltooid, kunnen we nu Chart.js gebruiken in ons JavaScript-bestand...< \/ P >< DIV class = " " style = " color : #24292e ; background-color : #ffffff ; margin-bottom : 16px ; " >< PRE class = " lia-code-sample line-numbers language-none " >< CODE > require < \/ SPAN >(
2 esri\Map \u0022 ,
2 esri\views\MapView \u0022 ,
sri\PopupTemplate \u0022 ,
sri\layers\FeatureLayer \u0022 ,
sri\widgets\Popup \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,
sri\tasks\support\Query \u0022 ,

#eaecef; font-weight: 600; font-size: 1.5em; margin-top: 24px; margin-bottom: 16px; padding-bottom: 0.3em;" id="toc-hId--1516486379" id="toc-hId--1516486379">Gegevens opvragen uit een Feature Layer

In dit voorbeeld gebruik ik een <\/SPAN>Feature Layer<\/A> <\/SPAN>van Californië van <\/SPAN>ArcGIS online <\/SPAN><\/A>. Elke keer dat ik op een county klik, wil ik dat er een pop-up verschijnt met informatie over de demografie van het gebied. Hiervoor kunnen we een <\/SPAN>Query<\/A> gebruiken, waarmee we informatie uit onze Feature Layer kunnen halen en ruimtelijk de laag kunnen doorzoeken om alleen gegevens te tonen waar we hebben geklikt. Zodra de belofte is opgelost, roepen we de view's <\/SPAN>PopUp<\/CODE> <\/SPAN>aan en sturen de gegevens naar <\/SPAN><CODE>setContentInfo<\/CODE>. Dit is een functie die de grafiek voor ons zal maken. De <\/SPAN><CODE>setContentInfo<\/CODE> <\/SPAN>functie wordt in de volgende sectie nader uitgelegd. Hier is het codefragment dat dit laat zien.<\/P><DIV class="" style="color: #24292e; background-color: #ffffff; margin-bottom: 16px;"><PRE class="lia-code-sample line-numbers language-none"><CODE>   var<\/SPAN> query =<\/SPAN> new<\/SPAN> Query<\/SPAN>(<\/SPAN>)<\/SPAN>;<\/SPAN>     query.<\/SPAN>returnGeometry =<\/SPAN> true<\/SPAN>;<\/SPAN>     query.<\/SPAN>outFields =<\/SPAN> [<\/SPAN>"STATE_NAME"<\/SPAN>,<\/SPAN> "WHITE"<\/Span>,<\/ documentatie <\/SPAN><\/A> op de Chart.js-website. Voor een doughnut-grafiek zou het object eruitzien als de onderstaande codefragment.<\/P><DIV class="" style="color: #24292e; background-color: #ffffff; margin-bottom: 16px;"><PRE class="lia-code-sample line-numbers language-none"><CODE>var<\/SPAN> data =<\/SPAN> {<\/SPAN>       datasets:<\/SPAN>[<\/SPAN>{<\/SPAN>         data:<\/SPAN> [<\/SPAN>results.<\/SPAN>ASIAN,<\/SPAN> results.<\/SPAN>BLACK,<\/SPAN> results.<\/SPAN>HAWN_PI,<\/SPAN> results.<\/SPAN>HISPANIC,<\/SPAN>                  results.<\/SPAN>OTHER,<\/SPAN> results.<\/SPAN>WHITE]<\/SPAN>,<\/SPAN>         backgroundColor:<\/SPAN> [<\/SPAN>"#4286f4"<\/SPAN>,<\/SPAN> "#41f4be"<\/SPAN>,<\/SPAN> "#8b41f4"<\/SPAN>,<\/SPAN> "#e241f4"<\/SPAN>,<\/SPAN> "#f44185"<\/SPAN>,<\/SPAN> "#f4cd41"<\/SPAN>]<\/SPAN>       }<\/SPAN>]<\/SPAN>,<\/span>       labels:[         'Asian',         'Black',         'Hawaiian',         'Hispanic',         'Other',         'White'       ]    }; ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍Je kunt zien dat in de data array, we de resultaten instellen die we van onze feature layer hebben gekregen. Elk resultaat vertegenwoordigt een stuk van de doughnut-grafiek, de backgroundColor wordt ook ingesteld voor elke resultaatwaarde. Daarnaast wordt het labels attribuut ingesteld voor elk item in de data array.

Ten slotte is onze laatste stap om een nieuw Chart object te maken met de data en type eigenschappen. Daarna retourneren we het Chart var myPieChart = new Chart(canvas,{ type: 'doughnut', data: data }); return canvas;161718192021Zodra het object wordt geretourneerd, zouden we een grafiek in onze pop-up moeten krijgen die demografische informatie toont telkens wanneer we op een county klikken. Je kunt dit voorbeeld ook maken met TypeScript. Hier is een link naar het voorbeeld, als je je afvraagt hoe het eruit zou zien in TypeScript.

Tip: Hier is een korte video die laat zien hoe het voorbeeld werkt.

https://www.screencast.com/users/mogbuchiekwe/folders/Snagit/media/ea3ff749-15b3-4de3-89ce-6e1e1526aeab/embed

Conclusie

De ArcGIS API for JavaScript maakt het super eenvoudig om prachtige grafieken te integreren van externe bibliotheken zoals Chart.js. Er zijn nog veel meer bibliotheken die je op deze manier in je JavaScript-toepassing kunt integreren, waardoor je krachtige kaarten met extra functionaliteit kunt maken. Voel je vrij om naar de GitHub Gist paginapagina voor het volledige voorbeeld.

Vind meer berichten getagd met

SDK

Support.Esri.com

Reacties

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle links

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