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

Posted 2023-05-07

技术标签:

【中文标题】gridster c3 图表自动调整大小问题【英文标题】：gridster c3 charts auto resizing issue 【发布时间】：2017-05-14 11:18:36 【问题描述】：

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

我在选项中给出了尺寸：

 size: 
        height: 100,
        width: 100

如果我删除这个 size 属性，图表就会开箱即用。但是它们在网格盒中太小了。如何使这些图表自动占据它们所在的网格框的全部高度和宽度？

【问题讨论】：

看看这个。 css-tricks.com/scale-svg 【参考方案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 事件处理程序上将一些 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
      
  ,

【讨论】：

DDan，您能否修改我原来的 plunker 并使其正常工作。因为我对我在问题中发布的 plunker 进行了这些更改，但它仍然没有按预期工作。请找到使用您的解决方案更新的 plunker 仍然无法按预期工作plnkr.co/edit/5G7bGf2EZ9nKLA8se0oZ?p=preview。很抱歉我的回复晚了，因为我上周整个人都休息了。嗨，我不会解决完整的问题，但可以提供一些指示。 plnkr.co/edit/NWBxUo?p=preview 我编辑了控制器。我已经设置了一些初始大小并在 resize.stop 回调中添加了注释。这就是你应该关注的地方。在该事件中，您应该根据新的小部件大小调整图表的大小。【参考方案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 中使用：