Руководство. Создание линейчатой диаграммы

Статья
05/13/2024

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

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

Определение возможностей визуального элемента
Общие сведения о исходном коде, используемом для создания визуального элемента
Отрисовка визуального элемента
Добавление объектов в область свойств
Упаковка визуального элемента

Настройка среды

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

Учетная запись Power BI Pro или Premium на пользователя (PPU). Если у вас ее нет, зарегистрируйтесь, чтобы воспользоваться бесплатной пробной версией.
Visual Studio Code (VS Code); VS Code — это идеальная интегрированная среда разработки (IDE) для разработки приложений JavaScript и TypeScript.
Windows PowerShell версии 4 или более поздней версии (для Windows). Или терминал (для Mac).
Среда, готовая к разработке визуального элемента Power BI. Настройте среду для разработки визуального элемента Power BI.
В этом руководстве используется отчет по анализу продаж США. Вы можете скачать этот отчет и отправить его в служба Power BI или использовать собственный отчет. Если вам нужна дополнительная информация о служба Power BI и отправке файлов, ознакомьтесь с руководством по созданию служба Power BI.

Примечание.

Если библиотека JavaScript D3 не была установлена в процессе установки, установите ее сейчас. В PowerShell запустите npm i d3@latest --save

Создание визуального элемента линейчатой диаграммы включает в себя следующие действия.

Создание нового проекта
Определение файла возможностей —capabilities.json
Создание визуального API
Упаковка визуального элемента -pbiviz.json

Создание нового проекта

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

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

Откройте PowerShell и перейдите в папку, в которой вы хотите создать проект.
Введите следующую команду:
```
pbiviz new BarChart
```
Теперь у вас должна быть папка с именем BarChart , содержащая файлы визуального элемента.
В VS Code откройте файл [tsconfig.json] (visual-project-structure.md#tsconfigjson) и измените имя файла "files" на "src/barChart.ts".
```
"files": [
"src/barChart.ts"
]
```
Объект tsconfig.json "files" указывает на файл, в котором находится основной класс визуального элемента.

Окончательный tsconfig.json файл должен выглядеть следующим образом.
Файл package.json содержит список зависимостей проекта. Замените файл package.json этим файлом.

git clone

Теперь у вас должна быть новая папка для визуального элемента со следующими файлами и папками:

Снимок экрана: структура визуальных элементов.

Подробное описание функции каждого из этих файлов см . в структуре визуального проекта Power BI.

Два файла, которые мы сосредоточимся на этом руководстве, — это файл capabilities.json , описывающий визуальный элемент узла, а также файл src/barchart.ts , содержащий API визуального элемента.

Определение возможностей

Файл capabilities.json находится в том месте, где мы привязываем данные к узлу. Мы описываем тип полей данных, которые он принимает и какие функции должен иметь визуальный элемент.

Снимок экрана: привязка данных в контейнере полей.

Определение ролей данных

Переменные определены и привязаны в dataRoles разделе файла возможностей. Мы хотим, чтобы линейчатая диаграмма принимала два типа переменных:

Категориальные данные, представленные различными линейками на диаграмме
Числовые или измеряемые данные, представленные высотой каждой полосы

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

    "dataRoles": [
        {
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }
    ],

Сопоставьте данные

Затем добавьте сопоставление данных, чтобы сообщить узлу, что делать с этими переменными:

Замените содержимое объекта dataViewMappings следующим кодом:

"dataViewMappings": [
        {
            "conditions": [
                {
                    "category": {
                        "max": 1
                    },
                    "measure": {
                        "max": 1
                    }
                }
            ],
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    }
                },
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "measure"
                            }
                        }
                    ]
                }
            }
        }
    ],

Приведенный выше код создает "условия", которые каждый объект роли данных может содержать только одно поле одновременно. Обратите внимание, что для ссылки на каждое поле используется внутренняя name роль данных.

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

Определение объектов для области свойств

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

Дополнительные сведения об объектах и их работе см. в разделе "Объекты".

Следующие объекты являются необязательными. Добавьте их, если вы хотите перейти к дополнительным разделам этого руководства, чтобы добавить цвета и отобразить ось X.

Замените содержимое раздела "объекты" следующим кодом:

     "objects": {
        "enableAxis": {
            "properties": {
                "show": {
                    "type": {
                        "bool": true
                    }
                },
                "fill": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        },
        "colorSelector": {
            "properties": {
                "fill": {
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        }
     },

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

Окончательный файл возможностей должен выглядеть так, как в этом примере.

Визуальный API

Все визуальные элементы начинаются с класса, реализующего IVisual интерфейс. Файл src/visual.ts — это файл по умолчанию, содержащий этот класс.

В этом руководстве мы называем файл IVisualbarChart.ts. Скачайте файл и сохраните его в папку /src , если это еще не сделано. В этом разделе мы подробно рассмотрим этот файл и описываем различные разделы.

Импорт

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

Следующие модули импортируются в файл barChart.ts :

import {
    BaseType,
    select as d3Select,
    Selection as d3Selection
} from "d3-selection";
import {
    ScaleBand,
    ScaleLinear,
    scaleBand,
    scaleLinear
} from "d3-scale";
import "./../style/visual.less";

import { Axis, axisBottom } from "d3-axis";

import powerbi from "powerbi-visuals-api";

type Selection<T extends BaseType> = d3Selection<T, any, any, any>;

// powerbi.visuals
import DataViewCategoryColumn = powerbi.DataViewCategoryColumn;
import Fill = powerbi.Fill;
import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
import ISelectionId = powerbi.visuals.ISelectionId;
import IVisual = powerbi.extensibility.IVisual;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import PrimitiveValue = powerbi.PrimitiveValue;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import DataViewObjectPropertyIdentifier = powerbi.DataViewObjectPropertyIdentifier;

import { textMeasurementService } from "powerbi-visuals-utils-formattingutils";
import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";

import { BarChartSettingsModel } from "./barChartSettingsModel";
import { dataViewObjects} from "powerbi-visuals-utils-dataviewutils";

Интерфейсы

Затем мы определим визуальные интерфейсы. Следующий интерфейс используется для описания визуального элемента линейчатой диаграммы:

BarChartDataPoint

Этот интерфейс определяется следующим образом:

/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {PrimitiveValue} value     - Data value for point.
 * @property {string} category          - Corresponding category of data value.
 * @property {string} color             - Color corresponding to data point.
 * @property {string} strokeColor       - Stroke color for data point column.
 * @property {number} strokeWidth       - Stroke width for data point column.
 * @property {ISelectionId} selectionId - Id assigned to data point for cross filtering
 *                                        and visual interaction.
 */
interface BarChartDataPoint {
    value: PrimitiveValue;
    category: string;
    color: string;
    strokeColor: string;
    strokeWidth: number;
    selectionId: ISelectionId;
}

Визуальное преобразование

Теперь, когда структура данных определена, необходимо сопоставить данные с ним с помощью createSelectorDataPoints функции. Эта функция получает данные из представления данных и преобразует его в формат, который может использовать визуальный элемент. В этом случае он возвращает интерфейс, описанный BarChartDataPoint[] в предыдущем разделе.

Содержит DataView данные для визуализации. Эти данные могут находиться в разных формах, таких как категориальные или табличные. Чтобы создать категориальный визуальный элемент, как линейчатая диаграмма, используйте категориальное свойство на диаграмме DataView.

Эта функция вызывается всякий раз, когда визуальный элемент обновляется.

/**
 * Function that converts queried data into a viewmodel that will be used by the visual.
 *
 * @function
 * @param {VisualUpdateOptions} options - Contains references to the size of the container
 *                                        and the dataView which contains all the data
 *                                        the visual had queried.
 * @param {IVisualHost} host            - Contains references to the host which contains services
 */
function createSelectorDataPoints(options: VisualUpdateOptions, host: IVisualHost): BarChartDataPoint[] {
    const barChartDataPoints: BarChartDataPoint[] = []
    const dataViews = options.dataViews;

    if (!dataViews
        || !dataViews[0]
        || !dataViews[0].categorical
        || !dataViews[0].categorical.categories
        || !dataViews[0].categorical.categories[0].source
        || !dataViews[0].categorical.values
    ) {
        return barChartDataPoints;
    }

    const categorical = dataViews[0].categorical;
    const category = categorical.categories[0];
    const dataValue = categorical.values[0];

    const colorPalette: ISandboxExtendedColorPalette = host.colorPalette;

    const strokeColor: string = getColumnStrokeColor(colorPalette);

    const strokeWidth: number = getColumnStrokeWidth(colorPalette.isHighContrast);

    for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
        const color: string = getColumnColorByIndex(category, i, colorPalette);

        const selectionId: ISelectionId = host.createSelectionIdBuilder()
            .withCategory(category, i)
            .createSelectionId();

        barChartDataPoints.push({
            color,
            strokeColor,
            strokeWidth,
            selectionId,
            value: dataValue.values[i],
            category: `${category.values[i]}`,
        });
    }

    return barChartDataPoints;
}

Примечание.

Следующие несколько функций в файле barChart.ts имеют дело с цветом и созданием оси X. Они являются необязательными и рассматриваются далее в этом руководстве. В этом руководстве будет продолжена IVisual функция.

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

После определения данных визуализируем визуальный элемент с помощью класса BarChart, реализующегоIVisual интерфейс. Интерфейс IVisual описан на странице Визуального API . Он содержит метод, который создает визуальный constructor элемент и update метод, который вызывается каждый раз при повторной загрузке визуального элемента. Перед отрисовкой визуального элемента необходимо объявить члены класса:

export class BarChart implements IVisual {
    private svg: Selection<SVGSVGElement>;
    private host: IVisualHost;
    private barContainer: Selection<SVGElement>;
    private xAxis: Selection<SVGGElement>;
    private barDataPoints: BarChartDataPoint[];
    private formattingSettings: BarChartSettingsModel;
    private formattingSettingsService: FormattingSettingsService;

    private barSelection: Selection<BaseType>;

    static Config = {
        xScalePadding: 0.1,
        solidOpacity: 1,
        transparentOpacity: 1,
        margins: {
            top: 0,
            right: 0,
            bottom: 25,
            left: 30,
        },
        xAxisFontMultiplier: 0.04,
    };
}

Создание визуального элемента

Функция конструктора вызывается только один раз, когда визуальный элемент отображается в первый раз. Он создает пустые контейнеры SVG для линейчатой диаграммы и оси X. Обратите внимание, что она использует библиотеку d3 для отрисовки SVG.

/**
     * Creates instance of BarChart. This method is only called once.
     *
     * @constructor
     * @param {VisualConstructorOptions} options - Contains references to the element that will
     *                                             contain the visual and a reference to the host
     *                                             which contains services.
     */
    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        //Creating the formatting settings service.
        const localizationManager = this.host.createLocalizationManager();
        this.formattingSettingsService = new FormattingSettingsService(localizationManager);

        this.svg = d3Select(options.element)
            .append('svg')
            .classed('barChart', true);

        this.barContainer = this.svg
            .append('g')
            .classed('barContainer', true);

        this.xAxis = this.svg
            .append('g')
            .classed('xAxis', true);
    }

Обновление визуального элемента

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

Масштабирование

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

Для вычисления масштаба мы используем scaleLinearscaleBand методы, импортированные ранее из библиотеки d3-scale .

Значение options.dataViews[0].categorical.values[0].maxLocal содержит наибольшее значение всех текущих точек данных. Это значение используется для определения высоты оси Y. Масштабирование для ширины оси x определяется числом категорий, привязанных к визуальному элементу в интерфейсе barchartdatapoint .

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

Другие функции обновления

Помимо масштабирования метод обновления также обрабатывает выделения и цвета. Эти функции являются необязательными и рассматриваются далее:

   /**
     * Updates the state of the visual. Every sequential databinding and resize will call update.
     *
     * @function
     * @param {VisualUpdateOptions} options - Contains references to the size of the container
     *                                        and the dataView which contains all the data
     *                                        the visual had queried.
     */
    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(BarChartSettingsModel, options.dataViews?.[0]);
        this.barDataPoints = createSelectorDataPoints(options, this.host);
        this.formattingSettings.populateColorSelector(this.barDataPoints);

        const width = options.viewport.width;
        let height = options.viewport.height;

        this.svg
            .attr("width", width)
            .attr("height", height);

        if (this.formattingSettings.enableAxis.show.value) {
            const margins = BarChart.Config.margins;
            height -= margins.bottom;
        }

        this.xAxis
            .style("font-size", Math.min(height, width) * BarChart.Config.xAxisFontMultiplier)
            .style("fill", this.formattingSettings.enableAxis.fill.value.value);

        const yScale: ScaleLinear<number, number> = scaleLinear()
            .domain([0, <number>options.dataViews[0].categorical.values[0].maxLocal])
            .range([height, 0]);

        const xScale: ScaleBand<string> = scaleBand()
            .domain(this.barDataPoints.map(d => d.category))
            .rangeRound([0, width])
            .padding(0.2);

        const xAxis: Axis<string> = axisBottom(xScale);

        this.xAxis.attr('transform', 'translate(0, ' + height + ')')
            .call(xAxis)
            .attr("color", this.formattingSettings.enableAxis.fill.value.value);

        const textNodes: Selection<SVGElement> = this.xAxis.selectAll("text");
        BarChart.wordBreak(textNodes, xScale.bandwidth(), height);

        this.barSelection = this.barContainer
            .selectAll('.bar')
            .data(this.barDataPoints);

        const barSelectionMerged = this.barSelection
            .enter()
            .append('rect')
            .merge(<any>this.barSelection);

        barSelectionMerged.classed('bar', true);

        barSelectionMerged
            .attr("width", xScale.bandwidth())
            .attr("height", (dataPoint: BarChartDataPoint) => height - yScale(<number>dataPoint.value))
            .attr("y", (dataPoint: BarChartDataPoint) => yScale(<number>dataPoint.value))
            .attr("x", (dataPoint: BarChartDataPoint) => xScale(dataPoint.category))
            .style("fill", (dataPoint: BarChartDataPoint) => dataPoint.color)
            .style("stroke", (dataPoint: BarChartDataPoint) => dataPoint.strokeColor)
            .style("stroke-width", (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`);

        this.barSelection
            .exit()
            .remove();
    }

    private static wordBreak(
        textNodes: Selection<SVGElement>,
        allowedWidth: number,
        maxHeight: number
    ) {
        textNodes.each(function () {
            textMeasurementService.wordBreak(
                this,
                allowedWidth,
                maxHeight);
        });
    }

Заполнение области свойств с помощью модели форматирования Utils

Окончательный IVisual метод в функции — getFormattingModel. Этот метод создает и возвращает объект модели форматирования современной области форматирования, содержащий все компоненты и свойства области форматирования. Затем он помещает объект в область "Формат ". В нашем случае мы создадим карточки формата для enableAxis и colorSelector, включая свойства форматирования для show и fill, в соответствии с "объектами" в файле capabilities.json . Чтобы добавить средство выбора цветов для каждой категории на панели свойств , добавьте цикл barDataPoints для каждого элемента и для каждого из них добавьте новое свойство форматирования цвета в модель форматирования.

Чтобы создать модель форматирования, разработчик должен ознакомиться со всеми его компонентами. Ознакомьтесь с компонентами области форматирования.Format Pane Ознакомьтесь с getFormattingModel API в FormattingModel utils моделей форматирования.

Скачайте файл и сохраните его в папку /src . Объявите свойства форматирования и их значения в классе параметров форматирования:

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
import { BarChartDataPoint } from "./barChart";

import Card = formattingSettings.SimpleCard;
import Model = formattingSettings.Model;
import Slice = formattingSettings.Slice;
import ColorPicker = formattingSettings.ColorPicker;
import ToggleSwitch = formattingSettings.ToggleSwitch;

/**
 * Enable Axis Formatting Card
 */
class EnableAxisCardSettings extends Card {
    show = new ToggleSwitch({
        name: "show",
        displayName: undefined,
        value: false,
    });

    fill = new ColorPicker({
        name: "fill",
        displayName: "Color",
        value: { value: "#000000" }
    });
    topLevelSlice: ToggleSwitch = this.show;
    name: string = "enableAxis";
    displayName: string = "Enable Axis";
    slices: Slice[] = [this.fill];
}

/**
 * Color Selector Formatting Card
 */
class ColorSelectorCardSettings extends Card {
    name: string = "colorSelector";
    displayName: string = "Data Colors";

    // slices will be populated in barChart settings model `populateColorSelector` method
    slices: Slice[] = [];
}

/**
* BarChart formatting settings model class
*/
export class BarChartSettingsModel extends Model {
    // Create formatting settings model formatting cards
    enableAxis = new EnableAxisCardSettings();
    colorSelector = new ColorSelectorCardSettings();
    cards: Card[] = [this.enableAxis, this.colorSelector];

    /**
     * populate colorSelector object categories formatting properties
     * @param dataPoints 
     */
    populateColorSelector(dataPoints: BarChartDataPoint[]) {
        const slices: Slice[] = this.colorSelector.slices;
        if (dataPoints) {
            dataPoints.forEach(dataPoint => {
                slices.push(new ColorPicker({
                    name: "fill",
                    displayName: dataPoint.category,
                    value: { value: dataPoint.color },
                    selector: dataPoint.selectionId.getSelector(),
                }));
            });
        }
    }
}

Создайте и создайте модель службы параметров форматирования в методе конструктора визуального элемента. Служба параметров форматирования получает параметры формата barChart и преобразует их в объект FormattingModel, возвращаемый в getFormattingModel API.

Чтобы использовать функцию локализации, добавьте диспетчер локализации в службу параметров форматирования.

    import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
    
    // ...
    // declare utils formatting settings service
    private formattingSettingsService: FormattingSettingsService;
    //...

    constructor(options: VisualConstructorOptions) {
        this.host = options.host;
        const localizationManager = this.host.createLocalizationManager();
        this.formattingSettingsService = new FormattingSettingsService(localizationManager);
        
        // Add here rest of your custom visual constructor code
    }

Обновите модель параметров форматирования с помощью API обновления. ВызовИТЕ API обновления при каждом изменении свойства форматирования в области свойств. Создайте точки данных селекторов линейчатой диаграммы и заполните их в модели параметров форматирования:


    // declare formatting settings model for bar chart 
    private formattingSettings: BarChartSettingsModel;

    // ...

    public update(options: VisualUpdateOptions) {
        this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(BarChartSettingsModel, options.dataViews[0]);
        this.barDataPoints = createSelectorDataPoints(options, this.host);
        this.formattingSettings.populateColorSelector(this.barDataPoints);

        // Add the rest of your custom visual update API code here

    }

Наконец, новый API getFormattingModel — это простая строка кода с помощью службы параметров форматирования и текущей модели параметров форматирования, созданной в API обновления выше.

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

(Необязательно) Отрисовка оси X (статические объекты)

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

Эти объекты можно включить или отключить в области свойств .

Снимок экрана: объекты в области свойств.

В этом примере отображается ось X на линейчатой диаграмме в виде статического объекта.

Мы уже добавили свойство в enableAxisфайл возможностей и интерфейс barChartSettings.

(Необязательно) Добавление цвета (привязанные к данным объекты)

Объекты, привязанные к данным, похожи на статические объекты, но обычно имеют дело с выбором данных. Например, можно использовать объекты, привязанные к данным, для интерактивного выбора цвета, связанного с каждой точкой данных.

Снимок экрана: выбор цвета для свойств.

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

Каждая точка данных представлена различным цветом. Мы включаем цвет в интерфейс BarChartDataPoint и присваиваем цвет по умолчанию каждой точке данных, когда он определен в IVisualHost.

function getColumnColorByIndex(
    category: DataViewCategoryColumn,
    index: number,
    colorPalette: ISandboxExtendedColorPalette,
): string {
    if (colorPalette.isHighContrast) {
        return colorPalette.background.value;
    }

    const defaultColor: Fill = {
        solid: {
            color: colorPalette.getColor(`${category.values[index]}`).value,
        }
    };

    const prop: DataViewObjectPropertyIdentifier = {
        objectName: "colorSelector",
        propertyName: "fill"
    };

    let colorFromObjects: Fill;
    if(category.objects?.[index]){
        colorFromObjects = dataViewObjects.getValue(category?.objects[index], prop);
    }

    return colorFromObjects?.solid.color ?? defaultColor.solid.color;
}

function getColumnStrokeColor(colorPalette: ISandboxExtendedColorPalette): string {
    return colorPalette.isHighContrast
        ? colorPalette.foreground.value
        : null;
}

function getColumnStrokeWidth(isHighContrast: boolean): number {
    return isHighContrast
        ? 2
        : 0;
}

Служба colorPalette в createSelectorDataPoints функции управляет этими цветами. Так как createSelectorDataPoints выполняет итерацию по каждой из точек данных, это идеальное место для назначения категориальных объектов, таких как цвет.

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

Примечание.

Убедитесь, что окончательный файл barChart.ts выглядит так, как этот barChart.ts исходный код, или скачайте исходный код barChart.ts и используйте его для замены файла.

Тестирование визуального элемента

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

В PowerShell перейдите в папку проекта и запустите приложение разработки.
```
pbiviz start
```
Теперь визуальный элемент запущен во время размещения на компьютере.

Внимание

Не закрывайте окно PowerShell до конца руководства. Чтобы остановить выполнение визуального элемента, введите ctrl+ и, если появится запрос на завершение пакетного задания, введите Y и введите ввод.
Просмотрите визуальный элемент в служба Power BI, выбрав визуальный элемент разработчика на панели визуализации.
Добавление данных в визуальный элемент
Перетащите края визуального элемента, чтобы изменить размер и заметить, как масштаб корректируется.
Переключение оси X и выключение.
Изменение цветов разных категорий.

Добавление других функций

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

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

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

Чтобы подготовить визуальный элемент для общего доступа, следуйте инструкциям в статье "Упаковка визуального элемента Power BI".

Примечание.

Полный исходный код линейчатой диаграммы с дополнительными функциями, включая подсказки и контекстное меню, см. в примере линейчатой диаграммы Power BI.

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

Руководство. Создание линейчатой диаграммы

Настройка среды

Создание нового проекта

Определение возможностей

Определение ролей данных

Сопоставьте данные

Определение объектов для области свойств

Визуальный API

Импорт

Интерфейсы

Визуальное преобразование

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

Создание визуального элемента

Обновление визуального элемента

Масштабирование

Другие функции обновления

Заполнение области свойств с помощью модели форматирования Utils

(Необязательно) Отрисовка оси X (статические объекты)

(Необязательно) Добавление цвета (привязанные к данным объекты)

Тестирование визуального элемента

Добавление других функций

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

Обратная связь

Дополнительные ресурсы

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

Руководство. Создание линейчатой диаграммы

Настройка среды

Создание нового проекта

Определение возможностей

Определение ролей данных

Сопоставьте данные

Определение объектов для области свойств

Визуальный API

Импорт

Интерфейсы

Визуальное преобразование

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

Создание визуального элемента

Обновление визуального элемента

Масштабирование

Другие функции обновления

Заполнение области свойств с помощью модели форматирования Utils

(Необязательно) Отрисовка оси X (статические объекты)

(Необязательно) Добавление цвета (привязанные к данным объекты)

Тестирование визуального элемента

Добавление других функций

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

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

Обратная связь

Дополнительные ресурсы