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

Usando Bibliotecas de Gráficos de Terceiros com a API JavaScript 4.x

MunachisoOgbuchiekwe

<\/HEAD>

Introdução<\/H1>Este é um post rápido no blog para mostrar como é fácil integrar gráficos bonitos em sua aplicação JavaScript usando a API 4.x. Se você é novo na ArcGIS API for JavaScript, fornecemos uma maneira fácil de começar a criar aplicações de mapeamento web. Vá até o <\/SPAN>ArcGIS API for JavaScript<\/A> <\/SPAN>site para começar. Para este exemplo, usaremos uma biblioteca de terceiros chamada <\/SPAN>Chart.js<\/A>. Chart.js é uma biblioteca de gráficos JavaScript simples, porém flexível, que facilita a criação de gráficos simples para seus dados.<\/P>

Carregue a biblioteca Chart.js em sua aplicação JavaScript<\/H2>Para usar o Chart.js em nossa aplicação, precisamos carregá-lo como um módulo. Isso porque Dojo usa <\/SPAN>Asynchronous Module Definition<\/A> <\/SPAN>(AMD) para carregar módulos, ao invés de carregar um arquivo usando uma tag <\/SPAN>script<\/CODE> <\/SPAN>. Para isso, podemos usar <\/SPAN><CODE>dojoConfig<\/CODE> <\/SPAN>para carregar nosso pacote JS personalizado como um módulo.<\/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>             // diga ao Dojo onde carregar outros pacotes<\/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 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 ;] &nbsp ;& nb sp ;& nb sp } &nbsp ;& nb sp }; & lt;/script> & lt;script src= "https://js.arcgis.com/4.7/" & gt; ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ ‍ Como você pode ver no código de exemplo acima, vamos dizer ao dojo para carregar um módulo de uma Content Delivery Network (CDN). Neste caso, estamos usando o CDN que o Chart.js fornece para nós. Você também pode instalar os arquivos através de um gerenciador de pacotes como npm ou Bower. Você pode aprender as diferentes formas de instalar o Chart.js através da sua&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\">documentação de instalação. Para evitar quaisquer erros potenciais, certifique-se de que o`dojoConfig` seja declarado antes da 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\">Integrando Chart.js em sua aplicação JavaScript

Depois de completar os passos acima, agora podemos usar o Chart.js em nosso arquivo JavaScript...< \/ p >< div class=\"\" style=\"color:#24292e;background-color:#ffffff;margin-bottom :16px\">

<span class=\"token function\">require</span><span class=\"punctuation token\">(</span><span class=\"punctuation token\">[</span>
   <span class=\"string token\">\"esri/Map\"</span><span class=\"punctuation token\">,</span>
   <span class=\"string token\">\"esri/views/MapView\"</span><span class=\"punctuation token\">,</span>
   <span class=\"string token\">\"esri/PopupTemplate\"</span><span class=\"punctuation token\">,</span>
   <span class=\"string token\">\"esri/layers/FeatureLayer\"</span><span class=\"punctuation token\">,</span>
   <span class=\"string token\">\"esri/widgets/Popup\"</span><span class=\"punctuation token\">,</span>
   <span class=\"string token\">\"esri/tasks/support/Query\"</span><span class=\"punctuation token\">,</span>
   <spa n cl ass = \ "string toke n \ "> \ " https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js \ " </spa n > < spa n cl ass = \ "punctuatio n toke n \ "> , </spa n >
   <spa n cl ass = \ "string toke n \ "> \ " dojo/domReady! \ " </spa n >
 ]<spa n cl ass = \ "punctuatio n toke n \ "> , </spa n >
 functio n (<spa n cl ass = \ "paramete r toke n \ ">Map</spa n>, MapView<span c lass=" punctuation toke n "> , </spa n> PopupTemplate<span c lass=" punctuation toke n "> , </spa n> FeatureLayer<span c lass=" punctuation toke n "> , </spa n> Popup<span c lass=" punctuation toke n "> , </spa n> Query<span c lass=" punctuation toke n "> , </spa n> Chart<span c lass=" punctuation toke n "> ) </spa n >‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SP AN clas s=">< EM OJ I _17 >> </ SP AN >< SP AN clas s=">< EM OJ I _18 >> </ SP AN >< SP AN clas s=">< EM OJ I _19 >> </ SP AN >< SP AN clas s=">< EM OJ I _20 >> </ SP AN >< SP AN clas s=">< EM OJ I _21 >> </ SP AN >< SP AN clas s=">< EM OJ I _22 >> </ SP AN >< SP AN clas s=">< EM OJ I _23 >> </ SP AN >< SP AN clas s=">< EM OJ I _24 >> </ SP AN >< SP AN clas s=">< EM OJ I _25 >> </ SP AN >< SP AN clas s=">< EM OJ I _26 >> </ SP AN >< SP AN clas s=">< EM OJ I _27 >> </ SP AN >

Consultando dados de uma Feature Layer

Neste exemplo, estou usando uma <\/SPAN>Feature Layer<\/A> <\/SPAN>da Califórnia do <\/SPAN>ArcGIS online <\/SPAN><\/A>. Cada vez que clico em um condado, quero que um pop up mostre informações sobre a demografia da área. Para isso, podemos usar uma <\/SPAN>Query<\/A>, que nos permitirá obter informações da nossa Feature Layer e consultar espacialmente a camada para mostrar apenas os dados onde clicamos. Uma vez que a promessa tenha sido resolvida, chamaremos o <\/SPAN>PopUp<\/CODE> <\/SPAN>da view e enviaremos os dados para <\/SPAN><CODE>setContentInfo<\/CODE>. Esta é uma função que criará o gráfico para nós. A função <\/SPAN><CODE>setContentInfo<\/CODE> <\/SPAN>será explicada com mais detalhes na próxima seção. Aqui está o trecho de código que mostra isso.<\/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> ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"]<\/span>;<\/span>     query.<\/span>where =<\/span> "1=1";<\/span>     query.<\/span>num =<\/span> 50;<\/span>     // Ao clicar na view, consulte a feature layer e passe os resultados para a função setContentInfo.<\/span>     view.<\/span>on<\/span>(<\/span>"click", (<\/span>e)<\/span> =><\/span> {       query.<\/span>geometry =<\/span> e.<\/span>mapPoint;<\/span>       featureLayer.<\/span>queryFeatures<\/span>(<\/span>query)<\/span>< spanclass= "punctuationtoken "> . < spanclass= "tokenfunction "> then < spanclass= "punctuationtoken ">( < spanclass= "punctuationtoken ">( results < spanclass= "punctuationtoken ") < spanclass= "operatortoken "> => < spanclass= "punctuationtoken ">{  & nbsp & nbsp & nbsp & nbsp & nbsp if (results.features[0].attributes.STATE_NAME === "California") {  & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp view.popup.visible = true;  & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp view.popup.open({  & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp title: "Exemplo de Gráfico Doughnut",  & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp content: setContentInfo(results.features[0].attributes)  & nbsp & nbsp & nbsp & nbsp & nbsp & nbsp });  & nbsp & nbsp & nbsp & nbsp }  & nbsp & nbsp });  & nbsp });    } ); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍...‍ <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:.3em;' id='toc-hId-226323956'>Criar um gráfico usando Chart.js</H2> Agora vamos incluir o módulo <CODE>Chart, que instanciamos há algum tempo. No código anterior, definimos o parâmetro content para uma função chamada setContentInfo, passando os dados. No próximo trecho de código, vamos criar essa função e usá-la para inicializar nossos gráficos dentro do pop up. Para começar, vamos criar um novo elemento canvas e dar a ele o id de myChart.

var canvas = document.createElement('canvas');
canvas.id = 'myChart';
‍‍‍‍...‍

Em seguida, vamos configurar o objeto Data Structure com nossos próprios dados. Neste caso particular, estamos usando um doughnut graph, que teria uma estrutura de dados diferente de um line graph. Para mais informações sobre os diferentes tipos de gráficos que você pode usar, por favor veja o seguinte ... rel="nofollow noopener noreferrer" style="color: #0366d6; background-color: transparent; text-decoration: none;" target="_blank">documentação <\/SPAN><\/A> no site do Chart.js. Para um gráfico de rosquinha, o objeto ficaria como o trecho de código abaixo.<\/P>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>       },       labels: [       'Asian',       'Black',       'Hawaiian',       'Hispanic',       'Other',       'White'     ] };‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<EMOJI_1><EMOJI_2><EMOJI_3><EMOJI_4><EMOJI_5><EMOJI_6><EMOJI_7><EMOJI_8><EMOJI_9><EMOJI_10><EMOJI_11><EMOJI_12><EMOJI_13><EMOJI_14><EMOJI_15>
Você pode ver que no array data, estamos definindo os resultados que obtivemos da nossa camada de feição. Cada resultado representará uma parte do gráfico de rosquinha, a propriedade backgroundColor também é definida para cada valor de resultado. Além disso, o atributo labels é definido para cada item no array data.

Finalmente, nosso último passo é criar um novo objeto Chart com as propriedades data e type. Então retornamos o objeto Chart.

<var myPieChart = new Chart(canvas,{
    type: 'doughnut',
    data: data
});
return canvas;<EMOJI_16}><EMOJI_17}><EMOJI_18}><EMOJI_19}><EMOJI_20}><EMOJI_21>}

Uma vez que o objeto é retornado, devemos obter um gráfico dentro do nosso pop-up mostrando informações demográficas cada vez que clicamos em um condado. Você também pode criar este exemplo usando TypeScript. Aqui está um link para o exemplo, caso você esteja curioso para ver como ficaria em TypeScript.

Dica: Aqui está um vídeo rápido mostrando como o exemplo funciona.

Conclusão

A ArcGIS API for JavaScript torna super simples integrar gráficos bonitos de bibliotecas terceiras como Chart.js. Existem muitas outras bibliotecas que você pode integrar em sua aplicação JavaScript assim, permitindo criar mapas poderosos com funcionalidades adicionais. Sinta-se à vontade para visitar a página do GitHub Gist para o exemplo completo.<\/p>

Encontre mais publicações marcadas com

SDK

Support.Esri.com

Comentários

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.

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

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