我在 gridster 中遇到了 c3 图表大小问题。任何人都可以帮助我如何使图表根据它们所在的网格框正确自动调整大小？请找Plunker
我在选项中给出了尺寸：
size: {
height: 100,
width: 100
}
如果我删除这个 size 属性，图表就会开箱即用。但是它们在网格盒中太小了。如何使这些图表自动占据它们所在的网格框的全部高度和宽度？
【问题讨论】：
标签： angularjs css c3.js gridster
您正在使用的选项：
size: {
height: 100,
width: 100
}
将svg 元素的高度和宽度设置为100px 而不是100%
我试过了
size: {
height: '100%',
width: '100%'
}
这将成功地将width 设置为100%，但不知何故height 将设置为320px
因此，如果您将其添加到您的 css 中：
.c3 svg {
width: 100%;
height: 100%;
}
这将解决您的尺寸问题。
编辑
只需稍作更改即可设置初始大小，并在 resize - stop 事件处理程序上将一些 cmets 添加到您的控制器中，您需要根据新大小添加一些图表大小调整。 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, $element, widget) {},
// optional callback fired when item is finished resizing
stop: function(event, $element, widget) {
// here should update the size according to the widget size
// widget.sizeX (* 160px) and widget.sizeY (* 160px)
// and further adjustments
}
},
【讨论】：
不久前我遇到了类似的问题。我所做的是使用scale()，但它不适用于firefox。
基本上在加载时找到宽度，并在用户更改屏幕尺寸（或任何其他事件，如调整容器大小）时进行新的缩放。
在你的 plunker 底部添加这个：
<script>
let width = window.innerWidth;
window.addEventListener('resize', (event) => {
let newWidth = window.innerWidth;
let ratio = newWidth / width;
let ctnr = document.getElementById('widget1');
ctnr.style.transform = "scale(" + ratio + ")";
});
</script>
这将缩放小部件 1。当然，您可能需要稍微调整一下数字才能找到适合您的。
但是，小部件将保持原位；因此，如果您希望它在左侧对齐，您可以在您的 css 中使用：
transform-origin: 0;
我希望这会有所帮助。
【讨论】：
使用 nvd3 插件，这与 c3 插件相同，也可以顺利使用 gridster，请找到下面的链接
【讨论】：