Написание кода визуализации
Вспомогательная библиотека Студии данных предоставляет интерфейс для работы с сервисом. Чтобы использовать библиотеку, настройте функцию 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
, чтобы отчеты с вашей визуализацией загружались быстрее. Подробнее…
Что дальше
Создав визуализацию, вы можете загрузить ее.