Aracılığıyla paylaş

Hızlı bir şekilde kişiselleştirilmiş görseller vitrini oluşturma

Power BI tümleşik Uygulama kişiselleştirilmiş görseller oluşturma kullanıcılar, önceki Power BI deneyimine sahip olmasalar bile mevcut rapor görsellerini düzenleyebilir ve kendi kişiselleştirilmiş görsellerini oluşturabilir. Vitrin kodu, çalışma zamanında çeşitli görselleştirme türleri oluşturmak ve düzenlemek için Power BI rapor yazma API'lerinin nasıl kullanılacağını gösterir. Rapor yazma API'lerini kullanma hakkında daha fazla bilgi için bkz. Rapor yazmaya genel bakış.

Hızlı bir şekilde kişiselleştirilmiş görseller vitrini deneyimi oluşturma

Kurgusal bir şirket olan Contoso, Hızlı bir şekilde kişiselleştirilmiş görseller oluşturma vitrini kullanarak satış verilerinin çeşitli görselleştirmelerini içeren bir Power BI tümleşik raporu sunar. Sütun grafik, alan grafiği, çubuk grafik, pasta grafik ve çizgi grafik, geliri ve fırsatları sektör türü, satış temsilcisi ve fırsat durumu işlevleri olarak gösterir.

Eklenen raporda kullanıcıların verilere göre yeni görseller oluşturmak için seçebileceği Hızlı görsel oluştur düğmesi vardır.

Hızlı görsel oluşturucunun Hızlı görsel oluştur düğmesiyle Power BI tümleşik raporunu göstermesini gösteren ekran görüntüsü.

Yeni bir hızlı görsel oluşturma

Rapor kullanıcıları, Contoso satış verilerini temel alan yeni görseller oluşturmak için görüntüleme oturumları sırasında istedikleri zaman hızlı görsel oluştur düğmesini seçebilir.

Örneğin, bir kullanıcı Fırsat Durumuna göre Gerçek Gelir'i gösteren bir sütun grafiği görmek isterse Hızlı görsel oluştur seçerek Hızlı görsel oluştur iletişim kutusunu açar. Uygulama kodunda tanımlanan iletişim kutusu, sağ tarafta eklenmiş bir rapor görseli önizlemesi içerir.

Hızlı görsel oluştur iletişim kutusunda, Görsel türünü seçinaltında, kullanıcıSütun grafiğini seçer. Kullanıcının seçtiği görsel türüne bağlı olarak farklı alanlar ve değerler kullanılabilir. Sütun grafiği için kullanıcı, Ekseni alanı için fırsat durumu seçer ve Değerleriçin Gerçek Gelir . İsteğe bağlı olarak, Araç İpuçlarıiçin Tahmini Gelir seçerler.

Ekseni ve Değerler alanlarını doldurduktan sonra, kullanıcı gerçek değerlerin ve etiketlerin görüntülenip görüntülenmeyeceği gibi çeşitli biçimlendirme seçeneklerini belirleyebilir. Ayrıca görsel için başlık yazabilir ve biçimlendirebilirler.

İletişim kutusundaki eklenmiş rapor önizlemesi, kullanıcı bunu oluştururken görselleştirmeyi gösterir.

Hızlı görsel oluştur iletişim kutusunu gösteren ekran görüntüsü.

Görsel tamamlandığında, kullanıcıoluştur seçer ve yeni görselleştirme raporda görünür.

Veri noktalarından biri için araç ipucunu gösteren yeni oluşturulan bir görseli gösteren ekran görüntüsü.

Kullanıcı görselleştirmelerdeki bir veri noktasının üzerine geldiğinde bir araç ipucu görüntülenir. Kullanıcı görseli oluştururken Araç İpuçları altında Tahmini Gelir belirttiğinden, bu alanın verileri araç ipuçlarında görünür. Kullanıcı bir araç ipucu belirtmezse, araç ipucunda yalnızca eksen ve değer verileri görüntülenir.

Mevcut görseli değiştirme

Rapor kullanıcıları, görselin sağ üst köşesindeki Üç nokta (...) Diğer seçeneklerini seçip Görseli değiştirseçeneğini belirleyerek rapordaki mevcut görselleri değiştirebilir.

Örneğin rapor kullanıcısı, veriler sürekli olmadığından Sektöre göre Fırsat Sayısı alan grafiğini sütun grafiğine isteyebilir. Kullanıcı Görselideğiştir'i seçtiğinde Hızlı görsel oluştur iletişim kutusu açılır ve kullanıcı herhangi bir ayarı değiştirebilir.

Görseli değiştir komutuyla alan grafiği görselini gösteren ekran görüntüsü.

Bu örnekte, kullanıcı görsel türünü Sütun grafiğiolarak değiştirmiştir. Veriler artık sütun grafiği olarak görüntülenir.

Görselin sütun grafiğine değiştiğini gösteren ekran görüntüsü.

Kişiselleştirilmiş görselleri hızla oluşturma vitrin kodu

Vitrini uygulamaya yönelik kod, PowerBI-Embedded-Showcases GitHub deposundadır.

  • Uygulama HTML kodu eklenmiş rapor kapsayıcısını ve öğelerini, iletişim kutularını, metin alanlarını ve düğmeleri oluşturur.

  • rapor JavaScript kodu görselleştirme türlerini tanımlar, komutları ve olayları işler ve tüm rapor ekleme ve etkileşimlerini gerçekleştirir.

Power BI İstemci kitaplığının powerbi-report-authoring uzantısını kullanarak raporları ve görselleri kolayca ve hızlı bir şekilde yazabilirsiniz. Daha fazla bilgi için bkz. rapor yazmaya genel bakış.

Görsel oluşturma ve bunları verilere bağlama hakkında daha fazla bilgi için bkz. Görseloluşturma . Görsel özellikleri hakkında daha fazla bilgi için bkz. Görsel özelliklerini biçimlendirme.

Görsel oluşturma ve yapılandırma

createVisual kullanarak ve barChart veya pieChartgibi görsel türünü belirterek Power BI görselleri oluşturursunuz. Ardından görsel türünü özelliklere, rollere, alanlara ve verilere bağlarsınız. Vitrin visuals.js dosyası, bu uygulamanın desteklediği görsel türleri için özellikleri, veri rollerini, veri alanlarını ve hedefleri tanımlar.

index.js dosyasında, aşağıdaki kod Hızlı görsel oluştur içinde eklenmiş bir görsel oluşturur ve özelliklerini ayarlar ve uygular. Örneğin, legend özelliği pasta grafik görselleri için etkinleştirilir, ancak çubuk ve sütun grafikler için devre dışı bırakılır.

// Based on the state object, create a visual inside the modal
async function createVisualInsideTheModalInEditMode(visualType, dataRoles) {

    // Create visual inside the modal
    const newVisual = await visualCreatorShowcaseState.page.createVisual(visualType, getVisualLayout());

    // Update state
    visualCreatorShowcaseState.newVisual = newVisual.visual;
    visualCreatorShowcaseState.visualType = newVisual.visual.type;
    const visual = newVisual.visual;
    const newVisualType = visual.type;
    
    // Enable the legend property for pie chart
    if (visualCreatorShowcaseState.visualType === "pieChart") {
        visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: true });
    }
    
    // Add properties to the created visual
    Object.entries(visualCreatorShowcaseState.properties).forEach(property => {
        let [propertyName, propertyValue] = property;
    ...
        // Check the validity of the given property for the given visual-type and apply it to the visual
        applyValidPropertiesToTheVisual(visual, newVisualType, propertyName, propertyValue);
    });
    
    // Disable the legend for the column and bar charts
    if (visualCreatorShowcaseState.visualType === "columnChart" || visualCreatorShowcaseState.visualType === "barChart") {
        visual.setProperty(propertyToSelector("legend"), { schema: schemas.property, value: false });
    }

Görsel türünü değiştirme

Hızlı görsel oluştur iletişim kutusunda, seçili görsel türü değişmediği sürece var olan tüm düzenleme alanları kullanılabilir. Yeni bir görsel oluştururken veya görsel türünü değiştirirken, kullanıcı yeni görsel türünü seçtikten sonra ilgili düzenleme alanları kullanılabilir duruma gelir.

Aşağıdaki kod, kullanıcı bir görseli düzenleyerek türü değiştirirse (örneğin, bir alan grafiğinden sütun grafiğine) görsel türünü değiştirir. Görsel türünü değiştirme hakkında daha fazla bilgi için bkz. görsel türünü değiştirme.

        const oldVisualType = selectedVisual.visual.type;
        const oldVisual = selectedVisual.visual;
        if (oldVisualType !== visualCreatorShowcaseState.visualType) {

            // If visual-type is changed, remove all active data-fields on the visual
            await removeAllActiveDataRoles(oldVisual, oldVisualType);

            // Change the visual type
            await oldVisual.changeType(visualCreatorShowcaseState.visualType);
        }

Görseli değiştir komutunu Diğer seçenekler menüsüne ekleme

Rapor , rapora bir komutu eklemek için API' genişlet menü komutunu kullanır ve bu komut her görselleştirmenin Diğer seçenekler menüsünde görüntülenir.

let config = {
...
    settings: {
        ...
        extensions: [
            {
                command: {
                    name: "changeVisual",
                    title: "Change visual",
                    extend: {
                        visualOptionsMenu: {
                            title: "Change visual",
                            menuLocation: models.MenuLocation.Top,

Yapılandırma ayrıca, Verileri dışarı aktarma ve Sıralamagibi tüm varsayılan, önceden var olan Power BI Diğer seçenekler menü komutlarını gizler. Görsel komutları özelleştirme hakkında daha fazla bilgi için bkz. menü komutlarını özelleştirme.

Görseli değiştirme ve Hızlı görsel seçimi olayları oluşturma işlemlerini işleme

Aşağıdaki kod Görseli değiştir komut seçimini işler ve Hızlı görsel oluştur düğme tıklama olayları . Kod, komut veya düğme seçimini dinler ve görsel i düzenlemek veya oluşturmak için Hızlı görsel oluştur kalıcı iletişim kutusunu açar.

    // Listen for the commandTriggered event
    baseReportState.report.on("commandTriggered", function (event) {

        // Open the modal and set the fields, properties and title for the visual
        openModalAndFillState(event.detail);
    });

    baseReportState.report.on("buttonClicked", function () {

        // Show the modal to create the visual
        openModalAndFillState();
    });

İlgili içerik