Estoy tratando de colocar un gráfico con Chart.js en una fila con span6. Chart.js utiliza <canvas> y necesidades de un height y width de la propiedad. He puesto los height a lo que necesito y el width a 100% pero no se estira para llenar el div que se establece en span6.

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

OriginalEl autor | 2013-07-19

2 Comentarios

  1. 16

    Me las arreglé para resolver su problema!

    Por favor revise esta jsFiddle.

    Prueba a cambiar el tamaño de los paneles para ver en acción.

    Básicamente, se llama a una función que responde al cambiar el tamaño de la ventana:

    $(window).resize(respondCanvas);

    que desencadena una captura de la anchura y la altura del elemento primario que es encapsulado en y, a continuación, vuelve a dibujar el gráfico.

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

    Puede ajustar todos los pedacitos como su propio Id, clases, anchura y altura.

    Te agradecería si marca esta respondió como si usted está satisfecho.

    OriginalEl autor acudars

  2. 0

    en el archivo JavaScript donde agregar todas las opciones del gráfico

    new Chart(ctx).Line(data, options );
    
    //Boolean - If we want to override with a hard coded scale
        scaleOverride : true,
    compruebe también este: stackoverflow.com/questions/11894607/…
    Yo antes de establecer las opciones a null. Para utilizarlos sólo debo crear un array options? var opciones = [scaleOverride : true];?
    Has mirado en esto: chartjs.org/docs de la Línea.los valores predeterminados = { scaleOverride : true }
    Yo tenía, pero no estoy seguro de cómo implementarlo (soy nuevo en el JS). ¿Podrías mostrarme? Miré a través de la muestra de código, pero ninguno de ellos implementar opciones.
    Gracias por que. Lamentablemente el gráfico aún no se extiende para llenar el ancho de la div. Esa opción solo establece la escala de los datos en el gráfico, no en el tamaño de la tabla en sí.

    OriginalEl autor acudars

Dejar respuesta

Please enter your comment!
Please enter your name here