Öğretici: Çubuk grafik oluşturma

Bu öğretici, verileri basit bir çubuk grafik biçiminde görüntüleyen bir Power BI görselinin nasıl geliştirildiğini gösterir. Bu görsel çok az miktarda özelleştirmeyi destekler. Bu belgenin diğer sayfalarında bağlam menüleri, araç ipuçları ve daha fazlası gibi daha fazla özelleştirmenin nasıl ekleneceği açıklanmaktadır.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

• Görselinizin özelliklerini tanımlama
• Görsel oluşturmak için kullanılan kaynak kodunu anlama
• Görseli işleme
• Özellikler bölmesine nesne ekleme
• Görseli paketleme

Ortamınızı ayarlama

Power BI görselinizi geliştirmeye başlamadan önce bu bölümde her şeyin listelendiğini doğrulayın.

• Power BI Pro veya Kullanıcı Başına Premium (PPU) hesabı. Bir aboneliğiniz yoksa ücretsiz deneme sürümüne kaydolun.

• Visual Studio Code (VS Code). VS Code, JavaScript ve TypeScript uygulamaları geliştirmek için ideal bir Tümleşik Geliştirme Ortamıdır (IDE).

• Windows PowerShell sürüm 4 veya üzeri (Windows için). Veya Terminal (OSX için).

• Power BI görseli geliştirmeye hazır bir ortam. Power BI görseli geliştirmek için ortamınızı ayarlayın.

• Bu öğreticide ABD Satış Analizi raporu kullanılmaktadır. Bu raporu indirip Power BI hizmeti yükleyebilir veya kendi raporunuzu kullanabilirsiniz. Power BI hizmeti ve dosyaları karşıya yükleme hakkında daha fazla bilgiye ihtiyacınız varsa Power BI hizmeti öğreticisinde Oluşturmaya başlama öğreticisine bakın.

Not

D3 JavaScript kitaplığı kurulumunuzun bir parçası olarak yüklenmediyse şimdi yükleyin. PowerShell'den komutunu çalıştırın npm i d3@latest --save

Çubuk grafik görseli oluşturmak için aşağıdaki adımlar gerekir:

1. Yeni proje oluşturma
2. Yetenek dosyasını tanımlama -capabilities.json
3. Görsel API'yi oluşturma
4. Görselinizi paketleme -pbiviz.json

Yeni proje oluşturma

Bu öğreticinin amacı, görselin nasıl yapılandırıldığını ve yazıldığını anlamanıza yardımcı olmaktır. Sıfırdan bir barkod görseli oluşturmak için bu yönergeleri izleyebilir veya kaynak kod deposunu kopyalayabilir ve kendi görselinizi oluşturmadan takip etmek için kullanabilirsiniz.

Yeni görsel oluşturma

1. PowerShell'i açın ve projenizi oluşturmak istediğiniz klasöre gidin.

2. Aşağıdaki komutu girin:

   pbiviz new BarChart
   

   Artık görselin dosyalarını içeren BarChart adlı bir klasörünüz olmalıdır.

3. VS Code'da [tsconfig.json] (visual-project-structure.md#tsconfigjson) dosyasını açın ve "files" adını "src/barChart.ts" olarak değiştirin.

   "files": [
   "src/barChart.ts"
   ]
   

   tsconfig.json "files" nesnesi, görselin ana sınıfının bulunduğu dosyaya işaret eder.

   Son tsconfig.json dosyanız şöyle görünmelidir.

4. package.json dosyası proje bağımlılıklarının listesini içerir. package.json dosyanızı bununla değiştirin.

Kaynak kodu kopyalama

git clone

Artık görseliniz için aşağıdaki dosya ve klasörleri içeren yeni bir klasörünüz olmalıdır:

Bu dosyaların her birinin işlevinin ayrıntılı açıklaması için bkz . Power BI görsel proje yapısı.

Bu öğreticide odaklandığımız iki dosya, görseli konağa açıklayan capabilities.json dosyası ve görselin API'sini içeren src/barchart.ts dosyasıdır.

Özellikleri tanımlama

capabilities.json dosyası, verileri konağa bağladığımız yerdir. Kabul edilen veri alanlarının türünü ve görselin sahip olması gereken özellikleri açıklıyoruz.

Veri rollerini tanımlama

Değişkenler, yetenek dosyasının dataRoles bölümünde tanımlanır ve bağlanır. Çubuk grafiğimizin iki tür değişkeni kabul etmelerini istiyoruz:

• Grafikteki farklı çubuklar tarafından temsil edilen kategorik veriler
• Her çubuğun yüksekliğiyle temsil edilen sayısal veya ölçülen veriler

Visual Studio Code'daki capabilities.json dosyasında, "dataRoles" etiketli nesnede aşağıdaki JSON parçasının göründüğünü onaylayın.

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

Verileri eşleyin

Ardından, konağa şu değişkenlerle ne yapacağını söylemek için veri eşlemesi ekleyin:

"dataViewMappings" nesnesinin içeriğini aşağıdaki kodla değiştirin:

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

Yukarıdaki kod, her veri rolü nesnesinin aynı anda yalnızca bir alanı barındırabileceği "koşulları" oluşturur. Her alana başvurmak için veri rolünün iç name öğesini kullandığımıza dikkat edin.

Ayrıca, her alanın doğru değişkene eşlenmesi için kategorik veri eşlemesini ayarlar.

Özellikler bölmesi için nesneleri tanımlama

Yetenek dosyasının "nesneler" bölümü, biçim bölmesinde görünmesi gereken özelleştirilebilir özellikleri tanımladığımız yerdir. Bu özellikler grafiğin içeriğini etkilemez, ancak görünümünü değiştirebilir.

Nesneler ve bunların çalışma şekli hakkında daha fazla bilgi için bkz . Nesneler.

Aşağıdaki nesneler isteğe bağlıdır. Renk eklemek ve X eksenini işlemek için bu öğreticinin isteğe bağlı bölümlerinden geçmek istiyorsanız bunları ekleyin.

"objects" bölümünün içeriğini aşağıdaki kodla değiştirin:

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

capabilities.json dosyasını kaydedin.

Son yetenek dosyanız bu örnekteki gibi görünmelidir.

Görsel API

Tüm görseller arabirimini uygulayan IVisual bir sınıfla başlar. src/visual.ts dosyası, bu sınıfı içeren varsayılan dosyadır.

Bu öğreticide dosyamızı IVisualbarChart.ts olarak adlandıracağız. Dosyayı indirin ve henüz yapmadıysanız /src klasörüne kaydedin. Bu bölümde, bu dosyayı ayrıntılı olarak inceleyip çeşitli bölümleri açıklayacağız.

İçeri aktarmalar

Dosyanın ilk bölümü, bu görsel için gereken modülleri içeri aktarır. Power BI görsel modüllerine ek olarak d3 kitaplığını da içeri aktardığımıza dikkat edin.

Aşağıdaki modüller barChart.ts dosyanıza aktarılır:

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";

Arabirimler

Ardından görsel arabirimleri tanımlayacağız. Çubuk grafik görselimizi açıklamak için aşağıdaki arabirim kullanılır:

• BarChartDataPoint

Bu arabirim aşağıdaki gibi tanımlanır:

/**
 * 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;
}

Görsel dönüştürme

Artık veri yapısı tanımlandığına göre, işlevini kullanarak createSelectorDataPoints verileri buna eşlememiz gerekir. Bu işlev veri görünümünden veri alır ve görselin kullanabileceği bir biçime dönüştürür. Bu durumda, önceki bölümde açıklanan arabirimi döndürür BarChartDataPoint[] .

görselleştirilecek DataView verileri içerir. Bu veriler kategorik veya tablosal gibi farklı biçimlerde olabilir. Çubuk grafik gibi kategorik bir görsel oluşturmak için üzerinde DataViewkategorik özelliğini kullanın.

Görsel her güncelleştirildiğinde bu işlev çağrılır.

/**
 * 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;
}

Not

barChart.ts dosyasındaki sonraki birkaç işlev renkle ilgilenir ve X eksenini oluşturur. Bunlar isteğe bağlıdır ve bu öğreticide daha ayrıntılı olarak ele alınıyor. Bu öğretici işlevinden IVisual devam edecektir.

Görseli işleme

Veriler tanımlandıktan sonra arabirimi uygulayan BarChart sınıfını kullanarak görseliIVisual işleriz. ArabirimIVisual, Visual API sayfasında açıklanmıştır. Görseli oluşturan bir constructor yöntem ve görsel her yeniden yüklendiğinde çağrılan bir update yöntem içerir. Görseli işlemeden önce sınıfın üyelerini bildirmemiz gerekir:

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,
    };
}

Görseli oluşturma

Oluşturucu işlevi, görsel ilk kez işlendiğinde yalnızca bir kez çağrılır. Çubuk grafik ve X ekseni için boş SVG kapsayıcıları oluşturur. SVG'yi işlemek için d3 kitaplığını kullandığına dikkat edin.

/**
     * 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);
    }

Görseli güncelleştirme

Güncelleştirme yöntemi, görselin boyutu veya değerlerinden biri her değiştiğinde çağrılır.

Ölçeklendirme

Çubuk ve geçerli değer sayısının görselin tanımlı genişlik ve yükseklik sınırlarına sığması için görseli ölçeklendirmemiz gerekir. Bu, Daire kartı öğreticisindeki güncelleştirme yöntemine benzer.

Ölçeği hesaplamak için kitaplıktan d3-scale daha önce içeri aktarılan ve scaleBand yöntemlerini kullanırızscaleLinear.

Değer, options.dataViews[0].categorical.values[0].maxLocal tüm geçerli veri noktalarının en büyük değerini tutar. Bu değer, y ekseninin yüksekliğini belirlemek için kullanılır. X ekseninin genişliği için ölçeklendirme, arabirimdeki görsele barchartdatapoint bağlı kategori sayısına göre belirlenir.

X ekseninin işlendiği durumlarda bu görsel, X ekseninde adın tamamını yazmak için yeterli alan olmaması durumunda sözcük sonlarını da işler.

Diğer güncelleştirme özellikleri

Ölçeklendirmeye ek olarak, güncelleştirme yöntemi seçimleri ve renkleri de işler. Bu özellikler isteğe bağlıdır ve daha sonra ele alınmalıdır:

   /**
     * 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);
        });
    }

Biçimlendirme modeli Yardımcı Programları'nı kullanarak özellikler bölmesini doldurma

işlevindeki IVisual son yöntemdir getFormattingModel. Bu yöntem, tüm biçim bölmesi bileşenlerini ve özelliklerini içeren modern bir biçim bölmesi biçimlendirme modeli nesnesi oluşturur ve döndürür. Ardından nesneyi Biçim bölmesinin içine yerleştirir. Bizim örneğimizde, ve için enableAxis ve için biçimlendirme özellikleri fillshow de dahil olmak üzere, capabilities.json dosyasındaki "nesnelere"göre biçim kartları oluştururuz.colorSelector Özellik bölmesindeki her kategori için bir renk seçici eklemek için for döngüsü barDataPoints ekleyin ve her biri için biçimlendirme modeline yeni bir renk seçici biçimi özelliği ekleyin.

Bir biçimlendirme modeli oluşturmak için geliştiricinin tüm bileşenleri hakkında bilgi sahibi olması gerekir. içindeki Format Panebiçim bölmesinin bileşenlerine göz atın. getFormattingModelFormattingModel utils Biçimlendirme modeli yardımcı programları deposunda api'sini gözden geçirin.

Dosyayı indirin ve /src klasörüne kaydedin. Biçimlendirme ayarları sınıfında biçimlendirme özelliklerini ve değerlerini bildirin:

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(),
                }));
            });
        }
    }
}

Görselin oluşturucu yönteminde biçimlendirme ayarları hizmet modelini oluşturun ve oluşturun. Biçimlendirme ayarları hizmeti barChart biçim ayarlarını alır ve bunları API'de döndürülen bir FormattingModel nesnesine getFormattingModel dönüştürür.

Yerelleştirme özelliğini kullanmak için yerelleştirme yöneticisini biçimlendirme ayarları hizmetine ekleyin.

    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
    }

Güncelleştirme API'sini kullanarak biçimlendirme ayarları modelini güncelleştirin. Özellikler bölmesindeki bir biçimlendirme özelliği her değiştirildiğinde Güncelleştirme API'sini çağırın. Çubuk grafik seçicileri veri noktaları oluşturun ve bunları biçimlendirme ayarları modelinde doldurun:

    // 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

    }

Son olarak, yeni API, yukarıdaki güncelleştirme API'sinde getFormattingModeloluşturulan biçimlendirme ayarları hizmetini ve geçerli biçimlendirme ayarları modelini kullanan basit bir kod satırıdır.

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

(İsteğe bağlı) X eksenini işleme (statik nesneler)

Görseli daha fazla özelleştirmek için Özellik bölmesine nesneler ekleyebilirsiniz. Bu özelleştirmeler kullanıcı arabirimi değişiklikleri veya sorgulanan verilerle ilgili değişiklikler olabilir.

Bu nesneleri Özellik bölmesinde açıp kapatabilirsiniz.

Bu örnek, çubuk grafikte bir X eksenini statik nesne olarak işler.

özellik dosyasını ve barChart Ayarlar arabirimini zaten ekledikenableAxis.

(İsteğe bağlı) Renk ekleme (veriye bağlı nesneler)

Veriye bağlı nesneler statik nesnelere benzer, ancak genellikle veri seçimiyle ilgilenir. Örneğin, her veri noktasıyla ilişkili rengi etkileşimli olarak seçmek için veriye bağlı nesneleri kullanabilirsiniz.

Yetenek dosyasında nesnesini zaten tanımladıkcolorSelector.

Her veri noktası farklı bir renkle temsil edilir. BarChartDataPoint arabirimine renk ekler ve içinde IVisualHosttanımlandığında her veri noktasına varsayılan bir renk atarız.

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;
}

Hizmet colorPalette , işlevinde createSelectorDataPoints bu renkleri yönetir. Veri noktalarının her birini yinelediğinden createSelectorDataPoints , renk gibi kategorik nesneler atamak için ideal bir yerdir.

Çubuk grafiğinize renk ekleme hakkında daha ayrıntılı yönergeler için Power BI görselinize renk ekleme bölümüne gidin.

Not

Son barChart.ts dosyanızın bu barChart.ts kaynak koduna benzediğini doğrulayın veya barChart.ts kaynak kodunu indirip dosyanızı değiştirmek için kullanın.

Görseli test edin

Nasıl göründüğünü görmek için görseli Power BI sunucusunda çalıştırın:

1. PowerShell'de projenin klasörüne gidin ve geliştirme uygulamasını başlatın.

   pbiviz start
   

   Görseliniz artık bilgisayarınızda barındırılırken çalışıyor.

   Önemli

   Öğreticinin sonuna kadar PowerShell penceresini kapatmayın. Görselin çalışmasını durdurmak için Ctrl+C girin ve toplu işi sonlandırmanız istenirse Y yazın ve enter tuşuna basın.

2. Görsel Öğeler bölmesinden Geliştirici görselini seçerek görseli Power BI hizmeti görüntüleyin.

   

3. Görsele veri ekleme

   

4. Boyutu değiştirmek ve ölçeğin nasıl değiştiğine dikkat etmek için görselin kenarlarını sürükleyin.

5. X eksenini açma ve kapatma.

   

6. Farklı kategorilerin renklerini değiştirin.

Diğer özellikleri ekleme

Daha fazla özellik ekleyerek görselinizi daha da özelleştirebilirsiniz. Görselin işlevselliğini artıran, görünümünü geliştiren veya kullanıcıya görünümü üzerinde daha fazla denetim sağlayan özellikler ekleyebilirsiniz. Örneğin, şunları yapabilirsiniz:

• Diğer Görsellerle Seçim ve Etkileşim Ekleme
• Opaklığı denetleen bir özellik bölmesi kaydırıcısı ekleme
• Araç ipuçları için destek ekleme
• Giriş sayfası ekleme
• Yerel dil desteği ekleme

Görseli paketleme

Görselinizi Power BI Desktop'a yükleyebilmeniz veya Power BI Görsel Galerisi'ndeki toplulukla paylaşabilmeniz için önce paketlemeniz gerekir.

Görseli paylaşıma hazırlamak için Power BI görselini paketleme başlığındaki yönergeleri izleyin.

Not

Araç ipuçları ve bağlam menüsü gibi daha fazla özelliğe sahip bir çubuk grafiğin tam kaynak kodu için bkz. Power BI görselleri örnek çubuk grafiği.

İlgili içerik

• Görsele bağlam menüsü ekleme
• Görsele giriş sayfası ekleme
• Yerel ayar desteği ekleme