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

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

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

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

Подсказка:

Чтобы создать таблицу с использованием HTML, выберите </> Редактировать в HTML на карточке Текст.

Для создания таблицы выполните следующие шаги:

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

    Подсказка:

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

  7. Выберите Сохранить компоновку.

Отображение сводного показателя

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

Чтобы отобразить сводный показатель, выполните следующие шаги:

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

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

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

Отображение линейчатой, круговой диаграммы, диаграммы-графика или диаграммы рассеяния

Используйте карточку Диаграмма для создания и отображения различных типов диаграмм. Используйте Линейчатую диаграмму для суммирования и сравнения категориальных данных. Используйте Диаграмму-график для визуализации изменений в непрерывном диапазоне, например, времени или расстояния. Используйте Круговую диаграмму, чтобы проиллюстрировать, как отдельные части соотносятся с целым набором, когда в данных содержится всего несколько категорий. Используйте Диаграмму рассеяния для отображения отношений между двумя числовыми переменными, отображая одну из них по оси x, а другую – по оси y.

Чтобы отобразить одну из этих диаграмм, выполните следующие шаги:

  1. Откройте сайт или страницу в режиме редактирования.
  2. На панели Настройка щелкните Компоновка.
  3. Перетащите карточку Диаграмма в существующую строку.
  4. Выберите Тип диаграммы (по умолчанию выбрана Линейчатая диаграмма).
  5. Выберите Найти элемент.
  6. Выберите элемент из доступных сервисов данных и выберите слой или таблицу (при необходимости).
  7. Выберите Сохранить.
  8. Для Выбрать атрибут категории выберите в данных первичный элемент диаграммы.

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

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

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

  10. Откройте меню Опции, чтобы настроить отображение диаграммы с помощью следующих настроек:
    • Сортировка позволяет выбрать, какие атрибутивные данные будут показаны. Выберите атрибут и затем щелкните кнопку сортировки рядом с атрибутом, чтобы показать данные в порядке возрастания или убывания.
    • Высота (пиксели) позволяет задать значение высоты (в пикселях) для вашей диаграммы.
    • Заголовок диаграммы позволяет отобразить заголовок для вашей диаграммы. При показе заголовка введите имя и выберите способ выравнивания.
    • Для Основной цвет диаграммы укажите цветовой код или воспользуйтесь палитрой цветов, чтобы выбрать нужный цвет.
    • Для Линейчатой диаграммы введите Подпись категории и Подпись значения.
    • Для Диаграммы-графика введите Подписи категории для каждой точки и Подписи значения для показателя (показано в подсказке).
    • Для Круговой диаграммы введите Подписи категории для каждого сегмента круговой диаграммы и Подписи значения для показателя (показано в подсказке).
    • Для Точечных диаграмм введите Подпись оси X и Подпись оси Y, чтобы они показывались в диаграмме.
  11. Настройте параметр Время ожидания на подключение к серверу (секунды) на более высокое значение (для больших сервисов), чтобы предоставить службе больше времени на ответ.
  12. Выберите Сохранить компоновку.

Отображение диаграммы JSON

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

Чтобы отобразить диаграмму JSON, выполните следующие шаги:

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

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

Массив наборов данных задает 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"
      }
    }
  ]
}