Поделиться через

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

  • Статья

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

  • Титул
  • Фон
  • Граница
  • Тень
  • Цвета

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

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

Предпосылка

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

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

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

    pbiviz start

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

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

    снимок экрана: панель форматирования с общими параметрами форматирования.

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

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

    "objects": {},

    снимок экрана файла возможностей с пустым массивом объектов.

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

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

    Заметка

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

    снимок экрана: общие и визуальные параметры форматирования на панели форматирования.

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

    снимок экрана области визуализаций с отключенным параметром

    скриншот круговой карточки без строки заголовка.

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

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

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

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

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

    Этот фрагмент JSON описывает группу, называемую кругом, которая состоит из двух переменных — 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];
}

    Этот модуль определяет два класса. Класс CircleSettings определяет два свойства с именами, которые соответствуют объектам, определенным в файле capabilities.json (circleColor и circleThickness) и задает значения по умолчанию. Класс VisualSettings определяет объект круга в соответствии со свойствами, описанными в файле 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;

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

  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[0]);
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.

    снимок экрана: настройка толщины круга от нуля до 10.

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

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

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

    снимок экрана с элементами круга.

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

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

    pbiviz start

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

    снимок экрана: значок автоматического переключения перезагрузки.

  16. В параметрах визуального формата, разверните опцию Circle.

    Снимок экрана элементов панели формата окончательных круговых карточек.

    Измените параметр цвета и толщины и.

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

Отладка

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

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

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

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

Связанное содержимое