边栏(菜单)折叠时，图形(chartjs.org)无法正确拉伸 [英] graph (chartjs.org) does not stretch properly when sidebar(menu) is collapsed

问题描述

我正在尝试使用引导程序创建一个简单的侧边栏菜单，并在右侧添加响应内容，但是当菜单折叠时，图形/画布无法在其容器中拉伸整个宽度时，便一直困扰于此问题.就是说，我知道我需要某种方式再次渲染图形，但是不幸的是我无法对其进行整理:(我也试图用jscript调整画布的大小，但是问题仍然存在.任何帮助将不胜感激:)

I am trying to create a simple sidebar menu with bootstrap and add responsive content on the right, but have been stuck with the issue when graph/canvas does not stretch full width within it's container when menu is collapsed. that said, I know I need somehow to render the graph again but I was unfortunately not able to sort it out :( I have also tried to resize canvas with jscript but the problem persists. any help would be appreciated :)

这是我用来折叠/展开侧边栏的简单jscript

here is a simple jscript I use to collapse/expand the sidebar

/*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/

here is the working example and the rest of the code. try to collapse the sidebar to see what I am talking about https://jsfiddle.net/ob0w8thn/9/

并且是的图形被设置为在全局选项内响应

and yes graph is set to be responsive within global options

maintainAspectRatio: true,
responsive: true,

推荐答案

虽然responsive: true确实触发了图表调整大小(以适应其包装)，但此处理程序附加到了窗口调整大小事件.您只需要执行此代码在CSS转换结束时所做的任何操作即可.像

While responsive: true does trigger a chart resize (to fit its wrapper), this handler is attached to the window resize event. You just need to do whatever this code does in the CSS transition end. Something like

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

---

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

注意:过渡结束事件会触发 EACH 过渡属性.因此，如果您有2个动画属性(例如padding/width)，则上面的内容将触发两次.

Note : The transition end event triggers for EACH transitioned property. So if you have 2 animated properties (say padding / width), the above is going to trigger twice.

对于resize()来说这不是问题(除了运行两次)，但是如果添加的其他功能不是幂等的，则会引起问题.在这种情况下，您应该监听任何一个过渡属性，就像这样

This is not a problem for the resize() (besides it running twice), but if you are adding any other functionality that is not idempotent, it will cause problems. In this case you should be listening for any one of the transitioned properties, like so

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

这篇关于边栏(菜单)折叠时，图形(chartjs.org)无法正确拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！