Bootstrap grid не работает с холстом

Question

Я пытаюсь разместить диаграмму с использованием Chart.js в строке с span6. Chart.js использует <canvas> и нуждается в height и width. Я установил height в то, что мне нужно, и width - 100%, но он не растягивается, чтобы заполнить div, который установлен на span6.

Любые идеи?

<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

в файле JavaScript, где вы добавляете все варианты для диаграммы

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

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

Answer 2

мне удалось решить вашу проблему!

Пожалуйста, проверьте это jsFiddle.

Попробуйте изменить размеры панелей, чтобы увидеть их в действии.

В принципе, вы вызываете функцию, которая реагирует на изменение размера окна:

$(window).resize(respondCanvas); 

, который запускает выборку ширины и высоты родительского элемента, он инкапсулируется в и затем перерисовывает диаграмму.

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); 
} 

Вы можете настроить все крошечные биты, как ваши собственные идентификаторы, классы, ширину и высоту.