Как встроить визуализацию Tableau в веб-сайт

Отредактировано 3 несколько месяцев назад от ExtremeHow Редакционная команда

TableauВеб-встраиваниеВизуализация данныхБизнес-аналитикаВеб-разработкаИнтеграцияАналитикаWindowsMacHTML

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

Понимание вариантов встраивания Tableau

Прежде чем переходить к техническим процедурам, важно понять, что такое встраивание. Когда вы встраиваете визуализацию Tableau, вы фактически интегрируете часть интерактивных данных непосредственно в веб-страницу. Это может быть отчет, панель или любое визуальное представление данных, созданное с помощью Tableau.

Основные методы, с помощью которых вы можете встроить визуализации Tableau:

1. Использование Tableau Public.
2. Использование Tableau Server или Tableau Cloud.
3. Использование JavaScript API Tableau.

Использование Tableau Public

Tableau Public — это бесплатная платформа, на которой пользователи могут публично делиться визуализациями Tableau. Чтобы использовать этот метод, давайте выполним следующие шаги:

1. Создайте визуализацию в Tableau Desktop.
2. Опубликуйте ее в Tableau Public.
3. Получите код встраивания из Tableau Public.

Шаг 1: Создайте визуализацию в Tableau Desktop

Начните с создания обширной визуализации в Tableau Desktop. Убедитесь, что ваши данные чисты, а визуализация точно отражает историю, которую вы хотите рассказать. Когда вы будете удовлетворены визуализацией, вы готовы к публикации.

Шаг 2: Опубликуйте в Tableau Public

В Tableau Desktop нажмите меню "Файл", а затем выберите "Сохранить в Tableau Public как...". Вам нужно будет войти в свой аккаунт Tableau Public. Если у вас нет аккаунта, вам нужно будет зарегистрироваться бесплатно. После входа в систему ваша визуализация будет загружена в Tableau Public.

Шаг 3: Получите код встраивания

Когда ваша визуализация окажется в Tableau Public, откройте ее в веб-браузере. Там будет кнопка "Поделиться" (часто под названием "Share"), обычно расположенная ближе к нижней части окна. Нажав на эту кнопку, вы увидите несколько вариантов поделиться вашей визуализацией. Выберите опцию "Код встраивания". Это предоставит вам HTML-фрагмент, который вы можете вставить на свой веб-сайт.

<iframe src="https://public.tableau.com/views/YourViz here" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Скопируйте и вставьте этот код iframe в HTML-страницу, на которой вы хотите, чтобы отображалась визуализация.

Использование Tableau Server или Tableau Cloud

Если вы используете Tableau Server или Tableau Cloud, у вас больше возможностей для управления доступом к вашим визуализациям, чем в Tableau Public. Эти платформы предоставляют возможности встраивания наряду с безопасностью и аутентификацией пользователей, но основные шаги для встраивания остаются несколько схожими.

Шаг 1: Опубликуйте свою визуализацию на Tableau Server или Tableau Cloud

Создайте свою визуализацию в Tableau Desktop и опубликуйте ее на своем Tableau Server или Cloud. Выберите в главном меню опцию «Сервер», затем выберите «Опубликовать книгу» и следуйте инструкциям.

Шаг 2: Получите код встраивания

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

Tableau Server или Tableau Cloud обычно предоставляют код встраивания в виде iframe, или вы можете настроить его с использованием JavaScript API. Пример кода iframe, предоставляемого Tableau, может выглядеть так:

<iframe src="https:///views/YourViz here" width="800" height="600" frameborder="0"></iframe>

Поместите этот код в HTML веб-сайта, на котором вы хотите, чтобы отображалась визуализация.

Использование JavaScript API Tableau

Для более сложных потребностей встраивания JavaScript API Tableau предоставляет большую гибкость и контроль. Это позволяет вам программно взаимодействовать с визуализациями.

Шаг 1: Включите JavaScript API Tableau в ваш HTML

Сначала убедитесь, что ваша веб-страница включает библиотеку JavaScript API Tableau. Добавьте следующую строку в раздел <head> вашего HTML-документа:

<script type="text/javascript" src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>

Шаг 2: Создайте контейнер для визуализации

Создайте заполнитель или контейнер в вашем HTML-файле для размещения визуализации Tableau. Обычно это элемент <div> с заданной шириной и высотой.

<div id="tableauViz" style="width: 800px; height: 600px;"></div>

Шаг 3: Инициализация и встраивание визуализации

С помощью JavaScript вы можете инициализировать и встроить визуализации Tableau на страницу. Пример скрипта:

<script type="text/javascript">
  var containerDiv = document.getElementById("tableauViz"),
      url = "https://public.tableau.com/views/YourDashboard here",
      options = {
          width: containerDiv.style.width,
          height: containerDiv.style.height,
          hidetabs: true,
          hideToolbar: true
      };

  viz = new tableau.Viz(containerDiv, url, options);
</script>

Скрипт выше указывает на <div> на странице с идентификатором "tableauViz". Он загружает визуализацию Tableau из указанного URL и применяет индивидуальные параметры, такие как скрытие вкладок и панели инструментов по умолчанию.

Реализация безопасности и аутентификации

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

Некоторые параметры безопасности, которые вы можете рассмотреть, включают встраивание с аутентификацией по SAML, включение доверенной аутентификации, которая позволяет обойти вход на Tableau Server, или использование OAuth.

Работа с адаптивным дизайном

Если веб-сайт адаптивный, возможно, вам нужно будет обеспечить, чтобы встроенная визуализация тоже была адаптивной и подходила для разных экранов устройств. Один из способов достижения этого — динамическая настройка iframe или контейнера div с помощью CSS и JavaScript.

Пример адаптивного CSS

<style>
  #tableauViz {
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* соотношение сторон 16:9 */
      position: relative;
  }
</style>

Приведенный выше пример CSS позволит вашей визуализации сохранять соотношение сторон 16:9 на всех устройствах, используя трюк с "padding-bottom", который является распространенной техникой в адаптивном веб-дизайне.

Заключительные мысли

Встраивание визуализаций Tableau в веб-сайт добавляет ценные, интерактивные данные непосредственно на вашу веб-страницу. Независимо от того, используете ли вы Tableau Public для свободно доступных данных, полагаетесь на Tableau Server или Cloud для корпоративных сценариев или используете JavaScript API для индивидуальных решений, у вас есть различные варианты для интеграции мощных визуализаций Tableau в вашу веб-среду.

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

  Поделиться этой статьей

Если вы найдете что-то неправильное в содержании статьи, вы можете запросить обновление