Создание карты-изображения диаграммы

Введение

Стандарты HTML позволяют указывать активные точки на изображении веб-страницы с помощью карты изображений . Эти горячие точки можно использовать для отображения наведения текста или в качестве ссылок, или вы даже можете добавить обработку событий JavaScript, чтобы обеспечить интерактивность. Например, наведите указатель мыши на полосы и метки осей на следующем изображении:

Эти горячие точки создаются с помощью HTML-элементов <map> и <area> . API диаграммы может возвращать все координаты, необходимые для создания карты горячих точек, как описано далее.

Создание карты для вашей диаграммы

Если вы добавите параметр chof=json в URL-адрес диаграммы, вы получите обратно строку JSON, содержащую все данные, необходимые для создания карты изображений для вашей диаграммы. Затем вы можете добавить ссылки на определенные разделы диаграммы или прикрепить функции JavaScript к событиям кликов, чтобы сделать диаграмму более интерактивной. Обратите внимание, что не все типы диаграмм поддерживают это; подробности см. в документации по конкретной диаграмме.

Инструмент на этой странице поможет вам сгенерировать HTML-код для карты изображений. Вы можете встроить этот HTML-код на свою страницу навсегда или даже скопировать наш код на свою страницу, а затем запросить и сгенерировать карту «на лету», если ваша страница позволяет пользователю динамически изменять карту на странице.

Вот как использовать этот инструмент для создания карты:

  1. Получите выходные данные JSON для своей диаграммы: добавьте chof=json к URL-адресу диаграммы, перейдите по этому URL-адресу в браузере и скопируйте возвращенный текст.
  2. Вставьте скопированный вами текст JSON в текстовое поле ниже с пометкой «Вывод JSON» и нажмите «Создать карту».
  3. Вставьте сгенерированный код карты на свою страницу.
  4. Обновите сгенерированный код, указав уникальное имя для вашего элемента <map> .
  5. Удалите все ненужные элементы карты (например, отдельные столбцы, фрагменты, метки или элементы осей).
  6. Обновите атрибуты href в сгенерированных элементах <area> .
  7. Добавьте атрибут usemap="# MAP_NAME " в свой элемент <img> , заменив имя вашей карты на MAP_NAME .

    Важно! Обязательно добавляйте к значению usemap префикс «#». Например: usemap="#mymap" . В этом случае имя карты — «mymap», а не «#mymap».

Формат строки JSON

Вот формат JSON, возвращаемый при указании chof=json :

  • Корневой объект под названиемchartshape . Этот объект содержит массив объектов, каждый из которых представляет одну область на карте изображений диаграммы. Каждый объект имеет следующие свойства:
    • name — имя для этой конкретной области. Общее соглашение об именах: elementtype _ series# _ item# . Например: bar0_0 для области, описывающей первый столбец в первой серии, или axis0_1 для области, описывающей метку второй оси на оси X.
    • type — Форма этой области. В зависимости от типа диаграммы это будет одно из следующих значений: RECT, CIRCLE или POLY. Это эквивалентно атрибуту shape тега <area> .
    • coords — числовой массив, описывающий площадь; эквивалентен атрибуту coords тега <area> .