Bootstrap-Grid funktioniert nicht mit Canvas

Ich versuche, ein Diagramm mit Chart.js in einer Zeile mit span6 zu platzieren. Chart.js verwendet <canvas> und benötigt eine height und width Eigenschaft. Ich habe die height auf was ich brauche und die width auf 100% gesetzt, aber es dehnt sich nicht aus, um das div zu füllen, das auf span6 gesetzt ist.Bootstrap-Grid funktioniert nicht mit Canvas

Irgendwelche Ideen?

<div class="row" style="padding-top: 20px;"> 
    <div class="span6"> 
    <div id="daily"> 
     <canvas id="daily-chart" width="100%" height="400px"></canvas> 
    </div> 
    </div> 
</div>

Quelle

2013-07-19 Anonymous

in der JavaScript-Datei, in der Sie alle Optionen für das Diagramm zu lösen Ihr Problem

new Chart(ctx).Line(data, options); 

//Boolean - If we want to override with a hard coded scale 
    scaleOverride : true,

Quelle

2013-07-19 07:59:14 acudars

überprüfen Sie auch dies: http://StackOverflow.com/Questions/11894607/How-Do--Dynamically-Scale-the-HTML5-canvas-Element – acudars

Ich habe zuvor die Optionen auf Null gesetzt. Um sie zu verwenden, erstelle ich einfach ein Options-Array? var options = [scaleOverride: true] ;? –

Haben Sie sich das angesehen: http://www.chartjs.org/docs/ Line.defaults = {scaleOverride: true} – acudars

ich es geschafft hinzufügen!

Bitte überprüfen Sie diese jsFiddle.

Versuchen Sie, die Größe der Panels zu ändern, um sie in Aktion zu sehen.

Grundsätzlich rufen Sie eine Funktion, die auf die Größe ändern des Fensters reagiert:

$(window).resize(respondCanvas);

, dass eine von der Breite und Höhe des Elternelements fetch triggert, dass es in und dann das Diagramm neu zeichnet, eingekapselt ist.

Sie können alle kleinen Bits wie Ihre eigenen IDs, Klassen, Breite und Höhe anpassen.

Quelle

2013-07-19 10:02:25 acudars

Ich würde mich freuen, wenn Sie dies als beantwortet markieren, wenn Sie zufrieden sind. – acudars

Bootstrap-Grid funktioniert nicht mit Canvas

Antwort

Verwandte Themen