Siatka startowa nie działa z płótnem

Question

Próbuję umieścić wykres przy użyciu wykresu Chart.js w wierszu z span6. Chart.js używa <canvas> i potrzebuje własności height i width. Ustawiłem height na to, czego potrzebuję, a width na 100%, ale nie rozciąga się, aby wypełnić element div ustawiony na span6.

Wszelkie pomysły?

<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> 

Answer 1

w pliku JavaScript gdzie dodać wszystkie opcje na wykresie

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

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

Answer 2

udało mi się rozwiązać Twój problem!

Proszę to sprawdzić jsFiddle.

Spróbuj zmienić rozmiar paneli, aby zobaczyć, jak działa.

Zasadniczo, można wywołać funkcję, która reaguje na zmiany rozmiaru okna:

$(window).resize(respondCanvas); 

że wyzwala pobrać szerokości i wysokości elementu nadrzędnego, że jest zamknięte, a następnie ponownie rysuje wykres.

function respondCanvas() { 
    c.attr('width', jQuery("#daily").width()); 
    c.attr('height', jQuery("#daily").height()); 
    //Call a function to redraw other content (texts, images etc) 
    myNewChart = new Chart(ct).Bar(data, options); 
} 

Można dopasować wszystkie małe fragmenty, takie jak własne identyfikatory, klasy, szerokości i wysokości.