arcgis-charts

ArcGIS Charts

@arcgis/charts-components パッケージを使用して、レイヤーデータをチャート（棒、折れ線、円、ヒストグラム、散布図など）として可視化する場合は、このスキルを使用します。これは 5.0 で追加された新しいコンポーネントパッケージで、4.x に相当するものはありません。

インポート方法

CDN（ビルドツールなし）

<script src="https://js.arcgis.com/5.0/"></script>

<script
  type="module"
  src="https://js.arcgis.com/5.0/charts-components/"
></script>

ESM の直接インポート（ビルドツールあり）

import "@arcgis/charts-components/components/arcgis-chart";
import "@arcgis/charts-components/components/arcgis-charts-action-bar";

チャートモデル（プログラムによる設定用）

import { BarChartModel } from "@arcgis/charts-components/model";
import { PieChartModel } from "@arcgis/charts-components/model";
import { LineChartModel } from "@arcgis/charts-components/model";
import { HistogramModel } from "@arcgis/charts-components/model";
import { ScatterplotModel } from "@arcgis/charts-components/model";
import { BoxPlotModel } from "@arcgis/charts-components/model";
import { GaugeModel } from "@arcgis/charts-components/model";
import { RadarChartModel } from "@arcgis/charts-components/model";
import { HeatChartModel } from "@arcgis/charts-components/model";
import { ComboBarLineChartModel } from "@arcgis/charts-components/model";

サポートされているチャートの種類

チャートの種類	モデルクラス	説明
棒	BarChartModel	横棒または縦棒のチャート
折れ線	LineChartModel	系列を含む折れ線チャート
円	PieChartModel	円グラフとドーナツチャート
ヒストグラム	HistogramModel	度数分布を示すヒストグラム
散布図	ScatterplotModel	散布図とバブルチャート
箱ひげ図	BoxPlotModel	箱ひげ図
ゲージ	GaugeModel	ゲージ／スピードメーターチャート
レーダー	RadarChartModel	レーダー／スパイダーチャート
ヒート	HeatChartModel	ヒート／マトリックスチャート
複合	ComboBarLineChartModel	棒グラフと折れ線グラフの複合チャート

arcgis-chart コンポーネント

主なプロパティ

プロパティ	属性	型	デフォルト	説明
model	-	ChartModel | WebChart	-	チャート設定モデル（JS で設定）
layer	-	FeatureLayerView | SupportedLayer	-	データソースのレイヤー（JS で設定）
view	-	MapView | SceneView	-	マップ／シーンビューの参照（JS で設定）
layerItemId	layer-item-id	string	-	レイヤーポータルアイテム ID（layer の代わりに指定）
chartIndex	chart-index	number	-	レイヤーに複数のチャートがある場合に描画するチャートのインデックス
actionMode	action-mode	string	-	操作モード："zoom"、"multiSelection"、"multiSelectionWithCtrlKey"、"pan"

表示プロパティ

Property	Attribute	Type	Default	Description
disableInteractions	disable-interactions	boolean	false	チャートのすべてのインタラクションを無効にします
enableConfiguration	enable-configuration	boolean	false	組み込みのチャート設定 UI を有効にします
enableResponsiveFeatures	enable-responsive-features	boolean	-	レスポンシブ動作を有効にします
useAnimatedCharts	use-animated-charts	boolean	-	チャートのアニメーションを有効にします
hideEmptySeries	hide-empty-series	boolean	-	データのない系列を非表示にします
hideLicenseWatermark	hide-license-watermark	boolean	-	ライセンスの透かしを非表示にします
hideLoaderAnimation	hide-loader-animation	boolean	-	読み込みアニメーションを非表示にします
placeholder	placeholder	string	-	データがない場合のプレースホルダーテキスト
showUIMessages	show-ui-messages	boolean	-	ユーザー向けメッセージを表示します
errorPolicy	error-policy	string	"throw"	エラー処理："throw" または "ignore"

データとフィルタリングのプロパティ

Property	Attribute	Type	Default	Description
filterByExtent	filter-by-extent	boolean	-	現在のマップ範囲でチャートデータをフィルタリングします
filterBySelection	filter-by-selection	boolean	-	マップの選択内容でチャートデータをフィルタリングします
syncSelection	sync-selection	boolean	false	チャートとマップ間で選択内容を同期します
runtimeDataFilters	-	WebChartDataFilters	-	実行時データフィルター（JS で設定）
selectionData	-	SelectionData	-	現在の選択データ
nullAsValid	null-as-valid	boolean	false	null 値を有効なデータポイントとして扱います
timeZone	time-zone	string	-	時系列データのタイムゾーン

フォーマッターコールバック

Property	Type	Description
dataLabelFormatter	function	データラベルのカスタム書式設定
tooltipFormatter	function	ツールチップのカスタム書式設定
xAxisLabelFormatter	function	X 軸ラベルのカスタム書式設定
yAxisLabelFormatter	function	Y 軸ラベルのカスタム書式設定
gaugeInnerLabelFormatter	function	ゲージ内ラベルのカスタム書式設定
guideTooltipFormatter	function	ガイドツールチップのカスタム書式設定

メソッド

メソッド	戻り値	説明
loadModel()	Promise<void>	チャートモデルを読み込みます
refresh(props?)	Promise<void>	チャートを更新します。任意の { updateData, resetAxesBounds }
resetZoom()	Promise<void>	ズームをデフォルト表示にリセットします
clearSelection()	Promise<void>	すべての選択を解除します
switchSelection()	Promise<void>	選択状態を切り替えます
exportAsImage(format?)	Promise<void>	チャートを "png"、"jpg"、または "svg" としてエクスポートします
exportAsCSV(options?)	Promise<void>	チャートデータを CSV ファイルとしてエクスポートします
errorAlert(message?)	Promise<void>	エラーアラートを表示します
notify(message?, heading?)	Promise<void>	通知を表示します
componentOnReady()	Promise<this>	コンポーネントの読み込みが完了すると解決します

イベント

イベント	詳細	説明
arcgisSelectionChange	-	チャートの選択が変更されたときに発生します
arcgisDataFetchComplete	WebChartDataTypes	データの取得が完了したときに発生します
arcgisDataProcessComplete	-	データ処理が完了したときに発生します
arcgisUpdateComplete	ValidationStatus	チャートの更新が完了したときに発生します
arcgisConfigChange	{ newConfig, oldConfig, functionCalled }	チャート設定が変更されたときに発生します
arcgisAxesMinMaxChange	AxesMinMaxChangePayload	軸の最小値／最大値が計算されたときに発生します
arcgisBadDataWarningRaise	DataWarningObject	データエラーが検出されたときに発生します
arcgisChartNotFoundWarning	string	参照先のチャートが見つからないときに発生します

基本的な使い方

FeatureLayer からチャートを作成する

<arcgis-map id="map" item-id="YOUR_WEBMAP_ID">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-map>
<div id="chart-container" style="width: 500px; height: 400px;">
  <arcgis-chart id="my-chart"></arcgis-chart>
</div>

<script type="module">
  const mapElement = document.querySelector("arcgis-map");
  const chartElement = document.querySelector("#my-chart");

  await mapElement.viewOnReady();
  const view = mapElement.view;

  // Get the layer
  const layer = view.map.layers.find((l) => l.title === "My Layer");
  await view.whenLayerView(layer);

  // Assign layer and view to chart
  chartElement.layer = layer;
  chartElement.view = view;

  // Create a bar chart model
  const { BarChartModel } = await $arcgis.import(
    "@arcgis/charts-components/model",
  );

  const model = new BarChartModel();
  model.layer = layer;

  chartElement.model = model;
</script>

WebChart 仕様（JSON 設定）を使用したチャート

const chartElement = document.querySelector("arcgis-chart");
chartElement.layer = layer;
chartElement.view = view;

// WebChart JSON specification
chartElement.model = {
  type: "bar",
  title: { visible: true, text: "Population by State" },
  series: [
    {
      type: "bar",
      query: {
        orderByFields: ["Population DESC"],
        groupByFieldsForStatistics: ["State"],
        outStatistics: [
          {
            statisticType: "sum",
            onStatisticField: "Population",
            outStatisticFieldName: "TotalPop",
          },
        ],
      },
      x: "State",
      y: "TotalPop",
    },
  ],
};

円グラフ

const { PieChartModel } = await $arcgis.import(
  "@arcgis/charts-components/model",
);

const model = new PieChartModel();
model.layer = layer;

const chartElement = document.querySelector("arcgis-chart");
chartElement.layer = layer;
chartElement.view = view;
chartElement.model = model;

折れ線グラフ

const { LineChartModel } = await $arcgis.import(
  "@arcgis/charts-components/model",
);

const model = new LineChartModel();
model.layer = layer;

const chartElement = document.querySelector("arcgis-chart");
chartElement.layer = layer;
chartElement.view = view;
chartElement.model = model;

arcgis-charts-action-bar コンポーネント

チャート操作（エクスポート、選択、フィルタリング、ズーム）用のツールバーを提供します。

セットアップ

<div style="position: relative; width: 600px; height: 400px;">
  <arcgis-chart id="my-chart"></arcgis-chart>
  <arcgis-charts-action-bar id="my-action-bar"></arcgis-charts-action-bar>
</div>

<script type="module">
  const chart = document.querySelector("#my-chart");
  const actionBar = document.querySelector("#my-action-bar");

  // Connect action bar to chart
  actionBar.chartElement = chart;
</script>

アクションバーの主なプロパティ

プロパティ	属性	型	デフォルト値	説明
chartElement	chart-element	ArcgisChart	-	チャートコンポーネントへの参照
expanded	expanded	boolean	false	アクションバーを展開するかどうか
exportAsImageState	export-as-image-state	string	"enabled"	画像エクスポートボタンの状態
exportAsCSVState	export-as-csv-state	string	"enabled"	CSV エクスポートボタンの状態
filterByExtentState	filter-by-extent-state	string	"enabled"	範囲でフィルターボタンの状態
filterBySelectionState	filter-by-selection-state	string	"enabled"	選択でフィルターボタンの状態
zoomState	zoom-state	string	"enabled"	ズームボタンの状態
forceDisableActions	force-disable-actions	boolean	false	すべてのアクションを一括で無効化
hiddenActions	-	DefaultChartActions[]	-	非表示にするアクションの配列

アクションの状態には、"enabled"、"disabled"、または "hidden" を指定できます。

選択とフィルタリング

チャートとマップ間で選択を同期する

const chart = document.querySelector("arcgis-chart");
chart.syncSelection = true;
chart.layer = layer;
chart.view = view;

// Listen for selection changes
chart.addEventListener("arcgisSelectionChange", () => {
  console.log("Selection changed:", chart.selectionData);
});

マップの範囲でチャートをフィルタリングする

const chart = document.querySelector("arcgis-chart");
chart.filterByExtent = true;
chart.view = view;
chart.layer = layer;

実行時のデータフィルター

const chart = document.querySelector("arcgis-chart");
chart.runtimeDataFilters = {
  where: "Population > 100000",
  orderByFields: ["Population DESC"],
};

エクスポート

画像としてエクスポートする

const chart = document.querySelector("arcgis-chart");
await chart.exportAsImage("png"); // "png", "jpg", or "svg"

CSV としてエクスポートする

const chart = document.querySelector("arcgis-chart");
await chart.exportAsCSV();

カスタムフォーマッター

データラベルフォーマッター

const chart = document.querySelector("arcgis-chart");
chart.dataLabelFormatter = (value, field) => {
  if (typeof value === "number") {
    return value.toLocaleString("en-US", {
      style: "currency",
      currency: "USD",
    });
  }
  return String(value);
};

ツールチップフォーマッター

chart.tooltipFormatter = (tooltipData) => {
  return `<b>${tooltipData.category}</b>: ${tooltipData.value.toLocaleString()}`;
};

軸ラベルフォーマッター

chart.xAxisLabelFormatter = (value) => {
  // Truncate long labels
  return String(value).length > 15
    ? String(value).slice(0, 12) + "..."
    : String(value);
};

CDN を使用した完全な例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Chart from Feature Layer</title>
    <script src="https://js.arcgis.com/5.0/"></script>
    <script
      type="module"
      src="https://js.arcgis.com/5.0/charts-components/"
    ></script>
    <script
      type="module"
      src="https://js.arcgis.com/5.0/map-components/"
    ></script>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        display: flex;
      }
      arcgis-map {
        flex: 1;
      }
      #chart-panel {
        width: 400px;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <arcgis-map id="map" item-id="YOUR_WEBMAP_ID">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
    </arcgis-map>
    <div id="chart-panel">
      <arcgis-chart id="chart"></arcgis-chart>
      <arcgis-charts-action-bar id="action-bar"></arcgis-charts-action-bar>
    </div>

    <script type="module">
      const mapElement = document.querySelector("#map");
      const chartElement = document.querySelector("#chart");
      const actionBar = document.querySelector("#action-bar");

      await mapElement.viewOnReady();
      const view = mapElement.view;
      const layer = view.map.layers.getItemAt(0);
      await view.whenLayerView(layer);

      const { BarChartModel } = await $arcgis.import(
        "@arcgis/charts-components/model",
      );

      const model = new BarChartModel();
      model.layer = layer;

      chartElement.layer = layer;
      chartElement.view = view;
      chartElement.model = model;
      chartElement.syncSelection = true;

      actionBar.chartElement = chartElement;
    </script>
  </body>
</html>

よくある落とし穴

1. layer プロパティがない：チャートには、レイヤーのデータソースが必要です。layer を指定せずに model のみを設定すると、空のチャートが表示されます。

   // Anti-pattern: model without layer
   chartElement.model = new BarChartModel();
   

   // Correct: set both layer and model
   const model = new BarChartModel();
   model.layer = layer;
   chartElement.layer = layer;
   chartElement.model = model;
   

   影響： チャートの枠と軸は描画されますが、データは表示されません。

2. チャートコンポーネントが読み込まれていない：チャートパッケージは、CDN 経由で明示的に読み込むか、インポートする必要があります。

   
   <script src="https://js.arcgis.com/5.0/"></script>
   <arcgis-chart></arcgis-chart>
   

   
   <script src="https://js.arcgis.com/5.0/"></script>
   <script
     type="module"
     src="https://js.arcgis.com/5.0/charts-components/"
   ></script>
   <arcgis-chart></arcgis-chart>
   

   影響： arcgis-chart 要素が定義されず、空のインライン要素として描画されます。

3. model を HTML 属性として設定している：model プロパティは複雑なオブジェクトを受け取るため、HTML 属性ではなく JavaScript で設定する必要があります。

   影響： 属性値は無視され、チャートにデータが表示されません。

4. view を指定せずに filterByExtent を使用している：範囲によるフィルタリングには、現在のマップ範囲を追跡するための view プロパティが必要です。

   // Anti-pattern: filterByExtent without view
   chart.filterByExtent = true;
   chart.layer = layer;
   

   // Correct: set view for extent filtering
   chart.filterByExtent = true;
   chart.layer = layer;
   chart.view = view;
   

   影響： フィルターの参照先となる範囲がないため、エラーが発生したり、すべてのデータが表示されたりすることがあります。

5. アクションバーが接続されていない：アクションバーには、チャート要素への参照が必要です。

   // Anti-pattern: action bar without chart reference
   const actionBar = document.querySelector("arcgis-charts-action-bar");
   // Missing: actionBar.chartElement = chartElement;
   

   影響： アクションバーボタンは表示されますが、クリックしても何も起こりません。

参考サンプル

• arcade-execute-chart - Arcade 式を実行し、結果からチャートを作成します
• featurereduction-cluster-popup-chart - クラスターポップアップ内のチャート
• featurereduction-cluster-pie-charts - 円グラフによるクラスターの表現
• visualization-pie-chart - 円グラフによる可視化

関連スキル

• チャートデータを提供する FeatureLayer の設定については、arcgis-layers を参照してください。
• チャートが参照する MapView の設定については、arcgis-core-maps を参照してください。
• チャートデータの計算に使用する Arcade 式については、arcgis-arcade を参照してください。
• チャートパネルを配置するレイアウトコンポーネントについては、arcgis-widgets-ui を参照してください。