Tutorial: Membuat bagan batang

Tutorial ini menunjukkan kepada Anda cara mengembangkan visual Power BI yang menampilkan data dalam bentuk bagan batang sederhana. Visual ini mendukung penyesuaian dalam jumlah minimal. Halaman lain dari dokumentasi ini menjelaskan cara menambahkan penyesuaian lebih lanjut seperti menu konteks, tips alat, dan banyak lagi.

Dalam tutorial ini, Anda akan mempelajari cara:

Menyiapkan lingkungan Anda

Sebelum Anda mulai mengembangkan visual Power BI, verifikasi bahwa Anda memiliki semua yang tercantum di bagian ini.

• Akun Power BI Pro atau Premium Per Pengguna (PPU). Jika tidak memilikinya, Anda dapat mendaftar untuk coba gratis.

• Visual Studio Code (VS Code). Visual Studio Code adalah Lingkungan Pengembangan Terintegrasi (IDE) yang ideal untuk mengembangkan aplikasi JavaScript dan TypeScript.

• Windows PowerShell versi 4 atau yang lebih baru (untuk Windows). Atau Terminal (untuk Mac).

• Lingkungan yang siap untuk mengembangkan visual Power BI. Menyiapkan lingkungan Anda untuk mengembangkan visual Power BI.

• Tutorial ini menggunakan laporan Analisis Penjualan AS. Anda dapat mengunduh laporan ini dan mengunggahnya ke layanan Power BI, atau menggunakan laporan Anda sendiri. Jika Anda memerlukan informasi selengkapnya tentang layanan Power BI, dan mengunggah file, lihat tutorial Mulai membuat di layanan Power BI.

Membuat visual bagan batang melibatkan langkah-langkah berikut:

1. Membuat proyek baru
2. Tentukan file kapabilitas -capabilities.json
3. Membuat visual API
4. Mengemas visual Anda -pbiviz.json

Membuat proyek baru

Tujuan dari tutorial ini adalah untuk membantu Anda memahami bagaimana visual disusun dan ditulis. Anda dapat mengikuti instruksi ini untuk membuat visual kode batang dari awal, atau Anda dapat mengkloning repositori kode sumber dan menggunakannya untuk mengikuti tanpa membuat visual Anda sendiri.

git clone

Sekarang Anda harus memiliki folder baru untuk visual Anda dengan file dan folder berikut:

Untuk penjelasan terperinci tentang fungsi masing-masing file ini, lihat Struktur proyek visual Power BI.

Dua file yang kami fokuskan dalam tutorial ini adalah file capabilities.json , yang menjelaskan visual ke host, dan file src/barchart.ts , yang berisi API visual.

Mendefinisikan kemampuan

File capabilities.json adalah tempat kami mengikat data ke host. Kami menjelaskan jenis bidang data yang diterimanya dan fitur apa yang harus dimiliki visual.

Menentukan peran data

Variabel ditentukan dan terikat di bagian dataRoles file kemampuan. Kami ingin bagan batang kami menerima dua jenis variabel:

• Data kategoris yang diwakili oleh bilah yang berbeda pada bagan
• Data numerik, atau terukur, yang diwakili oleh tinggi setiap bilah

Dalam Visual Studio Code, dalam file capabilities.json, konfirmasikan bahwa fragmen JSON berikut muncul di objek berlabel "dataRoles".

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

Petakan datanya

Selanjutnya, tambahkan pemetaan data untuk memberi tahu host apa yang harus dilakukan dengan variabel ini:

Ganti konten objek "dataViewMappings" dengan kode berikut:

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

Kode di atas membuat "kondisi" yang dapat dipegang oleh setiap objek peran data hanya dapat menampung satu bidang pada satu waktu. Perhatikan bahwa kami menggunakan internal peran data name untuk merujuk ke setiap bidang.

Ini juga mengatur pemetaan data kategoris sehingga setiap bidang dipetakan ke variabel yang benar.

Menentukan objek untuk panel properti

Bagian "objek" dari file kemampuan adalah tempat kami menentukan fitur yang dapat disesuaikan yang akan muncul di panel format. Fitur-fitur ini tidak memengaruhi konten bagan tetapi dapat mengubah tampilan dan nuansanya.

Untuk informasi selengkapnya tentang objek dan cara kerjanya, lihat Objek.

Objek berikut bersifat opsional. Tambahkan objek jika Anda ingin melalui bagian opsional dari tutorial ini untuk menambahkan warna dan merender sumbu X.

Ganti konten bagian "objek" dengan kode berikut:

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

Simpan file capabilities.json.

File kemampuan akhir Anda akan terlihat seperti yang ada dalam contoh ini.

API Visual

Semua visual dimulai dengan kelas yang mengimplementasikan IVisualantarmuka. File src/visual.ts adalah file default yang berisi kelas ini.

Dalam tutorial ini, kami memanggil file kami IVisual barChart.ts. Unduh file dan simpan ke folder /src , jika Anda belum melakukannya. Di bagian ini, kita membahas file ini secara rinci dan menjelaskan berbagai bagian.

Impor

Bagian pertama dari file mengimpor modul yang diperlukan untuk visual ini. Perhatikan bahwa selain modul visual Power BI, kami juga mengimpor pustaka d3.

Modul berikut diimpor ke file barChart.ts Anda:

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

Antarmuka

Selanjutnya, kita menentukan antarmuka visual. Antarmuka berikut digunakan untuk menjelaskan visual bagan batang kami:

• BarChartDataPoint

Antarmuka ini didefinisikan sebagai berikut:

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

Transformasi visual

Sekarang setelah struktur data ditentukan, kita perlu memetakan data ke createSelectorDataPoints dalamnya menggunakan fungsi . Fungsi ini menerima data dari tampilan data dan mengubahnya menjadi format yang dapat digunakan visual. Dalam hal ini, antarmuka mengembalikan antarmuka yang BarChartDataPoint[] dijelaskan di bagian sebelumnya.

DataView berisi data yang akan divisualisasikan. Data ini dapat dalam bentuk yang berbeda, seperti kategoris atau tabular. Untuk menyusun visual kategoris seperti bagan batang, gunakan properti kategoris pada DataView.

Fungsi ini dipanggil setiap kali visual diperbarui.

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

Merender visualnya

Setelah data ditentukan, kami merender visual menggunakan kelas BarChart yang mengimplementasikan antarmuka IVisual. Antarmuka IVisual dijelaskan di halaman API Visual. Halaman Ini berisi metode constructor yang membuat visual dan metode update yang dipanggil setiap kali visual dimuat ulang. Sebelum merender visual, kita harus mendeklarasikan anggota kelas:

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

Membangun visual

Fungsi konstruktor hanya dipanggil sekali, ketika visual dirender untuk pertama kalinya. Membuat kontainer SVG kosong untuk bagan batang dan sumbu X. Perhatikan bahwa ia menggunakan pustaka d3 untuk merender 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);
    }

Memperbarui visual

Metode pembaruan dipanggil setiap kali ukuran visual atau salah satu nilainya berubah.

Penskalaan

Kita perlu menskalakan visual sehingga jumlah bilah dan nilai saat ini cocok dengan batas lebar dan tinggi visual yang ditentukan. Ini mirip dengan metode pembaruan dalam tutorial Kartu lingkaran.

Untuk menghitung skala, kami menggunakan metode scaleLinear dan scaleBand yang diimpor sebelumnya dari d3-scale pustaka.

Nilai options.dataViews[0].categorical.values[0].maxLocal menyimpan nilai terbesar dari semua titik data saat ini. Nilai ini digunakan untuk menentukan tinggi sumbu y. Penskalaan untuk lebar sumbu x ditentukan oleh jumlah kategori yang terikat pada visual di antarmuka barchartdatapoint.

Untuk kasus di mana sumbu X dirender, visual ini juga menangani pemisah kata jika tidak ada cukup ruang untuk menuliskan seluruh nama pada sumbu X.

Fitur pembaruan lainnya

Selain penskalakan, metode pembaruan juga menangani pilihan dan warna. Fitur-fitur ini bersifat opsional dan dibahas nanti:

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

Mengisi panel properti menggunakan Utils model pemformatan

Metode akhir dalam fungsi IVisual adalah getFormattingModel. Metode ini menyusun dan mengembalikan objek model pemformatan panel format modern yang berisi semua komponen dan properti panel format. Kemudian menempatkan objek di dalam panel Format . Dalam kasus kami, kami membuat kartu format untuk enableAxis dan colorSelector, termasuk properti pemformatan untuk show dan fill, menurut "objek" dalam file capabilities.json . Untuk menambahkan pemilih warna untuk setiap kategori pada panel Properti , tambahkan untuk perulangan dan barDataPoints untuk masing-masing menambahkan properti format pemilih warna baru ke model pemformatan.

Untuk membangun model pemformatan, pengembang harus terbiasa dengan semua komponennya. Lihat komponen panel format di Format Pane. Lihat getFormattingModel API di FormattingModel utilsrepositori utils model pemformatan.

Unduh file dan simpan ke folder /src . Deklarasikan properti pemformatan dan nilainya dalam kelas pengaturan pemformatan:

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

Buat dan buat model layanan pengaturan pemformatan dalam metode konstruktor visual. Layanan pengaturan pemformatan menerima pengaturan format barChart dan mengonversinya menjadi objek FormattingModel yang dikembalikan dalam getFormattingModel API.

Untuk menggunakan fitur pelokalan, tambahkan manajer pelokalan ke layanan pengaturan pemformatan.

    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
    }

Perbarui model pengaturan pemformatan menggunakan API pembaruan. Panggil Api Pembaruan setiap kali properti pemformatan di panel properti diubah. Buat titik data pemilih bagan batang dan isi dalam model pengaturan pemformatan:

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

    }

Terakhir, API getFormattingModel baru adalah baris kode sederhana menggunakan layanan pengaturan pemformatan dan model pengaturan pemformatan saat ini yang dibuat di API pembaruan di atas.

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

(Opsional) Merender sumbu X (objek statis)

Anda bisa menambahkan objek ke panel Properti untuk mengkustomisasi visual lebih lanjut. Penyesuaian ini dapat berupa perubahan antarmuka pengguna, atau perubahan yang terkait dengan data yang dikueri.

Anda dapat mengaktifkan atau menonaktifkan objek ini di panel Properti.

Contoh ini merender sumbu X pada bagan batang sebagai objek statis.

Kami sudah menambahkan enableAxis properti ke file kemampuan dan antarmuka barChartSettings.

(Opsional) Menambahkan warna (objek terikat data)

Objek terikat data mirip dengan objek statis, tetapi biasanya berurusan dengan pemilihan data. Misalnya, Anda dapat menggunakan objek terikat data untuk secara interaktif memilih warna yang terkait dengan setiap titik data.

Kami sudah mendefinisikan colorSelector objek dalam file kemampuan.

Setiap titik data diwakili oleh warna yang berbeda. Kami menyertakan warna dalam antarmuka BarChartDataPoint, dan menetapkan warna default ke setiap titik data saat ditentukan dalam 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 Layanan, dalam createSelectorDataPoints fungsi, mengelola warna-warna ini. Karena createSelectorDataPoints berulang melalui setiap titik data, ini adalah tempat yang ideal untuk menetapkan objek kategoris seperti warna.

Untuk instruksi selengkapnya tentang cara menambahkan warna ke bagan batang Anda, buka Menambahkan warna ke visual Power BI Anda.

Menguji visual

Jalankan visual di server Power BI untuk melihat tampilannya:

1. Di PowerShell, navigasikan ke folder proyek dan mulai aplikasi pengembangan.

   pbiviz start
   

   Visual Anda sekarang berjalan saat sedang dihosting di komputer Anda.

   Penting

   Jangan tutup jendela PowerShell hingga akhir tutorial. Untuk menghentikan visual berjalan, masukkan +C, dan jika diminta untuk mengakhiri pekerjaan batch, masukkan Y, lalu Enter.

2. Tampilkan visual di layanan Power BI dengan memilih visual Pengembang dari panel Visualisasi.

   

3. Menambahkan data ke visual

   

4. Seret tepi visual untuk mengubah ukuran dan perhatikan bagaimana skala menyesuaikan.

5. Hidupkan dan matikan sumbu X.

   

6. Ubah warna kategori yang berbeda.

Menambahkan fitur lain

Anda dapat menyesuaikan visual lebih lanjut dengan menambahkan lebih banyak fitur. Anda dapat menambahkan fitur yang meningkatkan fungsionalitas visual, meningkatkan tampilan dan nuansanya, atau memberi pengguna lebih banyak kontrol atas penampilannya. Misalnya, Anda dapat:

• Menambahkan Pilihan dan Interaksi dengan Visual Lain
• Menambahkan slider panel properti yang mengontrol opasitas
• Menambahkan dukungan untuk tooltip
• Menambahkan halaman arahan
• Menambahkan dukungan bahasa lokal

Mengemas visualnya

Sebelum dapat memuat visual ke Power BI Desktop atau membagikannya dengan komunitas di Galeri Visual Power BI, Anda harus mengemasnya.

Untuk menyiapkan visual untuk berbagi, ikuti instruksi dalam Mengemas visual Power BI.

Konten terkait

• Menambahkan menu konteks ke visual
• Menambahkan halaman arahan ke visual
• Menambahkan dukungan lokal