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

4.x JavaScript APIでサードパーティのグラフ作成ライブラリを使用する方法

MunachisoOgbuchiekwe

<\/HEAD>

はじめに<\/H1>これは、4.x APIを使用して美しいグラフをJavaScriptアプリケーションに簡単に統合する方法を示すための簡単なブログ投稿です。ArcGIS API for JavaScriptが初めての方のために、ウェブマッピングアプリケーションを簡単に始められる方法を提供しています。 <\/SPAN>ArcGIS API for JavaScript<\/A> <\/SPAN>のサイトにアクセスして始めてください。このサンプルでは、 <\/SPAN>Chart.js<\/A>というサードパーティライブラリを使用します。Chart.jsはシンプルで柔軟なJavaScriptチャートライブラリで、データのシンプルなグラフを簡単に作成できます。<\/P>

Chart.jsライブラリをJavaScriptアプリケーションに読み込む<\/H2>Chart.jsをアプリケーションで使用するには、モジュールとして読み込む必要があります。これはDojoが <\/SPAN>Asynchronous Module Definition<\/A> <\/SPAN>(AMD)形式でモジュールを読み込むためであり、 <\/SPAN>script<\/CODE> <\/SPAN>タグでファイルを読み込む方法とは異なります。これを実現するために、カスタムJSパッケージをモジュールとして読み込むために <\/SPAN><CODE>dojoConfig<\/CODE> <\/SPAN>を使用できます。<\/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>             // Dojoに他のパッケージの読み込み場所を伝える<\/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 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 ;}; </script> <script src = "https://js.arcgis.com/4.7/"> </script>
上記のサンプルコードからわかるように、dojoにContent Delivery Network (CDN)からモジュールを読み込むよう指示します。この場合、Chart.jsが提供するCDNを使用しています。また、npmやBowerなどのパッケージマネージャー経由でファイルをインストールすることも可能です。Chart.jsのさまざまなインストール方法については、彼らの インストールドキュメントをご覧ください。潜在的なエラーを避けるために、ArcGIS for JavaScript APIより前にdojoConfigが宣言されていることを確認してください。JavaScriptアプリケーションへのChart.js統合

上記の手順が完了したら、JavaScriptファイル内でChart.jsを使用できます...

require([
   "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)<br />

require配列にはライブラリへのCDNリンクを入れます。その後、モジュール名を Chart とし、後でコード内で新しいインスタンスを作成できるようにします。

Feature Layerからのデータクエリこの例では、 <\/SPAN>Feature Layer<\/A> <\/SPAN>としてカリフォルニア州のものを <\/SPAN>ArcGIS online <\/SPAN><\/A>から使用しています。各郡をクリックするたびに、その地域の人口統計情報をポップアップで表示したいと思います。これには、 <\/SPAN>Query<\/A>を使用できます。これにより、Feature Layerから情報を取得し、クリックした場所だけを空間的にクエリしてデータを表示できます。Promiseが解決されたら、ビューの <\/SPAN>PopUp<\/CODE> <\/SPAN>を呼び出し、データを <\/SPAN><CODE>setContentInfo<\/CODE>に送ります。これはチャートを作成する関数です。 <\/SPAN><CODE>setContentInfo<\/CODE> <\/SPAN>関数については次のセクションで詳しく説明します。以下はそのコードスニペットです。<\/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>,<\/span> "BLACK"<\/span>,<\/span> "ASIAN"<\/span>,<\/span> "HAWN_PI"<\/span>,<\/span> "OTHER"<\/span>,<\/span> "HISPANIC"<\/span>]<\/span>;<\/span>     query<\/>where =<\/> \"1=1\"<\/> <\/>;<\/>     query<\/>num =<\/> 50<\/> <\/>;<\/>     // ビューのクリック時にFeature Layerをクエリし、結果を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: "Doughnut Graph Example",            content: setContentInfo(results.features[0].attributes)         });      }   } );  } );‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Chart.jsを使ってグラフを作成する

先ほどインスタンス化した Chart モジュールをここで組み込みます。前のコードでは、パラメーター content に setContentInfo という関数を設定し、データを渡しました。次のコードスニペットでは、この関数を作成し、ポップアップ内でチャートを初期化するために使用します。まず、新しい canvas elementを作成し、そのIDに myChart を付けます。



      var canvas = document.createElement('canvas');
      canvas.id = "myChart";<EMOJI_21>

次に、自分のデータで Data Structure オブジェクトを設定します。この場合は doughnut graph (ドーナツグラフ) を使用しており、line graphとは異なるData Structureになります。使用できるさまざまなチャートタイプについては、以下のをご覧ください。 rel="nofollow noopener noreferrer" style="color: #0366d6; background-color: transparent; text-decoration: none;" target="_blank">Chart.js ウェブサイトのドキュメント <\/SPAN><\/A>。ドーナツグラフの場合、オブジェクトは以下のコードスニペットのようになります。<\/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> }<\/span>]<\/span>,<\/span> labels:<\/span> [<\/span> 'Asian'<\/span>,<\/span> 'Black'<\/span>,<\/span> 'Hawaiian'<\/span>,<\/span> 'Hispanic'<\/span>,<\/span> 'Other'<\/span>,<\/span> 'White'<\/span> <Span class="punctuation token"]]<\/ }];‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<Span clas...

タグ付けされた投稿をもっと見る

SDK

Support.Esri.com

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.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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