Руководство. Добавление параметров форматирования в визуальный элемент "Карточка круга"

  • Статья

При создании визуального элемента можно добавить параметры настройки его свойств. Некоторые элементы, которые можно настроить для настройки форматирования, включают:

  • Заголовок
  • Общие сведения
  • Граница
  • Тень
  • Цвета

В этом руководстве описано следующее:

  • Добавьте свойства форматирования в визуальный элемент.
  • Упаковка визуального элемента
  • Импорт пользовательского визуального элемента в отчет Power BI Desktop или service

Необходимые условия

В этом руководстве объясняется, как добавить в визуальный элемент общие свойства форматирования. Мы будем использовать визуальный элемент Circle карта в качестве примера. Мы добавим возможность изменить цвет и толщину круга. Если у вас нет папки проекта Circle карта, созданной в этом руководстве, перед продолжением выполните повторную инструкцию.

Добавление параметров форматирования

  1. В PowerShell перейдите в папку проекта карта круга и запустите визуальный элемент карта круга. Теперь визуальный элемент запущен во время размещения на компьютере.

    pbiviz start

  2. В Power BI выберите панель "Формат".

    Вы должны увидеть общие параметры форматирования, но не параметры визуального форматирования.

    Screenshot of formatting panel with only general formatting options.

  3. В Visual Studio Code откройте capabilities.json файл.

  4. Перед массивом dataViewMappings добавьте объекты.

    "objects": {},

    Screenshot of capabilities file with empty objects array.

  5. Сохраните файл capabilities.json.

  6. В Power BI снова просмотрите параметры форматирования.

    Примечание.

    Если параметры форматирования не отображаются, выберите "Перезагрузить настраиваемый визуальный элемент".

    Screenshot of general and visual formatting options on the formatting pane.

  7. Установите для параметра Title значение Off. Обратите внимание, что визуальный элемент больше не отображает имя меры в левом верхнем углу.

    Screenshot of visualizations pane with the Title switch turned off.

    Screenshot of circle card visual without the title row.

Добавление настраиваемых параметров форматирования

Теперь добавим новую группу с именем цвета для настройки цвета круга и толщины контура круга.

  1. В PowerShell введите ctrl+C , чтобы остановить пользовательский визуальный элемент.

  2. В Visual Studio Code в capabilities.json файле вставьте следующий фрагмент JSON в объекты, помеченные объектом.

        "circle": {
        "properties": {
            "circleColor": {
                "type": {
                    "fill": {
                        "solid": {
                            "color": true
                        }
                    }
                }
            },
            "circleThickness": {
                "type": {
                    "numeric": true
                }
            }
        }
    }

    Этот фрагмент JSON описывает группу с именем circle, которая состоит из двух переменных — circleColor и circleThickness.

  3. Сохраните файл capabilities.json.

  4. В области Обозреватель перейдите в папку src и выберите settings.ts. Этот файл представляет параметры для начального визуального элемента.

  5. В файле замените settings.ts строки импорта и два класса следующим кодом.

    import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

import FormattingSettingsCard = formattingSettings.SimpleCard;
import FormattingSettingsSlice = formattingSettings.Slice;
import FormattingSettingsModel = formattingSettings.Model;

export class CircleSettings extends FormattingSettingsCard{
    public circleColor = new formattingSettings.ColorPicker({
        name: "circleColor",
        displayName: "Color",
        value: { value: "#ffffff" },
        visible: true
    });

    public circleThickness = new formattingSettings.NumUpDown({
        name: "circleThickness",
        displayName: "Thickness",
        value: 2,
        visible: true
    });

    public name: string = "circle";
    public displayName: string = "Circle";
    public visible: boolean = true;
    public slices: FormattingSettingsSlice[] = [this.circleColor, this.circleThickness]
}

export class VisualSettings extends FormattingSettingsModel {
    public circle: CircleSettings = new CircleSettings();
    public cards: FormattingSettingsCard[] = [this.circle];
}

    Этот модуль определяет два класса. Класс Circle Параметры определяет два свойства с именами, которые соответствуют объектам, определенным в файле capabilities.json (circleColor и circleThickness), и задает значения по умолчанию. Класс Visual Параметры определяет объект круга в соответствии со свойствами, описанными в capabilities.json файле.

  6. Сохраните файл settings.ts.

  7. Откройте файл visual.ts.

  8. visual.ts В файле импортируйте :

    import { VisualSettings } from "./settings";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";

    и в классе Visual добавьте следующие свойства:

    private visualSettings: VisualSettings;
private formattingSettingsService: FormattingSettingsService;

    Это свойство сохраняет ссылку на объект Visual Параметры, описывающий визуальные параметры.

  9. В классе Visual вставьте следующую строку конструктора:

    this.formattingSettingsService = new FormattingSettingsService();

  10. В классе Visual добавьте следующий метод после метода обновления.

    public getFormattingModel(): powerbi.visuals.FormattingModel {
    return this.formattingSettingsService.buildFormattingModel(this.visualSettings);
}

    Эта функция вызывается для каждой отрисовки области форматирования. Он позволяет выбрать объекты и свойства, которые вы хотите предоставить пользователям в области свойств.

  11. В методе обновления после объявления переменной радиуса добавьте следующий код.

    this.visualSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettings, options.dataViews);
this.visualSettings.circle.circleThickness.value = Math.max(0, this.visualSettings.circle.circleThickness.value);
this.visualSettings.circle.circleThickness.value = Math.min(10, this.visualSettings.circle.circleThickness.value);

    Этот код извлекает параметры формата. Он корректирует любое значение, переданное в свойство circleThickness , и преобразует его в число от нуля до 10.

    Screenshot of setting circle thickness to between zero and 10.

  12. В элементе circle измените значения, передаваемые в стиль заливки и стиль ширины штриха следующим образом:

    .style("fill", this.visualSettings.circle.circleColor.value.value)

    .style("stroke-width", this.visualSettings.circle.circleThickness.value)

    Screenshot of circle elements.

  13. Сохраните файл visual.ts.

  14. В PowerShell запустите визуальный элемент.

    pbiviz start

  15. В Power BI на панели инструментов, плавающей над визуальным элементом, выберите переключатель автозагрузки.

    Screenshot of Toggle Auto Reload icon.

  16. В параметрах визуального формата разверните " Круг".

    Screenshot of the final circle card visuals format pane elements.

    Измените цвет и толщину.

Измените параметр толщины на значение меньше нуля и значение выше 10. Обратите внимание, что визуальный элемент обновляет значение до допустимого минимума или максимума.

Отладка

Советы по отладке пользовательского визуального элемента см. в руководстве по отладке.

Упаковка пользовательского визуального элемента

Теперь, когда визуальный элемент завершен и готов к использованию, пришло время упаковать его. Упакованный визуальный элемент можно импортировать в отчеты или службы Power BI, которые будут использоваться другими пользователями.

Когда визуальный элемент готов, следуйте указаниям в пакете визуального элемента Power BI, а затем, если вы хотите, поделитесь им с другими пользователями, чтобы они могли импортировать и наслаждаться им.

Связанный контент