RSS
19 октября 2015 
gromych Вы можете быть в курсе, что фреймворк JavaScript d3.js делает потрясающие визуализации, которые легко смогут сделать практикующие HTML5 и разработчики Qlik Sense, которые попробуют его в работе. Я настоятельно рекомендую посмотреть d3js.org, если Вы еще не сделали этого, и получить удовольствие от просмотра интерактивной галереи. Я думаю, что быстрый взгляд на галерею вызовет у Вас сильное желание перенести визуализации d3.js в Qlik Sense (просто для удовольствия). Если это так, то Вам повезло, как я как раз собирался показать быстрый пример с использованием Qlik Sense Desktop в несколько простых шагов.
- Установите Qlik Sense Desktop
- Запустите приложение Qlik Sense Desktop
- Откройте Workbench, редактор расширений Qlik Sense, указав Ваш браузер на «https://localhost:4848/workbencheditor/». Вы должны увидеть что-то вроде этого:
Рис. 1 Qlik Sense Workbench
- Найдите интересующую Вас визуализацию на d3.js например, эту, озаглавленную Cluster Force Layout IV (от Майк Босток в https://bl.ocks.org/mbostock), на которой я основываю этот пример.
- Просмотрите источник этой страницы на https://bl.ocks.org/mbostock/raw/7882658/, чтобы открыть код JavaScript. Вы можете сделать это, щелкнув правой кнопкой на страницу с Вашего браузера и выбрав «View page source» (Посмотреть источник страницы), я использую Google Chrome. Теперь Вы должны увидеть что-то вроде этого:
Рис. 2 Визуализация исходного кода
- Создайте новый проект в Workbench, выбрав кнопку «New» (Новый). Назовите расширение «ForceCluster» и выберите «chart-template» (шаблон графика). Workbench автоматически создаст файл JavaScript и файл Qext. Файл JavaScript отвечает за поведение и рендеринг, файл Qext просто содержит метаданные о Вашем расширении, например, имя, версию и автора.
- Скопируйте все внутри тега сценария в источнике страницы (как показано на скриншоте выше) и вставьте его в тело функции рисования. Первые несколько строк функции покраски должны быть следующими:
Рис. 3 Измененные функции покраски
- Теперь мы должны выполнить небольшой фокус, чтобы подправить код, так чтобы фреймворк d3.js смог найти объект расширения на странице. Чтобы сделать это, найдите следующую строку:
(от Speros для поста под названием «Учебник: Как создать расширение Qlik Sense с D3» на https://blog.axc.net/?p=1617)
- Выберите «Save all» (Сохранить все) на панели инструментов Workbench.
- После того, как мы перенесем визуализацию d3.js мы должны импортировать фреймворк d3.js, так чтобы Qlik Sense Desktop смог найти ее. Укажите Ваш браузер https://d3js.org/d3.v3.min.js~~HEAD=dobj~~V и сохраните страницу как d3.v3.min.js на локальной машине.
- Теперь импортируйте файл JavaScript в Ваше расширение проекта, выбрав кнопку «Import Asset» (Импортировать свойство) (
), расположенную в левом верхнем углу области Workbench и посмотрите на файл, который Вы только что сохранили. - Наконец, в первой строке файла ForceCluster.js замените следующие символы:
- [«jquery»] на
["jquery", "extensions/ForceCluster/d3.v3.min"]
Так на фреймворк d3.js можно будет ссылаться в коде JavaScript.
- Ваша анимированная визуализация теперь готова к использованию. В Qlik Sense Desktop создайте новое приложение, затем новый лист, отредактируйте последний и перетащите диаграмму «ForceCluster» из панели инструментов графика на левой стороне в область редактирования. Если предположить, что Вы создали источник данных для своего приложения, выберите размер и меру (они на самом деле не будут использоваться в данном примере, я расскажу, в будущем посте почему).
Рис. 5 Результирующая интерактивная визуализация
Спасибо за то, что прочли нашу статью. Это был первый очень простой пример, с которого легко начать. В конце концов, конечно, Вы захотите иметь возможность привязывать визуализации к некоторым реальным данным, загруженным в Qlik Sense, добавлять ярлыки и делать выбор. Подробнее обо всем этом я расскажу в другом посте.
Найти решение у бизнес-партнера QlikTech (QlikView) в России.
Форум разработчиков QlikView и Qlik Sense. Получите ответы на все вопросы по QlikView и Qlik Sense!
Опубликовано в рубрике