Question

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

我在选项中给出了尺寸：

<stdint.h>

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

Answer 1

您正在使用的选项：

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事件处理程序中向控制器添加一些注释，您需要根据新大小添加一些图表大小调整。 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 } },

Answer 2

不久前我遇到过类似的问题。我所做的是使用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;

我希望这会有所帮助。

Answer 3

使用nvd3插件这与c3插件相同也可以顺利使用gridster，请找到以下链接

https://krispo.github.io/angular-nvd3/#/dashboard

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

3 个答案: