Kann nicht Diagramm js reagieren

Entschuldigung, wenn ich etwas verpasst habe, um mein Problem zu beheben, habe ich viele Lösungen gelesen und ausprobiert, ohne dass sie an das Problem angepasst wurden.Kann nicht Diagramm js reagieren

Ich habe mehrere Diagramme (von chart.js) auf einer einzigen Seite, aber ich kann nicht erfolgreich sein, um sie ansprechbar zu machen, trotz:

responsive: true,

Die beste ansprechende Anzeige war ich bekommen konnte, wenn Leinwand zu vergrößern Breite und Höhe, aber auf der Desktop-Version Diagramme wurden den gesamten Bildschirm angezeigt.

Hier ist ein fiddle.net

mir jemand zu helfen? Vielen Dank.

Quelle

2017-02-20 Blue Agency

Die Antwort auf 70 zu begrenzen ist:

1. ein div um das Beispiel

für die Leinwand hinzufügen :

<div class="wrapper"> 
    <canvas width="600" height="250"></canvas> 
</div>

2. Add Höhe auf die div class in der CSS-

.wrapper { 
height: 500px !important; 
}

(Höhe einstellen, wie Sie die ansprechende Rendering mögen)

Quelle

2017-03-15 17:30:49

können Sie machen die Container Divs ansprechbar CSS und machen svg width: 100% und height:100%

Hier aktualisiert Geige fiddle.net

Quelle

2017-02-20 09:12:17 Amit

Es schafft 1 Spalte von Text und Grafiken auf der linken Seite. –

ich gefunden habe, dass mit Chart.js, benötigen Sie einen enthält div wo Sie manipulieren die CSS (Höhe/Breite), die die Reaktionsfähigkeit unterstützt - aber nicht vollständig. Insbesondere bei der Breite gibt es einige Einschränkungen, da das enthaltende div möglicherweise viele Leerzeichen auf der Unterseite/den Seiten hinterlässt, da sich die Zeichenfläche nicht vollständig an die Breite des enthaltenden Bereichs als Prozentsatz anpasst. Es ist nicht perfekt, aber es funktioniert.

So, als eine Lösung: Erstellen Sie eine für jedes Diagramm enthält, div, und legen Sie es CSS-Stile verwenden für diese :)

Quelle

2017-02-20 09:16:27 cbll

Meine Diagramme werden in Gruppen von 2 auf meiner Seite angezeigt. Jede Gruppe wird in einen Div-Container eingeschlossen, während ich Bootstrap benutze, dann befindet sich jedes Diagramm in einem div "class = row". Ich habe versucht, auf diese verschiedenen divs Breite und Höhe in Prozent und sogar maximale Breite und maximale Höhe anzuwenden, aber nichts funktioniert. –

Können Sie ein umschließendes div für die zwei Zeilen erstellen, das width/height = 100% hat, und es dann auf zwei divs aufteilen - eins für jede Komponente? – cbll

Sie meinen '

' ?? Keine bessere Anzeige ... –

div Wie ich in Geige sah, Sie haben feste Höhe gegeben und Breite auf Leinwand-Tag.

Versuchen Sie, Höhe und Breite 70% oder 80% für Canvas-Tag zu geben. Dies kann Ihr Problem lösen.

100% voll große Diagramme geben kann bt versuchen, sie zu 80.

Quelle

2017-02-20 09:20:43

Ich probierte Breite/Höhe in Prozent, aber das Problem ist das gleiche. –

Versuchen Sie, das entsprechende div in fester Höhe und Breite und Leinwand in Prozent zu begrenzen. Dies kann helfen. @BlueAgency –

Keine Verbesserung ... –

Bootstrap hat eine Beispielseite, die ein Diagramm hat (mit chartjs), der anspricht. Also, ich würde auf diese URL verweisen, die heruntergeladen werden kann und wir haben eine responsive Grafik.

Dasbhoard Example showing Reponsive Chart

Quelle

2018-02-28 13:55:51

Kann nicht Diagramm js reagieren

Antwort

Verwandte Themen