Question

我正在尝试创建一个带有引导程序的简单侧边栏菜单，并在右侧添加响应式内容，但是当图形/画布在菜单折叠时没有在其容器内拉伸整个宽度时一直遇到问题。那说，我知道我需要以某种方式再次渲染图形但我很遗憾无法解决它:(我也试图用jscript调整画布大小但问题仍然存在。任何帮助将不胜感激：）

这是一个简单的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确实触发图表调整大小（以适合其包装），但此处理程序附加到窗口调整大小事件。您只需要在CSS转换结束中执行此代码所做的任何操作。像

这样的东西

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

小提琴 - https://jsfiddle.net/k2kjz8s3/

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

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

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

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

1 个答案: