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

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

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

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

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

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

   Важно

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

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

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

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

   

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

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

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

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

Запись по столбцам (формат bypoint)

Запомните, какой формат вы выбрали (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. Сначала мы объясним на картинке, за какие настройки отвечают разные строки кода, а после дадим код целиком, чтобы его можно было скопировать в письмо.

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

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

[% 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. Выберите в столбике слева пункт «Посмотреть письмо с данными конкретного подписчика», введите почту любого подписчика и нажмите «Применить».