gridster c3图表自动调整大小问题
我正面临着gridster中c3图表大小问题的问题。 任何人都可以帮助我如何让图表根据他们所在的栅格框正确自动调整大小？ 请找到Plunker
我已经给出了选项的大小：
size: {
height: 100,
width: 100
}
如果我删除了这个大小的属性，图表就会出现问题。 但是它们在网格框中太小了。 我如何让这些图表自动占据它们所在的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事件处理程序中向控制器添加一些注释，您需要根据新大小添加一些图表大小。 在这里看到它
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一起使用，请找到下面的链接
https://krispo.github.io/angular-nvd3/#/dashboard
链接地址: http://www.djcxy.com/p/37787.html