Jquery 为什么Chart.js canvas不响应由左边距更改引起的容器宽度更改?
看看这个。 我使用一个切换按钮来改变容器左边的边距,然后改变图表画布容器的宽度。但图表似乎对宽度的变化没有反应Jquery 为什么Chart.js canvas不响应由左边距更改引起的容器宽度更改?,jquery,css,canvas,chart.js,Jquery,Css,Canvas,Chart.js,看看这个。 我使用一个切换按钮来改变容器左边的边距,然后改变图表画布容器的宽度。但图表似乎对宽度的变化没有反应 Html: <div id="app"> <div id="sidebar"> <button id="toggle">≡</button> </div> <div id="main"> <div> <canvas i
<div id="app">
<div id="sidebar">
<button id="toggle">≡</button>
</div>
<div id="main">
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</div>
html, body{
margin: 0;
}
#app{
position: absolute;
height: 100%;
width: 100%;
}
#toggle{
width: 40px;
margin: 5px;
padding: 5px;
}
#sidebar{
position: absolute;
height: 100%;
width: 50px;
background: #ccc;
}
#main{
padding: 5px;
margin-left: 50px;
position: relative;
height: 100%;
}
.side-open #sidebar{
width: 100px;
}
.side-open #main{
margin-left: 100px;
}
您的画布似乎没有响应,但如果您将
#myChart[style]{width:100%!important;}
添加到CSS中,您就可以实现这一点。不要担心!重要信息
,因为它仅在您的画布
具有内联CSS.Nope时才起作用,这是合乎逻辑的!加载页面时,图形将被初始化,图表的宽度将被设置!单击切换按钮后,将整个部分100px向右移动!您没有定义如果单击切换按钮,图表也应该调整大小!设置选项:响应不会为您带来好处@vivekkupadhyay您的解决方案奏效了。:-@Rotan075,但我相信你们知道,在main中添加一个100px的边距将使其内容宽度缩小100px。图表需要自动响应其容器宽度的更改。@vivekkupadhyay您的解决方案在某种程度上是可行的,但chart.js似乎无法重新绘制图表。画布只是拉伸或收缩以填充宽度。这会扭曲渲染的文本。我必须手动更新画布吗?
html, body{
margin: 0;
}
#app{
position: absolute;
height: 100%;
width: 100%;
}
#toggle{
width: 40px;
margin: 5px;
padding: 5px;
}
#sidebar{
position: absolute;
height: 100%;
width: 50px;
background: #ccc;
}
#main{
padding: 5px;
margin-left: 50px;
position: relative;
height: 100%;
}
.side-open #sidebar{
width: 100px;
}
.side-open #main{
margin-left: 100px;
}