Наверх

Вставка диаграмм, таблиц и показателей

В этом разделе

  1. Создание таблицы
  2. Отображение ключевых показателей
  3. Линейчатые диаграммы
  4. Круговые диаграммы
  5. Диаграммы-графики
  6. Диаграммы рассеивания
  7. Диаграммы JSON

Создание визуализаций данных с использованием диаграмм, таблиц и суммарной статистики. Эти типы визуализаций применяются для отображения ключевых статистических данных и тенденций. Участники Инициативы и команды сайта могут создавать визуализации данных, используя частные и общедоступные наборы данных. Только люди, у которых есть доступ к данным, смогут просматривать диаграмму или статистику при входе в ArcGIS Hub.

Для начала работы войдите в ArcGIS Hub и выберите Сайты на странице Обзор, чтобы увидеть список своих сайтов. Если у вашей организации есть лицензия ArcGIS Hub Premium, вы можете найти свои сайты в списке Инициативы на странице Обзор.

Подсказка:

Вы также можете редактировать сайт при просмотре в браузере. Убедитесь, что вы вошли в ArcGIS Hub, и найдите кнопку редактирования слева от вашего сайта.

Создание таблицы

Используйте карточку Текст, чтобы организовать информацию в таблице.

Подсказка:

Если вы хотите создать таблицу с использованием HTML, используйте вид Код в параметрах текстовой карточки, чтобы вставить код.

  1. Перетащите карточку Баннер в имеющуюся строку.
  2. Наведите курсор на карточку и выберите кнопку настроек, чтобы перейти в режим редактирования.
  3. Выберите опцию таблицы.
  4. Выберите число ячеек, необходимых для столбцов и строк.
  5. После задания размера вашей таблицы щелкните, чтобы добавить её. Добавьте или удалите строки или столбцы, щелкая внутри ячейки и нажимая кнопки вставки или удаления строк или столбцов. Выберите кнопку удаления, чтобы удалить таблицу полностью.

    Подсказка:

    Чтобы добавить заголовок, выберите верхнюю строку вашей таблицы и кнопку Переключить заголовок таблицы. Заголовки упрощают работу с содержимым таблицы тем, кто использует вспомогательные методы для работы с таблицами.

  6. Выберите Сохранить.

Отображение ключевых показателей

Используйте карточку Суммарная статистика для отображения ключевых индикаторов производительности и др. Можно настроить для карточки использование динамического или статического значения. Динамические значения генерируются запросом к наборам данных и автоматически обновляются при обновлении набора данных. Статические значения вводятся и обновляются вручную. Только пользователи, для которых опубликована суммарная статистика, могут просматривать ее.

  1. Перетащите карточку Суммарная статистика в существующую строку.
  2. Наведите курсор на карточку и выберите кнопку редактирования. Для параметра Тип выберите Динамические или Статические.
  3. Для Динамических карточек нажмите Выбрать ресурсы, выберите набор данных и нажмите Добавить. Выберите Слой/таблица и в качестве значения Атрибут выберите поле набора данных.
  4. Для параметра Агрегирование, выберите тип операции, которая будет выполняться для выбранного поля.
    • Для текстовых полей и полей дат выберите между количеством, минимумом и максимумом.
    • Для числовых полей выберите количество, сумму, минимум, максимум, среднеквадратическое отклонение или дисперсию.
  5. Чтобы добавить дополнительный (необязательный) фильтр, включите Атрибутивные фильтры. Выберите атрибут, тип и параметры фильтра (зависят от типа поля). Чтобы удалить фильтр, выберите кнопку Больше действий больше действий.
  6. Для Статических карточек введите Отобразить значение.
  7. При необходимости включите Форматирование, введите отображаемые единицы и выберите их размещение.
  8. В разделе Расширенная конфигурация (только Динамические) при необходимости установите Время ожидания сервера (чтобы у более крупных или медленных сервисов было больше времени на ответ).
  9. В разделе Детали введите Заголовок, Подзаголовок и Завершающий текст, если это необходимо. Чтобы ввести ссылку на набор данных статистики, включите Отобразить ссылку на источник (только динамический). На действующем сайте эта ссылка приведет на страницу сведений об элементе в качестве страницы предварительного просмотра.

    Подсказка:
    Если вы показываете завершающий текст, убедитесь, что цвет текста контрастирует с фоновым цветом строки.

  10. В Оформлении выберите тип выравнивания и цвет текста для статистики.
  11. В разделе Общий доступ вы можете включить общий доступ (пользователи могут копировать и делиться прямой ссылкой на эту карточку на странице). Если включен общий доступ, вы можете настроить для кнопки Общий доступ ее отображение только при наведении на нее курсора, или ее постоянное отображение.
  12. Выберите Сохранить.

Линейчатые диаграммы

Используйте карточку Диаграмма и создайте линейчатую диаграмму для суммирования и сравнения категорийных данных.

  1. Перетащите карточку Диаграмма в существующую строку.
  2. Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
  3. Линейчатая диаграмма является выбором по умолчанию.
  4. Щелкните Добавить данные.
  5. Выберите элемент в доступных сервисах данных.
  6. Для Выбрать атрибут категории выберите в данных первичный элемент диаграммы.

    В диаграммах могут использоваться числовые и строковые поля. По умолчанию при выборе атрибута категории итоговая диаграмма будет учитывать этот атрибут.

  7. Дополнительно Выберите атрибут значений, чтобы выбрать числовое поле, которое будет служить метрикой значений для атрибута категории. Когда выбор будет сделан, статистической операцией в этом поле будет сумма. Вы можете изменить настройки Статистической операции, используя ниспадающее меню справа от переключателя Выбрать атрибут значений. Атрибут значений поддерживает значения Мин., Макс., Сумма, Среднее и Число. Когда выбрано Число, атрибут значения отменяется (потому что нет необходимости в дополнительном поле для указания атрибута категории).

    В диаграммах могут использоваться числовые и строковые поля. По умолчанию при выборе атрибута категории итоговая диаграмма будет учитывать этот атрибут.

  8. Нажмите меню Опции, чтобы настроить отображении диаграммы с помощью следующих настроек:
    • Опция Сортировка позволяет выбрать, какие атрибутивные данные будут показаны. Выберите атрибут и затем щелкните кнопку сортировки рядом с атрибутом, чтобы показать данные в порядке возрастания или убывания.
    • Задайте значение высоты (в пикселах) для диаграммы в текстовом поле Высота (пикс).
    • Чтобы показать заголовок диаграммы, щелкните кнопку переключателя Заголовок диаграммы. При показе заголовка введите его имя в текстовом поле и выберите способ выравнивания.
    • Настройте Основной цвет диаграммы, указав цветовой код , или выбрав его на палитре.
    • Введите текст для полей Подпись категории и Подпись значения.
  9. Настройте параметр Время ожидания на подключение к серверу (секунды) на более высокое значение (для больших сервисов), чтобы предоставить службе больше времени на ответ.
  10. Щелкните Сохранить.

Круговые диаграммы

Используйте карточку Диаграмма и создайте круговую диаграмму для иллюстрации, как отдельные части связаны со всем набором. Используйте круговую диаграмму, когда в данных есть только несколько категорий.

  1. Перетащите карточку Диаграмма в существующую строку.
  2. Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
  3. Выберите круговую диаграмму, щелкнув соответствующую кнопку.
  4. Щелкните Добавить данные.
  5. Выберите элемент в доступных сервисах данных.
  6. Для Выбрать атрибут категории выберите в данных первичный элемент диаграммы.

    В диаграммах могут использоваться числовые и строковые поля. По умолчанию при выборе атрибута категории итоговая диаграмма будет учитывать этот атрибут.

  7. Дополнительно Выберите атрибут значений, чтобы выбрать числовое поле, которое будет служить метрикой значений для атрибута категории. Когда выбор будет сделан, статистической операцией в этом поле будет сумма. Вы можете изменить Статистическую операцию, используя ниспадающий список справа от переключателя Выбрать атрибут значений. Атрибут значений поддерживает значения Мин., Макс., Сумма, Среднее и Число. Когда выбрано Число, атрибут значения отменяется (потому что нет необходимости в дополнительном поле для указания атрибута категории).

    В диаграммах могут использоваться числовые и строковые поля. По умолчанию при выборе атрибута категории итоговая диаграмма будет учитывать этот атрибут.

  8. Нажмите меню Опции, чтобы настроить отображении диаграммы с помощью следующих настроек:
    • Опция Сортировка позволяет выбрать, какие атрибутивные данные будут показаны. Выберите атрибут и затем щелкните кнопку сортировки рядом с атрибутом, чтобы показать данные в порядке возрастания или убывания.
    • Задайте значение высоты (в пикселах) для диаграммы в текстовом поле Высота (пикс).
    • Чтобы показать заголовок диаграммы, щелкните кнопку переключателя Заголовок диаграммы. При показе заголовка введите его имя в текстовом поле и выберите способ выравнивания.
    • Настройте текст Подписи категории для надписывания каждого сектора в виде подсказки и текст Подписи значения для надписывания единиц изменения в подсказке.
  9. Настройте параметр Время ожидания на подключение к серверу (секунды) на более высокое значение (для больших сервисов), чтобы предоставить службе больше времени на ответ.
  10. Щелкните Сохранить.

Диаграммы-графики

Используйте карточку Диаграмма и создайте диаграмму-график для визуализации изменений в непрерывном диапазоне, например времени или расстояния.

  1. Перетащите карточку Диаграмма в существующую строку.
  2. Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
  3. Выберите диаграмму-график, щелкнув соответствующую кнопку.
  4. Щелкните Добавить данные.
  5. Выберите элемент в доступных сервисах данных.
  6. Для Выбрать атрибут категории выберите в данных первичный элемент диаграммы.

    В диаграммах могут использоваться числовые и строковые поля. По умолчанию при выборе атрибута категории итоговая диаграмма будет учитывать этот атрибут.

  7. Дополнительно Выберите атрибут значений, чтобы выбрать числовое поле, которое будет служить метрикой значений для атрибута категории. Когда выбор будет сделан, статистической операцией в этом поле будет сумма. Вы можете изменить Статистическую операцию, используя ниспадающий список справа от переключателя Выбрать атрибут значений. Атрибут значений поддерживает значения Мин., Макс., Сумма, Среднее и Число. Когда выбрано Число, атрибут значения отменяется (потому что нет необходимости в дополнительном поле для указания атрибута категории).

    В диаграммах могут использоваться числовые и строковые поля. По умолчанию при выборе атрибута категории итоговая диаграмма будет учитывать этот атрибут.

  8. Нажмите меню Опции, чтобы настроить отображении диаграммы с помощью следующих настроек:
    • Опция Сортировка позволяет выбрать, какие атрибутивные данные будут показаны. Выберите атрибут и затем щелкните кнопку сортировки рядом с атрибутом, чтобы показать данные в порядке возрастания или убывания.
    • Задайте значение высоты (в пикселах) для диаграммы в текстовом поле Высота (пикс).
    • Чтобы показать заголовок диаграммы, щелкните кнопку переключателя Заголовок диаграммы. При показе заголовка введите его имя в текстовом поле и выберите способ выравнивания.
    • Настройте Основной цвет диаграммы, указав цветовой код , или выбрав его на палитре.
    • Настройте текст Подписи категории для надписывания каждого точки в виде подсказки и текст Подписи значения для надписывания единиц метрики в подсказке.
  9. Настройте параметр Время ожидания на подключение к серверу (секунды) на более высокое значение (для больших сервисов), чтобы предоставить службе больше времени на ответ.
  10. Щелкните Сохранить.

Диаграммы рассеивания

Используйте карточку Диаграмма и создайте диаграмму рассеивания, чтобы показать взаимосвязь между двумя числовыми переменными. Отобразите одну переменную на оси X, а другую переменную на оси Y.

  1. Перетащите карточку Диаграмма в существующую строку.
  2. Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
  3. Выберите диаграмму-график, щелкнув соответствующую кнопку.
  4. Щелкните Добавить данные.
  5. Выберите элемент в доступных сервисах данных.
  6. Нажмите Выбрать атрибут оси Х, чтобы выбрать из данных первичный элемент диаграммы.

    В диаграммах могут использоваться числовые и строковые поля. По умолчанию при выборе атрибута категории итоговая диаграмма будет учитывать этот атрибут.

  7. Выберите атрибут для поля Выберите атрибут оси Y. Выберите числовое поле, которое будет служить метрикой значений для атрибута категории.

    В диаграммах могут использоваться числовые и строковые поля. По умолчанию при выборе атрибута категории итоговая диаграмма будет учитывать этот атрибут.

  8. Нажмите меню Опции, чтобы настроить отображении диаграммы с помощью следующих настроек:
    • Опция Сортировка позволяет выбрать, какие атрибутивные данные будут показаны. Выберите атрибут и затем щелкните кнопку сортировки рядом с атрибутом, чтобы показать данные в порядке возрастания или убывания.
    • Задайте значение высоты (в пикселах) для диаграммы в текстовом поле Высота (пикс).
    • Чтобы показать заголовок диаграммы, щелкните кнопку переключателя Заголовок диаграммы. При показе заголовка введите его имя в текстовом поле и выберите способ выравнивания.
    • Настройте Основной цвет диаграммы, указав цветовой код, или выбрав его на палитре.
    • Настройте подписи для Подпись оси X и Подпись оси Y, чтобы они показывались в диаграмме.
  9. Настройте параметр Время ожидания на подключение к серверу (секунды) на более высокое значение (для больших сервисов), чтобы предоставить службе больше времени на ответ.
  10. Щелкните Сохранить.

Диаграммы JSON

Используйте карточку Диаграмма и создайте пользовательскую диаграмму с помощью JSON, используя определенную спецификацию диаграммы.

  1. Перетащите карточку Диаграмма в существующую строку.
  2. Наведите курсор на карточку и щелкните кнопку настроек, чтобы перейти в режим редактирования.
  3. Выберите заголовок JSON.
  4. Введите JSON в поле Спецификация диаграммы JSON.
  5. Дополнительно, в разделе Опции можно включить/отключить или настроить Заголовок диаграммы и Высоту (в пикселах).
  6. Настройте параметр Время ожидания на подключение к серверу (секунды) на более высокое значение (для больших сервисов), чтобы предоставить службе больше времени на ответ.
  7. Щелкните Сохранить.

Наборы данных

Массив наборов данных задает URL-адрес сервиса объектов ArcGIS и параметры запроса. Обратитесь к документации 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"}
      }
  ]
}

Пример диаграммы временной шкалы

Примечание:
Категорией должно быть поле datetime.

 {
  "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"
      }
    }
  ]
}

Отзыв по этому разделу?

В этом разделе
  1. Создание таблицы
  2. Отображение ключевых показателей
  3. Линейчатые диаграммы
  4. Круговые диаграммы
  5. Диаграммы-графики
  6. Диаграммы рассеивания
  7. Диаграммы JSON