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

Question

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

我在选项中给出了尺寸:

 size: {
        height: 100,
        width: 100
    }

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

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%;
}

这将解决您的尺寸问题。

编辑

只需一个小的更改即可设置初始大小，并在调整大小 - 停止事件处理程序上向控制器添加一些注释，您将需要根据新大小添加一些图表大小调整。看这里

  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;

我希望这有帮助。