Перейти к основному содержимому
Обновлено: 

Как вставить в письмо круговую диаграмму

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

Diagram

Диаграмма создаётся в три этапа:

1. Создайте поле для хранения координат

Все данные для диаграммы должны храниться в одном поле анкеты. Чтобы создать поле:

  1. В разделе Подписчики → Анкеты откройте любую анкету и нажмите «Добавить поле».

    Важно

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

    Анкеты и работа с данными

  2. Введите название поля, выберите тип «Свободный ввод». Количество символов указывайте, ориентируясь на количество данных для диаграммы. Нажмите «Добавить».

    How to create a field

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

    How to copy field name

2. Импортируйте значения для диаграммы

Теперь данные диаграмм для всех получателей нужно импортировать в систему.

Есть два формата записи координат (для наглядности значения каждого сектора выделены тем же цветом, что и сам сектор на диаграмме):

Запись по строкам (формат bygraph)
Bygraph format

Запись по столбцам (формат bypoint)
Bypoint-format
Запомните, какой формат вы выбрали (bygraph или bypoint), — его нужно будет указать при добавлении диаграммы в письмо. У всех получателей диаграммы значения должны быть записаны в одном формате. На внешний вид диаграммы формат не влияет — дело только в удобстве.

Важно

Так как запись занимает несколько строк, данные в поле анкеты нужно загружать только через API. При импорте через интерфейс значения соберутся в одну строку, и при создании диаграммы возникнет ошибка.

Как импортировать данные через API

Вот пример того, как может выглядеть API-запрос для загрузки данных:

{
"action": "member.set",
"email": "email-адрес подписчика",
"datakey": [
["[% anketa.custom.data %]", "push", ["США", "2,5"]],
["[% anketa.custom.data %]", "push", ["Китай", "1,5"]],
["[% anketa.custom.data %]", "push", ["Россия", "0,5"]],
["[% anketa.custom.data %]", "push", ["Германия", "0,5"]]
]
}

Следите, чтобы у получателей были все нужные данные: если для какого-то сектора не указано значение, диаграмма подтянет его из следующего сектора, и значения остальных секторов тоже съедут. Если у подписчика совсем нет данных, письмо ему отправится без диаграммы.

3. Добавьте диаграмму в письмо

Чтобы вставить диаграмму, нужно в HTML-код выпуска вставить фрагмент кода с настройками диаграммы и функцией PROScript. Сначала мы объясним на картинке, за какие настройки отвечают разные строки кода, а после дадим код целиком, чтобы его можно было скопировать в письмо.

Для наглядности значения каждого сектора выделены тем же цветом, что и сам сектор на диаграмме.

HTML code for diagram

Код для копирования:

[% params = {
"data_format" => "bygraph",
"type" => "pie",
"title" => "Состав фонда",
"3d" => 0,
"show_pie_labels" => 1,
"show_pie_percent" => 1,
"colors" => [
"#FF0000",
"#4169E1",
"#008000",
"#8A2BE2",
],
} %]

<img src="[% draw_graph(params, data_by_graphs) %]">

Перед отправкой выпуска проверьте, как диаграмма отображается в письме:

  1. В HTML-редакторе нажмите на иконку любого устройства (под адресной строкой браузера) — откроется режим предпросмотра, который показывает, как будет выглядеть письмо на разных устройствах.
  2. Выберите в столбике слева пункт «Посмотреть письмо с данными конкретного подписчика», введите почту любого подписчика и нажмите «Применить».