Griglia di bootstrap non funzionante con canvas

Sto provando a posizionare un grafico utilizzando Chart.js su una riga con span6. Chart.js utilizza <canvas> e ha bisogno di una proprietà height e width. Ho impostato il height per quello che mi serve e lo width al 100% ma non si allunga per riempire il div che è impostato su span6.Griglia di bootstrap non funzionante con canvas

Qualche idea?

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

fonte

2013-07-19 Anonymous

nel file JavaScript in cui si aggiungono tutte le opzioni per il grafico

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

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

fonte

2013-07-19 07:59:14 acudars

controllare anche questo: http://stackoverflow.com/questions/11894607/how-do-i-dynamically-scale-thehtml5-canvas-element – acudars

Ho precedentemente impostato le opzioni su null. Per usarli, creo semplicemente un array di opzioni? var options = [scaleOverride: true] ;? –

Hai guardato questo: http://www.chartjs.org/docs/ Line.defaults = {scaleOverride: true} – acudars

sono riuscito a risolvere il tuo problema!

Controllare questo jsFiddle.

Provare a ridimensionare i pannelli per vederlo in azione.

In sostanza, si chiama una funzione che risponde al ridimensionamento della finestra:

$(window).resize(respondCanvas);

che innesca un'operazione di recupero della larghezza e altezza dell'elemento genitore che è incapsulato in e quindi ridisegna il grafico.

È possibile regolare tutti i piccoli bit come ID, classi, larghezza e altezze.

fonte

2013-07-19 10:02:25 acudars

Ti sarei grato se contrassegni questo come risposta se sei soddisfatto. – acudars

Griglia di bootstrap non funzionante con canvas

risposta

Problemi correlati