当侧边栏（菜单）折叠时，图表（chartjs.org）无法正确拉伸

Question

我正在尝试使用 bootstrap 创建一个简单的侧边栏菜单并在右侧添加响应式内容，但是当 graph/canvas 没有在其容器内拉伸全宽时一直遇到这个问题菜单被折叠。也就是说，我知道我需要以某种方式再次渲染图形，但不幸的是我无法将其整理出来:(我也尝试使用 jscript 调整 canvas 的大小，但问题仍然存在。任何帮助将不胜感激:)

这是我用来 collapse/expand 边栏

的简单 jscript

/*COLLAPSE/EXPAND MENU*/
$("#menu-toggle,#menu-toggle-collapsed").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled");
    $("#menu-toggle-collapsed").toggleClass("visible-xs");
});

这是工作示例和其余代码。尝试折叠侧边栏以查看我在说什么 https://jsfiddle.net/ob0w8thn/9/

是的，图表设置为在全局选项中响应

maintainAspectRatio: true,
responsive: true,

Answer 1

虽然 responsive: true 会触发图表调整大小（以适应其包装器），但此处理程序附加到 window 调整大小事件。您只需要执行此代码在 CSS 转换结束时执行的任何操作即可。像

$("#wrapper").on('transitionend webkitTransitionEnd oTransitionEnd', function () {
      myLineChart.resize(myLineChart.render, true);
});

Fiddle - https://jsfiddle.net/k2kjz8s3/

注意：转换结束事件触发 EACH 转换属性。所以如果你有 2 个动画属性（比如填充/宽度），上面的将触发两次。

这对 resize() 来说不是问题（除此之外运行两次），但是如果您要添加任何其他非幂等的功能，则会导致问题。在这种情况下，你应该监听任何一个转换属性，就像这样

function redrawGraph(evt) {
     if (evt.originalEvent.propertyName == 'width') {
     ...

当侧边栏（菜单）折叠时，图表（chartjs.org）无法正确拉伸

graph (chartjs.org) does not stretch properly when sidebar(menu) is collapsed

jquery

twitter-bootstrap

chart.js