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
window.onload
? Si es 100% necesario mírate este link: stackoverflow.com/questions/32872620/…resizable
de 300px a 100%?<div class="col-md-12">
--> Puedes quitarlo temporalmente (y puedes poiner width 100% a TODOS los divs? Sólo para comprobar.