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

Verwendung von Third Party Graphing Libraries mit der 4.x JavaScript API

MunachisoOgbuchiekwe

<\/HEAD>

Einführung<\/H1>Dies ist ein kurzer Blogbeitrag, um zu zeigen, wie einfach es ist, schöne Diagramme in Ihre JavaScript-Anwendung mit der 4.x API zu integrieren. Wenn Sie neu in der ArcGIS API for JavaScript sind, bieten wir eine einfache Möglichkeit, mit der Erstellung von Web-Mapping-Anwendungen zu beginnen. Besuchen Sie die <\/SPAN>ArcGIS API for JavaScript<\/A> <\/SPAN>Seite, um loszulegen. Für dieses Beispiel verwenden wir eine Drittanbieter-Bibliothek namens <\/SPAN>Chart.js<\/A>. Chart.js ist eine einfache und dennoch flexible JavaScript-Diagrammbibliothek, die es leicht macht, einfache Diagramme für Ihre Daten zu erstellen.<\/P>

Laden Sie die Chart.js-Bibliothek in Ihre JavaScript-Anwendung<\/H2>Um Chart.js in unserer Anwendung zu verwenden, müssen wir es als Modul laden. Dies liegt daran, dass Dojo das <\/SPAN>Asynchronous Module Definition<\/A> <\/SPAN>(AMD)-Format verwendet, um Module zu laden, anstatt eine Datei mit einem <\/SPAN>script<\/CODE> <\/SPAN>Tag zu laden. Um dies zu erreichen, können wir <\/SPAN><CODE>dojoConfig<\/CODE> <\/SPAN>verwenden, um unser benutzerdefiniertes JS-Paket als Modul zu 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>             \/\/ sagen Sie Dojo, wo andere Pakete geladen werden sollen<\/span>             dojoConfig:<\/SPAN> {<\/SPAN>                 async<\/span>: true<\/span>,             packages:<\/span> [<\/span>                 {<\/span>                     location:<\/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>               &amp...&  Wie Sie im obigen Beispielcode sehen können, werden wir Dojo anweisen, ein Modul von einem Content Delivery Network (CDN) zu laden. In diesem Fall verwenden wir das CDN, das Chart.js für uns bereitstellt. Sie können die Dateien auch über einen Paketmanager wie npm oder Bower installieren. Die verschiedenen Installationsmöglichkeiten von Chart.js können Sie in deren <\/>Installationsdokumentation. Um mögliche Fehler zu vermeiden, stellen Sie sicher, dass die`dojoConfig` vor der ArcGIS for JavaScript API deklariert wird.<\/>P>Integration von Chart.js in Ihre JavaScript-Anwendung

Nachdem Sie die oben genannten Schritte abgeschlossen haben, können wir nun Chart.js in unserer JavaScript-Datei verwenden...<\/>P>

<span class=\"token function\">require</span>([ 
   "esri/Map", 
   "esri/views/MapView", 
   "esri/PopupTemplate", 
   "esri/layers/FeatureLayer", 
   "esri/widgets/Popup", 
   "esri/tasks/support/Query", 
   "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js", 
   "dojo/domReady!"
 ], function(Map, MapView, PopupTemplate, FeatureLayer, Popup, Query, Chart){‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<span class=\"line-numbers-rows\"><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span></span>

Im require-Array fügen wir den CDN-Link zur Bibliothek ein. Wir benennen dann das Modul Chart, damit wir später im Code eine neue Instanz davon erstellen können.<\/>P>

Abfragen von Daten aus einem Feature Layer

In diesem Beispiel verwende ich einen <\/SPAN>Feature Layer<\/A> <\/SPAN>von Kalifornien aus <\/SPAN>ArcGIS online <\/SPAN><\/A>. Jedes Mal, wenn ich auf einen Landkreis klicke, möchte ich, dass ein Popup Informationen über die Demografie des Gebiets anzeigt. Dafür können wir eine <\/SPAN>Query<\/A> verwenden, die es uns ermöglicht, Informationen aus unserem Feature Layer abzurufen und den Layer räumlich abzufragen, um nur Daten anzuzeigen, wo wir geklickt haben. Sobald das Versprechen erfüllt ist, rufen wir das <\/SPAN>PopUp<\/CODE> <\/SPAN>der Ansicht auf und senden die Daten an <\/SPAN><CODE>setContentInfo<\/CODE>. Dies ist eine Funktion, die das Diagramm für uns erstellt. Die <\/SPAN><CODE>setContentInfo<\/CODE> <\/SPAN>Funktion wird im nächsten Abschnitt ausführlicher erklärt. Hier ist der Codeausschnitt, der dies zeigt.<\/P><DIV class="" style="color: #24292e; Hintergrundfarbe: #ffffff; Abstand unten: 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>Dokumentation <\/SPAN><\/A> auf der Chart.js-Website. Für ein Doughnut-Diagramm würde das Objekt wie im folgenden Code-Snippet aussehen.<\/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:<\/span> [<\/span>         'Asian'<\/span>,<\/span>         'Black'<\/span>,<\/span>         'Hawaiian'<\/span>,<\/span>         'Hispanic'<\/span>,<\/span>         'Other'<\/span>,<\/span>         'White'<\/span>       ]<\/span>    }<\/span>;<\/span>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>‍<\/span>Sie können sehen, dass wir im Daten-Array die Ergebnisse setzen, die wir von unserer Feature-Layer erhalten haben. Jedes Ergebnis repräsentiert ein Stück des Doughnut-Diagramms, die backgroundColor-Eigenschaft wird ebenfalls für jeden Ergebniswert gesetzt. Zusätzlich wird das Attribut labels für jedes Element im Daten-Array gesetzt. Schließlich ist unser letzter Schritt, ein neues Chart-Objekt mit den Eigenschaften Daten und type zu erstellen. Dann geben wir das Chart-Objekt zurück.var myPieChart = new Chart (canvas,{ type:'doughnut', data:dAtA } ) ; return canvas;< / EMOJI_16 >< EMOJI_17 >< / EMOJI_17 >< EMOJI_18 >< / EMOJI_18 >< EMOJI_19 >< / EMOJI_19 >< EMOJI_20 >< / EMOJI_20 >< EMOJI_21 >< / EMOJI_21 > Sobald das Objekt zurückgegeben wird, sollten wir bei jedem Klick auf einen Landkreis ein Diagramm in unserem Popup sehen, das demografische Informationen anzeigt. Sie können dieses Beispiel auch mit TypeScript erstellen. Hier ist ein Link zum Beispiel , falls Sie sich fragen, wie es in TypeScript aussehen würde. Tipp: Hier ist ein kurzes Video, das zeigt, wie das Beispiel funktioniert.

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

Fazit

Die ArcGIS API for JavaScript macht es super einfach, schöne Diagramme von Drittanbieter-Bibliotheken wie Chart.js zu integrieren. Es gibt viele weitere Bibliotheken, die Sie auf diese Weise in Ihre JavaScript-Anwendung integrieren können und die es Ihnen ermöglichen, leistungsstarke Karten mit zusätzlicher Funktionalität zu erstellen. Besuchen Sie gerne die Seite des GitHub Gist , um das vollständige Beispiel zu sehen.< /BODY > < /HTML >

Finde mehr Beiträge mit dem Tag

SDK

Support.Esri.com

Kommentare

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.

Nehmen Sie an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.

Schnellzugriffe

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