チャート、テーブル、メトリクスの挿入—ArcGIS Hub

チャート、テーブル、サマリー統計を使用して、データの視覚化を行います。このような種類の視覚化は、サイトやページで主要な統計情報と傾向を表示するのに役立ちます。サイトの所有者と編集グループのメンバーは、プライベートデータセットとパブリックデータセットを使用してデータを視覚化できます。サイトまたはページにサインインすると、データが共有されているユーザーのみがチャートまたは統計情報を表示できます。

テーブルの作成

[テキスト] カードを使用して、テーブル内の情報を整理します。

ヒント:

HTML を使用してテーブルを作成するには、[テキスト] カードで [</> HTML で編集] を選択します。

テーブルを作成するには、次の手順を実行します:

サイトまたはページを編集モードで開きます。
[カスタマイズ] パネルで [レイアウト] を選択します。
[テキスト] カードを既存の行にドラッグします。
テーブルオプションを選択します。
各行と列に配置するセルの数を選択し、クリックしてテーブルを挿入します。
行や列を追加または削除するには、セルを選択し、行または列の挿入または削除ボタンを選択します。テーブル全体を削除するには、削除ボタンを選択します。
ヒント:
ヘッダーを追加するには、テーブルの一番上の行を選択して、[テーブルヘッダーの切り替え] ボタンを選択します。ヘッダーによって、補助テクノロジを使用するユーザーがテーブルのコンテンツ間を移動しやすくなります。
[レイアウトの保存] を選択します。

サマリーメトリックの表示

[統計情報のサマリー] カードを使用すると、主要業績評価指標 (KPI) などを表示できます。動的または静的な値を使用するようにカードを構成できます。動的な値は、データセットクエリーから生成され、データセットが更新されると自動的に更新されます。静的な値は手動で入力および更新されます。統計情報のサマリーが共有されているユーザーのみが統計情報を表示できます。

サマリーメトリックを表示するには、次の手順を実行します:

サイトまたはページを編集モードで開きます。
[カスタマイズ] パネルで [レイアウト] を選択します。
[統計情報のサマリー] カードをドラッグして既存の行に配置します。
[タイプ] で、[動的] または [静的] を選択します。
動的なカードの場合は、[コンテンツの選択] を選択し、データセットを選択して [追加] を選択します。[レイヤー/テーブル] を選択し、[属性] で、データセットからフィールドを選択します。
[集約] で、選択したフィールドに対して実行する操作の種類を選択します。
- テキストフィールドと日付フィールドの場合は、個数、最小、または最大を選択します。
- 数値フィールドの場合は、個数、最小、最大、合計、平均、標準偏差、または分散を選択します。
さらにオプションのフィルターを追加するには、[属性フィルター] をオンにし、属性、フィルタータイプ、およびパラメーター (フィールドタイプによって異なる) を選択します。フィルターを削除するには、[その他のアクション] ボタンを選択します。
静的なカードの場合は、[表示値] を入力します。
必要に応じて [書式設定] をオンにして、表示する単位を入力し、それらの単位の位置を選択します。
[詳細構成] (動的のみ) で、必要に応じて [サーバータイムアウト] (大規模なサービスや低速のサービスの応答時間を延長できる) を設定します。
[詳細] で、必要に応じて [タイトル]、[サブタイトル]、[末尾のテキスト] を入力します。統計のデータセットへのリンクを指定するには、[ソースリンクの表示] (動的のみ) をオンにします。ライブサイトでは、このリンクをクリックすると、アイテムの詳細ページがプレビューページとして表示されます。
ヒント:
末尾のテキストを表示する場合、そのテキストが行の背景色と対照的な色であることを確認します。
[表示設定] で、統計情報の配置タイプとテキストの色を選択します。
[共有] で、共有を有効化できます (ユーザーはこのページ上のこのカードへの直接リンクをコピーして共有できます)。共有を有効化すると、ホバー時のみ、または常に表示されるように共有ボタンを設定できます。
[保存] を選択します。

ラインチャート、バーチャート、パイチャート、または散布図チャートの表示

[チャート] カードを使用すると、さまざまなチャートタイプを作成して表示できます。 [バーチャート] を使用すると、カテゴリーに分類されたデータを集約して比較できます。 [ラインチャート] を使用すると、時間や距離など、連続的な範囲での変化を視覚化できます。 [パイチャート] を使用すると、データ内にカテゴリーが少ししか存在しない場合に、個々のパートがセット全体にどのように関連するかを示すことができます。 [散布図] を使用すると、2 つの数値変数の関係性を示すことができます。1 つの変数が X 軸に表示され、もう 1 つの変数が Y 軸に表示されます。

これらのチャートのいずれかを表示するには、次の手順を実行します:

サイトまたはページを編集モードで開きます。
[カスタマイズ] パネルで [レイアウト] を選択します。
[チャート] カードをドラッグして既存の行に配置します。
[チャートタイプ] を選択します (デフォルトでは [バーチャート] が選択されています)。
[アイテムの検索] を選択します。
利用可能なデータサービスからアイテムを選択し、レイヤーまたはテーブルを選択します (必要な場合)。
[保存] を選択します。
[カテゴリー属性の選択] には、データから主要なチャートアイテムを選択します。
チャートでは数値フィールドおよび文字列フィールドが使用できます。デフォルトでは、カテゴリー属性を選択すると、作成されるチャートはこの属性の数になります。
必要に応じて、[値属性の選択] から、カテゴリー属性の値 (メートル) となる数値フィールドを選択します。このフィールドのデフォルトの統計操作は、[合計] となります。 [値属性の選択] の下にあるドロップダウンメニューを使用して、操作を変更できます。値属性では、[最小]、[最大]、[合計]、[平均]、[数] がサポートされています。 [数] を選択すると、値属性は選択されません (カテゴリー属性をカウントするための追加フィールドは必要ないためです)。
チャートでは数値フィールドおよび文字列フィールドが使用できます。デフォルトでは、カテゴリー属性を選択すると、作成されるチャートはこの属性の数になります。
[オプション] メニューを開き、以下の設定を使用してチャートの表示をカスタマイズします。
- [並べ替え] を使用すると、属性データの表示方法を選択できます。属性を選択してから、その属性の横にある並べ替えボタンをクリックして、昇順または降順でデータを表示します。
- [高さ (px)] を使用すると、チャートの高さの値 (ピクセル) を設定できます。
- [チャートのタイトル] を使用すると、チャートのタイトルを表示できます。タイトルを表示する場合、名前を入力し、配置を選択します。
- [プライマリーチャートの色] で、カラーコードを入力するか、カラーパレットを使用して色を選択します。
- [バーチャート] の場合、[カテゴリーラベル] と [値ラベル] を入力します。
- [ラインチャート] の場合、各ポイントの [カテゴリーラベル] と、メトリックの [値ラベル] (ツールチップに表示される) を入力します。
- [パイチャート] の場合、各パイウェッジの [カテゴリーラベル] と、メトリックの [値ラベル] (ツールチップに表示される) を入力します。
- [散布図] の場合、チャートに表示する [X 軸ラベル] と [Y 軸ラベル] を入力します。
サービスの応答時間を長くするには、[サーバー接続タイムアウト (秒)] の値を大きく設定します (サービスが多数の場合)。
[レイアウトの保存] を選択します。

JSON チャートの表示

[チャート] カードで、特定のチャート仕様を使用して、JSON からカスタムチャートを作成します。

JSON チャートを表示するには、次の手順を実行します:

サイトまたはページを編集モードで開きます。
[カスタマイズ] パネルで [レイアウト] を選択します。
[チャート] カードをドラッグして既存の行に配置します。
[JSON] チャートを選択します。
[JSON チャート定義] フィールドに JSON を入力します。
必要に応じて、[オプション] セクションで、[チャートのタイトル] および [高さ] 設定 (ピクセル) の有効化または無効化、カスタマイズを行うことができます。
サービスの応答時間を長くするには、[サーバー接続タイムアウト (秒)] の値を大きく設定します (サービスが多数の場合)。
[レイアウトの保存] を選択します。

データセット

データセット配列により、ArcGIS フィーチャサービスの URL とクエリーパラメーターが指定されます。クエリーパラメーターの詳細については、REST API ドキュメントをご参照ください。

{ "datasets": [ { "url": "SampleArcGISFeatureService_URL", "name" : "Number_of_SUM",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}

シリーズ

シリーズ配列では、サービスの応答とチャートの視覚的側面におけるフィールド間のマッピングを指定できます (X 軸、Y 軸、散布図チャートの色およびサイズ、パイチャートの半径)。

{ "series": [ { "source": "Number_of_SUM", "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" }} ] }

オーバーライド

オーバーライドプロパティでは、チャート全体に色や配置などの視覚的なオーバーライドを指定できます。

"overrides": {
      "legend": {
          "enabled": true
      },
      "backgroundColor": "#E6E6FA",
      "backgroundAlpha": 1
  }
}

仕様

仕様プロパティでは、カスタムチャートの Cedar 仕様全体を入力できます。既存のチャート仕様の例を表示します。

バーチャートの例

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": {"field": "Number_of_SUM", "label": "Number of Students"},
      "source": "Number_of_SUM"
    }
  ]
}

水平バーチャートの例

{
  "type": "bar-horizontal",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": {"field": "Number_of_SUM", "label": "Number of Students"},
      "source": "Number_of_SUM"
    }
  ],
  "overrides": {
    "categoryAxis": {
      "labelRotation": -45
    }
  }
}

グループ化されたバーチャートの例

注意:

各シリーズはグループに一致します。

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

散布図チャートの例

{
  "type": "scatter",
  "datasets": [ {
    "url": "https://services1.arcgis.com/bqfNVPUK3HOnCFmA/arcgis/rest/services/Demographics_(Median_Household_Income)/FeatureServer/0"
  }],
  "series": [
    {
      "category": {"field": "TotalPop2015", "label": "Population"},
      "value": {"field": "MedianHHIncome2015", "label": "Median Median Household Income"}
    }
  ]
}

バブル散布図チャートの例

{
  "type": "scatter",
  "datasets": [
    {
      "url":"https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0"
    }
  ],
  "series": [
    {
        "category": {"field": "Number_of", "label": "Number of Teachers"},
        "value": {"field": "F_of_teach", "label": "Fraction of Teachers"},
        "size": {"field": "Not_Taught", "label": "Number not Taught"}
      }
  ]
}

タイムラインチャートの例

注意:

カテゴリーは日時フィールドである必要があります。

 {
  "type": "timeline",
  "datasets": [
    {
      "url": "https://services.arcgis.com/bkrWlSKcjUDFDtgw/arcgis/rest/services/DC_Crashes/FeatureServer/0",
      "query": {
        "where": "REPORTDATE > '2008-10-01' AND REPORTDATE < '2008-11-01'",
        "orderByFields": "REPORTDATE ASC",
        "sqlFormat": "standard"
      }
    }
  ],
  "series": [
    {
      "category": {
        "field": "REPORTDATE",
        "label": "Date"
      },
      "value": {
        "field": "MAJORINJURIES",
        "label": "Major Injuries"
      }
    }
  ]
}

このトピックへのフィードバック

テーブルの作成

ヒント:

ヒント:

サマリー メトリックの表示

ヒント:

ライン チャート、バー チャート、パイ チャート、または散布図チャートの表示

JSON チャートの表示

データセット

シリーズ

オーバーライド

仕様

バー チャートの例

水平バー チャートの例

グループ化されたバー チャートの例

注意:

散布図チャートの例

バブル散布図チャートの例

タイムライン チャートの例

注意:

このトピックの内容

サマリーメトリックの表示

ラインチャート、バーチャート、パイチャート、または散布図チャートの表示

バーチャートの例

水平バーチャートの例

グループ化されたバーチャートの例

タイムラインチャートの例