Это продолжение моей предыдущей статьи Начало работы с настраиваемыми визуальными элементами 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.
Запустив код, вы получите визуализацию!
Надеюсь, это руководство было вам полезно.