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

Používání knihoven třetích stran pro grafy s 4.x JavaScript API

MunachisoOgbuchiekwe

<\/HEAD>

Úvod<\/H1>Toto je rychlý blogový příspěvek, který ukazuje, jak snadné je integrovat krásné grafy do vaší JavaScript aplikace pomocí 4.x API. Pokud jste v ArcGIS API for JavaScript noví, poskytujeme snadný způsob, jak začít vytvářet webové mapové aplikace. Přejděte na stránku <\/SPAN>ArcGIS API for JavaScript<\/A> <\/SPAN>, kde můžete začít. Pro tento příklad budeme používat knihovnu třetí strany nazvanou <\/SPAN>Chart.js<\/A>. Chart.js je jednoduchá, ale flexibilní JavaScriptová knihovna pro tvorbu grafů, která usnadňuje vytváření jednoduchých grafů pro vaše data.<\/P>

Načtení knihovny Chart.js do vaší JavaScript aplikace<\/H2>Abychom mohli použít Chart.js v naší aplikaci, musíme ji načíst jako modul. Je to proto, že Dojo používá <\/SPAN>Asynchronous Module Definition<\/A> <\/SPAN>(AMD) formát pro načítání modulů místo načítání souboru pomocí <\/SPAN>script<\/CODE> <\/SPAN>tagu. K tomu můžeme použít <\/SPAN><CODE>dojoConfig<\/CODE> <\/SPAN>pro načtení našeho vlastního JS balíčku jako modulu.<\/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>             // řekněte Dojo, kde načíst ostatní balíčky<\/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:\/\/community.esri.com\/external-link.jspa?url=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2FChart.js%2F2.7.2%2FChart.js" target="_blank">https:\/\/cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js<\/a>'<\/span><\/span>,<\/span>   name:<\/span> 'Chart'<\/span>  }  ]  }  }; </script> <script src=\"https://js.arcgis.com/4.7/\"> </script> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍Jak vidíte z výše uvedeného ukázkového kódu, řekneme Dojo, aby načetl modul z Content Delivery Network (CDN). V tomto případě používáme CDN, které nám poskytuje Chart.js. Můžete také nainstalovat soubory přes správce balíčků jako npm nebo Bower. Různé způsoby instalace Chart.js se můžete naučit v jejich dokumentaci o instalaci na stránce Installation documentation. Aby nedošlo k žádným potenciálním chybám, ujistěte se, že `dojoConfig` je deklarováno před ArcGIS for JavaScript API.<\/P>Integrace Chart.js do vaší JavaScript aplikace<\/H2>Jakmile dokončíte výše uvedené kroky, můžeme nyní použít Chart.js v našem JavaScript souboru...<\/P>`require([\n "esri/Map",\n "esri/views/MapView",\n "esri/PopupTemplate",\n "esri/layers/FeatureLayer",\n "esri/widgets/Popup",\n "esri/tasks/support/Query",\n "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js",\n "dojo/domReady!"\n ], function(Map, MapView, PopupTemplate, FeatureLayer, Popup, Query, Chart)<‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍...`V poli require vložíme odkaz CDN na knihovnu. Poté pojmenujeme modul jako `Chart`, abychom si mohli později v kódu vytvořit jeho novou instanci.<\/P> #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">Dotazování dat z Feature Layer

V tomto příkladu používám <\/SPAN>Feature Layer <\/SPAN> Kalifornie z <\/SPAN>ArcGIS online <\/SPAN><\/A>. Pokaždé, když kliknu na okres, chci, aby se zobrazilo vyskakovací okno s informacemi o demografii oblasti. K tomu můžeme použít <\/SPAN>Query, které nám umožní získat informace z našeho Feature Layer a prostorově dotazovat vrstvu tak, aby se zobrazovala data pouze tam, kde jsme klikli. Jakmile je promise vyřešený, zavoláme view's <\/SPAN>PopUp <\/SPAN> a pošleme data do <\/SPAN>setContentInfo. Toto je funkce, která pro nás vytvoří graf. Funkce <\/SPAN>setContentInfo <\/SPAN> bude podrobněji vysvětlena v další sekci. Zde je ukázka kódu, která to ukazuje.<\/P>   var query = new Query();     query.returnGeometry = true;     query.outFields = ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"];     query.where = "1=1";     query.num = 50;     // Při kliknutí na view dotazujeme feature layer a předáváme výsledky funkci setContentInfo.     view.on("click", (e) => {       query.geometry = e.mapPoint;       featureLayer.queryFeatures(query).then((results) => {         if(results.features[0].attributes.STATE_NAME === "California"){           view.popup.visible = true;           view.popup.open({              title: "Příklad koláčového grafu",              content: setContentInfo(results.features[0].attributes)           });       }     });   });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍Vytvoření grafu pomocí Chart.jsNyní přidáme modul <\/SPAn>Chart, který jsme dříve inicializovali. V předchozím kódu jsme nastavili parametr <\/SPAn>content, na funkci nazvanou <\/SPAn>setContentInfo, do které jsme předali data. V následujícím úryvku kódu vytvoříme tuto funkci a použijeme ji k inicializaci našich grafů uvnitř vyskakovacího okna. Nejprve vytvoříme nový prvek <\/SPAn>canvas, kterému dáme ID <\/SPAn>ID <\/SPAn>CZmyChart.

<Span Class = "keyword Token ">var </Span > canvas<span Class = "operator Token ">= </Span > document.createElement(<Span Class = "string Token ">'canvas'</Span >)<Span Class = "punctuation Token ">;</Span >
canvas.id<span Class = "operator Token ">= </Span ><Span Class = "string Token "> "myChart " </Span ><Span Class = "punctuation Token ">;</Span ><<EMOJI_21 > ><Span Class = "line-numbers-rows"><Span > <<EMOJI_22 > >< / Span ><Span > <<EMOJI_23 > >< / Span ></Span ></Code ></Pre ></Div ><P style = "color:#24292e;background-color:#ffffff;margin-bottom:16px ; ">Poté nastavíme objekt struktury dat (Data Structure) s našimi vlastními daty. V tomto konkrétním případě používáme koláčový graf (doughnut graph), který má odlišnou strukturu dat než čárový graf (line graph). Pro více informací o různých typech grafů, které můžete použít, prosím navštivte následující<A href = "http://www.chartjs.org/docs/latest/charts"  rel="nofollow noopener noreferrer" style="color: #0366d6; background-color: transparent; text-decoration: none;" target="_blank">dokumentace<SPAN>&nbsp;<\/SPAN><\/A> na webu Chart.js. Pro graf typu doughnut by objekt vypadal jako následující ukázka kódu níže.<\/P><DIV class="" style="color: #24292e; background-color: #ffffff; margin-bottom: 16px;"><PRE class="lia-code-sample line-numbers language-none"><CODE><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>‍<\/span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span></span>

Vidíte, že v poli data nastavujeme výsledky, které jsme získali z naší feature vrstvy. Každý výsledek bude představovat jeden díl grafu doughnut, také je nastaven atribut backgroundColor pro každou hodnotu výsledku. Navíc je atribut labels nastaven pro každý prvek v poli data.

Nakonec je naším posledním krokem vytvořit nový objekt Chart s vlastnostmi data a type. Poté vrátíme objekt Chart.

var

Jakmile je objekt vrácen, měli bychom v našem pop-up okně vidět graf zobrazující demografické informace pokaždé, když klikneme na okres. Tento příklad můžete také vytvořit pomocí TypeScript. Zde je odkaz na ukázku, pokud vás zajímá, jak by to vypadalo v TypeScriptu.

Doporučení: Zde je krátké video ukazující, jak vzorek funguje.https://www.screencast.com/users/mogbuchiekwe/folders/Snagit/media/ea3ff749-15b3-4de3-89ce-6e1e1526aeab/embed

< /BODY >< /HTML >

Najděte více příspěvků označených jako

SDK

Support.Esri.com

Komentáře

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.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Nový zde? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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