Plotly ist eine kostenlose und Open-Source-Bibliothek, die eine breite Palette von Handlungen umfassend unterstützt.
Sie werden jedoch feststellen, dass Plotly das Modusbar in der oberen rechten Ecke jedes Grundstücks enthält. Dies kann zwar für schnelle Aktionen wie das Exportieren des Handels in eine Bilddatei von Vorteil sein, kann jedoch auch zu einer schlechten Navigation und Sichtbarkeit führen, insbesondere zu kleineren Anzeigen.
Zum Glück ermöglicht es Plotly, die Modusbar oder bestimmte Elemente der Modusbar zu entfernen. In diesem Tutorial erfahren wir, wie wir das Modusbar mit dem Layout -Parameter in Plotly anpassen können.
Diagramm
Beginnen wir mit der Veranschaulichung des Modusbars in Handlungsfiguren. In unserem Beispiel werden wir mit Plotly ein einfaches Zeilendiagramm erstellen.JS.
Erstellen Sie zunächst ein HTML -Dokument und rufen Sie es Line_Plot auf.html.
Wir können dann den HTML -Boilerplate -Code hinzufügen und den Titel und den Plotly hinzufügen.JS -Bibliothek. Ein Beispielcode ist wie unten gezeigt:
Navigieren Sie nach dem Erstellen zum Körper des HTML -Dokuments und erstellen Sie ein DIV -Element. Gib ihm eine ID von "mydiv". Auf diese Weise können wir das Div -Element verwenden und die Abbildung zeichnen.
Ein Beispielcode ist wie gezeigt:
Öffnen Sie schließlich ein Skript -Tag und fügen Sie den Code hinzu, wie unten gezeigt:
var Trace1 =Im obigen Beispiel erstellen wir ein einfaches Zeilendiagramm mit Beispieldaten. Der obige Code sollte zu der unten gezeigten Abbildung führen:
Beachten Sie, dass das obige Diagramm standardmäßig die Modusbar enthält. Lassen Sie uns nun diskutieren, wie wir das gesamte oder die Elemente der Modusbar deaktivieren können.
Deaktivieren Sie die Modusbar
Um die gesamte Modusbar aus einem bestimmten Diagramm zu entfernen, können wir den Layout -Parameter verwenden. Ein Beispielcode ist wie unten gezeigt:
… .Code abgeschnitten… .Im obigen Beispiel beginnen wir zunächst das Layoutobjekt, das die Eigenschaften enthält, die wir anpassen möchten. In unserem Beispiel setzen wir den Titel der Figur mit der Titeleigenschaft.
Als Nächst. Der obige Code sollte zu der Abbildung führen, wie unten gezeigt:
Sie werden feststellen, dass die Modusbar nicht erscheint, auch wenn wir schweben.
Entfernen Sie das Plotly -Logo entfernen
In einigen Fällen möchten Sie die Modusbar erhalten, aber das Logo „Produziert mit Plotly“ entfernen.
Dafür können wir die Eigenschaft von DisplayLogo wie gezeigt auf False einstellen:
Handlung.newplot ("mydiv", Daten, Layout, displayLogo: false);Wenn wir den obigen Code ausführen, sollten wir die Abbildung mit der Modusbar sehen, das Logo ist jedoch versteckt:
Wie wir sehen können, enthält die Figur nicht mehr das erzeugte mit Plotly -Logo.
Entfernen Sie die Modusbartasten entfernen
Sie können die Namen der Tasten übergeben, die Sie als Array an die Eigenschaft modebarbuttonStoremove entfernen möchten, um bestimmte Tasten aus der Modusbar zu entfernen.
Betrachten Sie die Abbildung unten, bevor Sie die Tasten entfernen.
Hier können wir sehen, dass die Modusbar alle Tasten hat
Um die 'Toimage' zu entfernen, zoomen, zoomen und zoomen Tasten aus. Wir können den Code als:
Handlung.newplot ("mydiv", dato, layout, modebarbuttonStoremove: ['toimage', 'zoom2d', 'zoomin2d', 'zoomout2d']);Im obigen Beispiel entfernen wir das Toimage, zoomen, zoomen und zoomen Tasten aus. Die resultierende Abbildung ist wie gezeigt:
Wie wir sehen können, sind die angegebenen Schaltflächen nicht aus der Modusbar verfügbar.
Abschluss
In diesem Tutorial haben Sie gelernt, wie man die Modusbar in Handlungsfiguren anpasst. Wir haben auch abgedeckt, wie man die Modusbar ausblendet und zeigt, bestimmte Tasten aus der Modusbar entfernen und das Logo „Produziert mit Plotly“ entfernen.