css – gridster c3图表自动调整大小问题

我在gridster中遇到c3图表大小调整问题.任何人都可以帮助我如何使图表根据他们所在的网格盒正确自动调整大小？请找到 Plunker

我给出了选项中的大小：

size: {
        height: 100,width: 100
    }

如果我删除此大小属性,图表将开箱即用.但它们在格子盒中太小了.如何使这些图表自动占据它们所在的格栅盒的整个高度和宽度？

解决方法

您正在使用的选项：

size: {
    height: 100,width: 100
}

将svg元素的高度和宽度设置为100px而不是100％
我试过了

size: {
    height: '100%',width: '100%'
}

这将成功地将宽度设置为100％但不知何故高度将设置为320px

所以,如果你把它添加到你的CSS：

.c3 svg {
  width: 100%;
  height: 100%;
}

这将解决您的尺码问题.

编辑

只需稍微更改即可设置初始大小,并在resize – stop事件处理程序中向控制器添加一些注释,您需要根据新大小添加一些图表大小调整. See it here

resizable: {
     enabled: true,handles: ['n','e','s','w','ne','se','sw','nw'],// optional callback fired when resize is started
     start: function(event,$element,widget) {},// optional callback fired when item is resized,resize: function(event,// optional callback fired when item is finished resizing 
     stop: function(event,widget) {
        // here should update the size according to the widget size
        // widget.sizeX (* 160px) and widget.sizeY (* 160px)
        // and further adjustments
     } 
  },