Написание кода визуализации
Вспомогательная библиотека Студии данных предоставляет интерфейс для работы с сервисом. Чтобы использовать библиотеку, настройте функцию callback, которая обрабатывает данные визуализации.
Наиболее важная функция библиотеки – subscribeToData, она принимает два аргумента: callback (функция, обрабатывающая данные визуализации) и options (объект, определяющий, какие преобразования данных необходимо выполнить). Подробная информация приведена в Справке по библиотеке.
Ниже показано, как должен выглядеть код JavaScript визуализации.
function drawViz(vizData){
var height = dscc.getHeight();
var width = dscc.getWidth();
console.log(vizData);
// this is where you write your viz code
}
dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})
При создании визуализации необходимо учитывать следующее:
Функция subscribeToData передает сообщение, если изменились настройки данных/стиля или размер окна iframe.
Пример:
// create and add the canvas
// do this one time
var canvasElement = document.createElement('canvas');
var ctx = canvasElement.getContext('2d');
canvasElement.id = 'myViz';
document.body.appendChild(canvasElement);
function drawViz(data){
// clear the canvas
var ctx = canvasElement.getContext('2d');
ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
// viz code goes here
}
Студия данных загружает и запускает файлы JavaScript (не HTML). Все операции DOM должны быть реализованы в JavaScript.
Ниже приведен пример кода, в котором элемент div определяется и добавляется к элементу DOM.
// create and add the canvas
var chartElement = document.createElement('div');
chartElement.id = 'myViz';
document.body.appendChild(chartElement);
Группировка кода
Для сторонней визуализации Студии данных можно загрузить только один файл JavaScript, включающий вспомогательную библиотеку dscc, другие используемые библиотеки JavaScript и код визуализации.
Чтобы сделать это в Bash, воспользуйтесь командой cat, как показано ниже.
cat dscc.min.js vizLibrary.js myVizSource.js > myViz.js
Определение манифеста
Манифест содержит метаданные визуализации и информацию о расположении ее ресурсов. В качестве названия папки с манифестом необходимо указать идентификатор компонента, который используется для загрузки визуализации.
Параметр devMode определяет настройки кеширования. Во время разработки визуализации параметр devMode должен иметь значение true, чтобы при принудительном обновлении загружалась последняя версия ресурсов. Завершив написание кода, измените значение devMode на false, чтобы отчеты с вашей визуализацией загружались быстрее. Подробнее…
Что дальше
Создав визуализацию, вы можете загрузить ее.