3

tengo un problema al utilizar la libreria CanvasJS. Defino el siguiente div:

<div id="resizable" style="height: 300px;">
    <div id="chartContainer1" style="height: 100%; width: 100%;"></div>
</div>

Y añado este script el antes de cerrar el body:

$(document).ready(function () {
    //Better to construct options first and then pass it as a parameter
    var options1 = {
        title: {
            text: "Chart inside a jQuery Resizable Element"
        },
                animationEnabled: true,
        data: [
        {
        type: "column", //change it to line, area, bar, pie, etc
            dataPoints: [
                { y: 10 },
                { y: 6 },
                { y: 14 },
                { y: 12 },
                { y: 19 },
                { y: 14 },
                { y: 26 },
                { y: 10 },
                { y: 22 }
            ]
        }
        ]
    };

    $("#resizable").resizable({
        create: function (event, ui) {
            //Create chart.
            $("#chartContainer1").CanvasJSChart(options1);
        },
        resize: function (event, ui) {
            //Update chart size according to its container's size.
            $("#chartContainer1").CanvasJSChart().render();
        }
    });

});

Esta como en el ejemplo que viene en la documentación, solo he cambiado

window.onload = function () {

Por esto:

$(document).ready(function () {

Pero a la hora de cargar la página, no me aparece al 100% de ancho, sino solo un 30% mas o menos, pero si reduzco el tamaño de la ventana y la agrando, si se coloca con ancho al 100%. Alguna idea de cual puede ser el problema? Gracias!

El contenido html importante seria asi:

Css del head

<link href="path_to_folder/css/jquery-ui.min.css" rel="stylesheet" />

Inicio del body

<div class="container" style="margin-bottom:20px;margin-top: 20px;">
    <div class="row">
       <div class="col-md-12">
           <div id="resizable" style="height: 300px; width:100%;">
              <div id="chartContainer1" style="height: 100%; width: 100%;"></div>
           </div>
       </div>
   </div>
</div>

El footer seria asi

<script src="path_to_folder/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="path_to_folder/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="path_to_folder/js/jquery.canvasjs.min.js"></script>

Y debajo de esto va el script que he añadido arriba

14
  • Porqué te es necesario cambiar el window.onload ? Si es 100% necesario mírate este link: stackoverflow.com/questions/32872620/… Commented el 16 jun. 2016 a las 8:24
  • Lo cambie, por si se estaba ahi el error, pero de las dos formas sigue sin cargar con el ancho al 100%
    – user9099
    Commented el 16 jun. 2016 a las 8:26
  • y SI cambias el width del div resizable de 300px a 100%? Commented el 16 jun. 2016 a las 8:27
  • Lo acabo de añadir pero sigue saliendo solo al 30% de ancho mas o menos
    – user9099
    Commented el 16 jun. 2016 a las 8:28
  • 1
    Creo que el problema está en <div class="col-md-12"> --> Puedes quitarlo temporalmente (y puedes poiner width 100% a TODOS los divs? Sólo para comprobar. Commented el 16 jun. 2016 a las 8:38

1 respuesta 1

0

¿El div #resizable esta dentro de otro div?

Sin saber la respuesta, intenta hacer lo siguiente:

<div id="resizable" style="height:300px; width:100% !important;">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.