Uso de bibliotecas de gráficos de terceros con la API de JavaScript 4.x

MunachisoOgbuchiekwe

<\/HEAD>

Introducción<\/H1>Esta es una publicación rápida en el blog para mostrar lo fácil que es integrar gráficos hermosos en tu aplicación JavaScript usando la API 4.x. Si eres nuevo en la ArcGIS API for JavaScript, ofrecemos una manera sencilla de comenzar a crear aplicaciones de mapeo web. Dirígete al <\/SPAN>ArcGIS API for JavaScript<\/A> <\/SPAN>sitio para comenzar. Para este ejemplo usaremos una biblioteca de terceros llamada <\/SPAN>Chart.js<\/A>. Chart.js es una biblioteca de gráficos JavaScript simple pero flexible que facilita hacer gráficos simples para tus datos.<\/P>

Carga la biblioteca Chart.js en tu aplicación JavaScript<\/H2>Para usar Chart.js en nuestra aplicación necesitamos cargarla como un módulo. Esto se debe a que Dojo usa <\/SPAN>Asynchronous Module Definition<\/A> <\/SPAN>(AMD) para cargar módulos en lugar de cargar un archivo usando una etiqueta <\/SPAN>script<\/CODE><SPAN>&nbsp;<\/SPAN>. Para lograr esto podemos usar<SPAN>&nbsp;<\/SPAN><CODE>dojoConfig<\/CODE><SPAN>&nbsp;<\/SPAN>para cargar nuestro paquete JS personalizado como un 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 class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><<\/SPAN>script<\/SPAN><SPAN class="punctuation token">><\/SPAN><\/SPAN> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">const<\/SPAN> options <SPAN class="operator token">=<\/SPAN> <SPAN class="punctuation token">{<\/SPAN> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="comment token">\/\/- indica a Dojo dónde cargar otros paquetes<\/SPAN> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; dojoConfig<SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">{<\/SPAN> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">async<\/SPAN><SPAN class="punctuation token">:<\/SPAN> <SPAN class="keyword token">true<\/SPAN><SPAN class="punctuation token">,<\/SPAN> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; packages<SPAN class="punctuation token">:<\/SPAN> <SPAN class="punctuation token">[<\/SPAN> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="punctuation token">{<\/SPAN> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp location<SPAN class="punctuation token">:<\/SPAN> <SPAN class="string token"><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><SPAN class="punctuation token">,<\/SPAN> &nbsp; name<SPAnclass= "stringtoken ">'Chart'<SPAnclass= "punctuationtoken ">,<SPAnclass= "punctuationtoken "> &nbsp;</span> #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">Consulta de datos desde un Feature Layer

En este ejemplo estoy usando un <\/SPAN>Feature Layer<\/A> <\/SPAN>de California desde <\/SPAN>ArcGIS online <\/SPAN><\/A>. Cada vez que hago clic en un condado, quiero que aparezca un pop up que muestre información sobre la demografía del área. Para esto podemos usar un <\/SPAN>Query<\/A>, que nos permitirá obtener información de nuestro Feature Layer y consultar espacialmente la capa para mostrar solo los datos donde hicimos clic. Una vez que la promesa se haya resuelto, llamaremos al <\/SPAN>PopUp<\/CODE><SPAN>&nbsp;<\/SPAN>de la vista y enviaremos los datos a<SPAN>&nbsp;<\/SPAN><CODE>setContentInfo<\/CODE>. Esta es una función que creará el gráfico para nosotros. La función<SPAN>&nbsp;<\/SPAN><CODE>setContentInfo<\/CODE><SPAN>&nbsp;<\/SPAN>se explicará con más detalle en la siguiente sección. Aquí está el fragmento de código que muestra esto.<\/P><DIV class="" style="color: #24292e; background-color: #ffffff; margin-bottom: 16px;"><PRE class="lia-code-sample line-numbers language-none"><CODE>&nbsp;&nbsp; <SPAN class="keyword token">var<\/SPAN> query <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">new<\/SPAN> <SPAN class="token class-name">Query<\/SPAN><SPAN class="punctuation token">(<\/SPAN><SPAN class="punctuation token">)<\/SPAN><SPAN class="punctuation token">;<\/SPAN> &nbsp;&nbsp;&nbsp; query<SPAN class="punctuation token">.<\/SPAN>returnGeometry <SPAN class="operator token">=<\/SPAN> <SPAN class="keyword token">true<\/SPAN><SPAN class="punctuation token">;<\/SPAN> &nbsp;&nbsp;&nbsp; query<SPAN class="punctuation token">.<\/SPAN>outFields <SPAN class="operator token">=<\/SPAN> <SPAN class="punctuation token">[<\/SPAN><SPAN class="string token">"STATE_NAME"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"WHITE"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"BLACK"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"ASIAN"<\/SPAN><SPAN class="punctuation token">,<\/SPAN> <SPAN class="string token">"HAWN_PI"<\/Span><span class='punctuation token'>,<\/<span> <span class='string token'>'OTHER'<\/<span> <span class='punctuation token'>,<\/<span> <span class='string token'>'HISPANIC'<\/<span>]\;</span> &nbsp;&nbsp;&nbsp; query.returnGeometry = true; &nbsp;&nbsp;&nbsp; query.outFields = ["STATE_NAME", "WHITE", "BLACK", "ASIAN", "HAWN_PI", "OTHER", "HISPANIC"]; &nbsp;&nbsp;&nbsp; query.where = "1=1"; &nbsp;&nbsp;&nbsp; query.num = 50; &nbsp;&nbsp;&nbsp; // Al hacer clic en la vista, consulta el feature layer y pasa los resultados a la función setContentInfo. &nbsp;&nbsp;&nbsp; view.on("click", (e) => { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; query.geometry = e.mapPoint; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; featureLayer.queryFeatures(query).then((results) => { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(results.features[0].attributes.STATE_NAME === "California"){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; view.popup.visible = true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; view.popup.open({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; title: "Ejemplo de Gráfico Doughnut", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;} &nbsp;&nbsp;&nbsp; }); }); ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<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>‍</span><span>‍</span><span>‍</span><span>‍</span><span>‍</span></span>

Crear un gráfico usando Chart.js

Ahora vamos a incluir el módulo&nbSP;CódigoChart, que instanciamos hace un rato. En el código anterior establecimos el parámetro de contenido a una función llamada setContentInfo y pasamos los datos. En el siguiente fragmento de código, vamos a crear esta función y usarla para inicializar nuestros gráficos dentro del pop up. Para comenzar, vamos a crear un nuevo elemento canvas y darle el id de myChart.

var canvas = document.createElement('canvas');
canvas.id = "myChart";
<<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'>Luego configuraremos el objeto Data Structure con nuestros propios datos. En este caso particular estamos usando un doughnut graph que tendría una estructura de datos diferente a un line graph. Para más información sobre los diferentes tipos de gráficos que puedes usar, por favor consulta el siguiente<A href='http://www.chartjs.org/docs/latest/charts'  rel="nofollow noopener noreferrer" style="color: #0366d6; background-color: transparent; text-decoration: none;" target="_blank">documentación<SPAN>&nbsp;<\/SPAN><\/A> en el sitio web de Chart.js. Para un gráfico de dona, el objeto se vería como el siguiente fragmento de código a continuación.<\/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 class=\"punctuation token\">]<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>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class=\"string token\">'Black'<span><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class=\"string token\">'Hawaiian'<span><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class=\"string token\">'Hispanic'<span><span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class=\"string token\">'Other'<span><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;&nbsp; <span class=\"punctuation token\">}<span><span>;<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><‍

Puedes ver que en el arreglo de </ span >data</ code >< span >&#160;</ span >, estamos estableciendo los resultados que obtuvimos de nuestra capa de características. Cada resultado representará una parte del gráfico de dona, el atributo<span>&#160;</ span ><code >backgroundColor</ code >< span >&#160;</ span > también se establece para cada valor de resultado. Además, el atributo<span>&#160;</ span ><code >labels</ code >< span >&#160;</ span > se establece para cada elemento en el arreglo de<span>&#160;</ span ><code >data</ code >< span >&#160;</ span >. </p> <p style=\"color: #24292e; background-color: #ffffff; margin-bottom: 16px;\"> Finalmente, nuestro último paso es crear un nuevo objeto<span>&#160;</ span ><code >Chart</ code >< span >&#160;</ span > con las propiedades<span>&#160;</ span ><code >data</ code >< span >&#160;</ span > y<span>&#160;</ span ><code >type</ code >< span >&#160;</ span >. Luego devolvemos el objeto<span>&#160;</ span ><code >Chart</ code >< span >&#160;</ span >. </p> <div style=\"color: #24292e; background-color: #ffffff; margin-bottom: 16px;\"> <pre class=\"lia-code-sample line-numbers language-none\"><code> var myPieChart = new Chart(canvas, { type: 'doughnut', data: data }); return canvas;<‍‍‍‍‍‍‍‍‍‍


Una vez que se devuelve el objeto, deberíamos obtener un gráfico dentro de nuestro pop-up que muestre información demográfica cada vez que hacemos clic en un condado. También puedes crear este ejemplo usando </ span >TypeScript. Aquí hay un enlace al </ span >ejemplo, si te preguntas cómo se vería en TypeScript.

Pista: Aquí hay un video rápido que muestra cómo funciona el ejemplo.

\

Conclusión

La API de ArcGIS para JavaScript hace que sea muy sencillo integrar gráficos hermosos de bibliotecas externas como Chart.js. Hay muchas más bibliotecas que puedes integrar en tu aplicación JavaScript como esta que te permiten hacer mapas potentes con funcionalidad adicional. No dudes en visitar la página de </ span >GitHub Gist < span >& nbsp ; </ span > para el ejemplo completo.

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?