Bootstrap grille de ne pas travailler avec de la toile

Je suis en train de placer un graphique à l'aide d'Chart.js sur une ligne avec span6. Chart.js utilise <canvas> et a besoin d'un height et width de la propriété. J'ai réglé le height à ce dont j'ai besoin et le width à 100%, mais il n'est pas de s'étirer pour remplir la div qui est fixé à span6.

Des idées?

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

OriginalL'auteur | 2013-07-19

  1. 16

    J'ai réussi à résoudre votre problème!

    Veuillez cocher cette jsFiddle.

    Essayer de redimensionnement des panneaux pour la voir en action.

    Fondamentalement, vous appelez une fonction qui répond au redimensionnement de la fenêtre:

    $(window).resize(respondCanvas);

    qui déclenche une extraction de la hauteur et la largeur de l'élément parent qu'il est encapsulé dans puis redessine votre graphique.

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

    Vous pouvez régler tous les petits morceaux comme votre propre Id, de classes, de la largeur et de la hauteur.

    J'apprécierais si vous cochez cette comme réponse si vous êtes satisfait.

    OriginalL'auteur acudars

  2. 0

    dans le fichier JavaScript vous permet d'ajouter toutes les options du graphique

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

//Boolean - If we want to override with a hard coded scale
    scaleOverride : true,
    vérifiez également ceci: stackoverflow.com/questions/11894607/...
    J'ai déjà définissez les options à la valeur null. Pour utiliser je viens de créer un tableau d'options? var options = [scaleOverride : true];?
    Avez-vous regardé ceci: chartjs.org/docs de la Ligne.par défaut = { scaleOverride : true }
    J'ai eu, mais je ne suis pas sûr de savoir comment le mettre en œuvre (je suis nouveau sur JS). Pourriez-vous me montrer? J'ai regardé à travers l'exemple de code, mais aucun d'entre eux de mettre en œuvre des options.
    Merci pour cela. Malheureusement, le tableau n'est toujours pas à s'étirer pour remplir la largeur de la div. Cette option définit l'échelle des données sur le graphique, pas de la taille du graphique lui-même.

    OriginalL'auteur acudars