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

チャート、テーブル、および要約統計量を使用して、データの視覚化を行います。このような種類の視覚化は、主要な統計情報と傾向を表示するのに役立ちます。イニシアティブおよびサイトのチームメンバーは、プライベートデータセットとパブリックデータセットを使用してデータを視覚化できます。 ArcGIS Hub にサインインすると、データの共有相手となっているユーザーだけがチャートまたは統計情報を表示できるようになります。

操作を開始するには、ArcGIS Hub にサインインし、[概要] ページの [サイト] を選択してサイトのリストを表示します。組織が ArcGIS Hub Premium のライセンスを保有している場合は、[概要] ページの [イニシアティブ] でリストの中からサイトを検索できます。

ヒント:

サイトをブラウザーで表示しているときに編集することもできます。 ArcGIS Hub にサインインしていて、サイトの左側に編集ボタンが表示されていることを確認してください。

テーブルの作成

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

ヒント:

HTML を使用してテーブルを作成する場合は、テキストカードオプションの [コード] ビューを使用してコードを挿入します。

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

主要なメトリクスの表示

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

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

バーチャート

[チャート] カードを使用して、バーチャートを作成すると、カテゴリに分類されたデータを集約して比較することができます。

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

パイチャート

[チャート] カードを使用して、パイチャートを作成すると、個々のパートがセット全体にどのように関連しているかを示すことができます。パイチャートは、データ内にカテゴリが少ししか存在しない場合に使用します。

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

ラインチャート

[チャート] カードを使用して、ラインチャートを作成すると、時間や距離など、連続的な範囲での変化を視覚化することができます。

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

散布図

[チャート] カードを使用して、散布図を作成すると、2 つの数値変数間のリレーションシップを表示することができます。 1 つの変数を X 軸に表示し、もう 1 つの変数を Y 軸に表示します。

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

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 チャート

データセット

系列

オーバーライド

仕様

バー チャートの例

水平バー チャートの例

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

注意:

散布図チャートの例

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

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

注意:

このトピックの内容

バーチャート

パイチャート

ラインチャート

バーチャートの例

水平バーチャートの例

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

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