2017-11-07 6 views
2

Ich habe es geschafft, ein PowerBi Dashboard in eine Webseite einzubetten.Wie style ich ein Embedded-PowerBI-Dashboard?

Leider sieht es scheußlich aus. Zum Beispiel ist das Padding lächerlich; Der Titel hängt in der oberen linken Ecke, die ich entfernen möchte; Der gesamte Inhalt wird in einen iFrame geladen. Wenn ich die Höhe und Breite nicht festlege, wird das Dashboard nahezu unsichtbar und reagiert nicht (in Bezug auf die Fensterskalierung). nichts ist zentriert ...

Ich habe versucht, das CSS zu überschreiben. Zum Beispiel habe ich versucht, die Eigenschaft display: none !important; in der Kopfzeile (um den Titel zu entfernen), aber es hat keine Auswirkungen. Ich habe auch versucht, die Hintergrundfarbe des iFrames von Grau auf die Farbe der Webseite zu ändern, aber das hat auch nicht funktioniert.

Weiß jemand, wie ich mein PowerBI-Dashboard stylen und ohne einen iFrame einbetten kann (ist das überhaupt möglich?)?

Antwort

0

Soweit ich weiß, ist es momentan nicht möglich, etwas von PowerBI in eine Webseite ohne IFrame einzubetten.

Brauchen Sie wirklich ein Dashboard, vielleicht würde ein Bericht es tun? Zumindest könnten Sie die Komponenten so platzieren, wie Sie möchten.

+0

Ja, ich den Bericht stattdessen eingebettet, aber der iframe ist scheußlich ... Ich habe keine Kontrolle über das CSS oder die Position der Elemente. Ich möchte nicht jedes Element einzeln einbetten müssen, da ich dann mehrere Iframes hätte, oder? – pookie

+0

Sie haben Recht, es ist nicht schön, aber es funktioniert. Ich denke, Sie sind nicht in der Lage, alle Grafiken auf einer einzigen Seite zu sammeln und nur diesen einen Bericht einzubetten. – Gigga

+0

Alle meine Visuals sind in einem Bericht, aber ich möchte die Kontrolle über die Auffüllung, Ränder, Schriftarten usw. haben. Wenn es in einem IFrame ist, ist das Limit der domänenübergreifenden Ursprungsrichtlinie. – pookie

0

Ich hatte das gleiche Problem. Ich habe CSS verwendet, um den iFrame für Berichte und Dashboards neu zu gestalten.

Ich verwende ein eckiges Projekt und fügte das CSS zu meiner Komponente hinzu, die den Iframe anzeigt.

border-width: 0; //Removes Iframe horrible border 

ich auch die Höhe, Breite und Position anpassen.

Wenn Sie nicht wissen, welches Element Sie zum Ändern des CSS benötigen, verwenden Sie das inspect-Element in Chrome und testen Sie, indem Sie einige CSS für jedes Element ändern.

Ich konnte die Position des Titels verstecken und ändern, wenn ich gefunden, was div war es in mit:

visibility: hidden; //true to show 
text-align: centre; //left or right