Это продолжение моей предыдущей статьи Начало работы с настраиваемыми визуальными элементами Power BI.

Я изо всех сил пытался добавить внешние JS-библиотеки в пользовательские визуальные эффекты. Итак, я подумал написать несколько простых шагов, которые могут помочь новичку начать свое путешествие в удивительный мир визуализации и JS.

Вы можете клонировать GitHub Repo или следовать за ним. Вы также можете получить файл набора данных csv здесь.

Если вы новичок, вы можете обратиться к другому моему сообщению в блоге, которое расскажет вам об основах настраиваемых визуальных эффектов в PowerBI.

В этой статье я сосредоточусь на добавлении внешнего файла js и его использовании в файле Visual.ts. Я буду использовать chart.js для этого руководства, и вы можете выполнить те же действия для любой другой библиотеки js.

Создать новый проект

Чтобы создать новый проект, введите следующие команды в командное окно

pbiviz new myVisual
cd myVisual
npm install

Команда «npm install» завершает установку необходимых пакетов, объявленных в файле «package.json».

Установить внешнюю библиотеку JS

Откройте командное окно и введите

npm install chart.js --save
npm install @types/chart.js --save

Первая команда установит библиотеку chart.js, а вторая команда установит типизацию для chart.js. Файл * .d.ts содержит все объявления для функций в файле js.

После этого вам нужно добавить файл JS в массив externalJS в файле pbiviz.json.

Использование внешнего JS

Теперь я создам образец визуализации. Для этой визуализации я буду использовать csv внутри папки данных, но вы можете использовать любой другой набор данных. Давайте начнем!

Выберите визуализацию, а затем добавьте значения данных для визуализации. Затем добавьте элемент HTML (строки 6–10), который будет отображать диаграмму.

Чтобы увидеть визуализацию, напишем код в функции обновления. В приведенной ниже сути строка 3 извлекает данные из объекта параметров, а затем обрабатывает их, чтобы их могли использовать функции chart.js.

Строка 11 - сложная часть, обратите на нее внимание. Эта линия устанавливает объект диаграммы из chart.js в глобальную область окна javascript. Мы должны были отлить его, чтобы использовать его. Таким образом вы можете использовать любую библиотеку JS.

Вы можете узнать больше о chart.js из их документации, это забавный и простой способ добавить диаграммы настройки. Строки 13–38 предоставляют chart.js данные, необходимые для построения диаграммы. Я не буду вдаваться в подробности chart.js.

Запустив код, вы получите визуализацию!

Надеюсь, это руководство было вам полезно.