GridStack容器中RGraph图表无法填充满及自适应问题咨询

嘿，我来帮你搞定这两个头疼的问题！结合GridStack和RGraph的时候，确实会遇到图表尺寸匹配和自适应的问题，下面分两步给你解决：

一、让图表填充满GridStack容器 #

RGraph的图表基于Canvas绘制，默认Canvas有固定尺寸，而且图表本身带有默认边距，这两个点是导致填不满的核心原因，你可以这么改：

1. 同步Canvas尺寸与容器尺寸
   不要用CSS设置Canvas的宽高，而是直接设置Canvas元素的width和height属性，让它完全贴合GridStack容器的实际尺寸：

   const container = document.getElementById('你的容器ID');
   const cvs = container.querySelector('#cvs');
   // 直接设置Canvas的绘图区域尺寸等于容器的实际尺寸
   cvs.width = container.clientWidth;
   cvs.height = container.clientHeight;
   

2. 移除RGraph图表的默认边距
   RGraph的折线图、仪表盘默认带有内边距，你需要把这些边距设为0，让图表撑满整个Canvas：

   var line = new RGraph.Line(cvs, data)
       .set('margin.left', 0)
       .set('margin.right', 0)
       .set('margin.top', 0)
       .set('margin.bottom', 0)
       // 其他配置...
       .draw();
   

   如果是仪表盘（Gauge），可以直接设置.set('margin', 0)来移除整体边距。

二、实现容器尺寸变化时图表自适应 #

GridStack提供了尺寸变化的事件，我们可以监听这个事件，在容器大小改变时重新调整Canvas尺寸并重绘图表：

1. 监听GridStack的尺寸变化事件
   推荐用resizestop事件（调整结束后触发），避免拖拽过程中频繁重绘：

   $('.grid-stack').on('resizestop', function(event, ui) {
       const container = ui.item[0]; // 获取当前调整的GridStack容器
       const cvs = container.querySelector('#cvs');
       
       // 更新Canvas尺寸
       cvs.width = container.clientWidth;
       cvs.height = container.clientHeight;
       
       // 重置并重绘图表
       myChart.reset(); // 重置图表状态
       // 重新设置边距（确保还是0）
       myChart.set('margin.left', 0)
              .set('margin.right', 0)
              .set('margin.top', 0)
              .set('margin.bottom', 0);
       // 如果你有其他依赖尺寸的配置，比如坐标轴标签位置，也可以在这里重新调整
       myChart.draw(); // 重新绘制图表
   });
   

2. 多图表的处理技巧
   如果你有多个GridStack容器里的图表，要给每个图表实例单独保存引用，比如给容器加自定义属性绑定图表ID，在resizestop事件里找到对应的实例进行重绘。

完整示例代码片段 #

把上面的逻辑整合起来，大概是这样：

$(document).ready(function () {
    // 初始化GridStack
    $('.grid-stack').gridstack({
        cellHeight: 80,
        verticalMargin: 10
    });

    // 封装图表初始化函数
    function initChart(containerId) {
        const container = document.getElementById(containerId);
        const cvs = container.querySelector('#cvs');
        // 同步Canvas与容器尺寸
        cvs.width = container.clientWidth;
        cvs.height = container.clientHeight;

        var data = [[4,5,8,11,15], [1,3,2,5,9]];
        var tips = ['a','b','c','d','e','yf','yh','tt','hh','ll'];
        
        return new RGraph.Line(cvs, data)
            .set('margin.left', 0)
            .set('margin.right', 0)
            .set('margin.top', 0)
            .set('margin.bottom', 0)
            .set('labels', ['a','b','c','d','e'])
            .set('tooltips', tips)
            .draw();
    }

    // 初始化第一个图表并保存实例
    const myLineChart = initChart('grid-item-1');
    // 如果有仪表盘，同理初始化
    // const myGaugeChart = initChart('grid-item-2');

    // 监听尺寸变化事件
    $('.grid-stack').on('resizestop', function(event, ui) {
        const container = ui.item[0];
        const cvs = container.querySelector('#cvs');
        const chartId = container.getAttribute('data-chart-id'); // 自定义属性绑定图表实例
        
        // 更新Canvas尺寸
        cvs.width = container.clientWidth;
        cvs.height = container.clientHeight;

        // 根据绑定的实例重绘
        if (chartId === 'line') {
            myLineChart.reset();
            myLineChart.set('margin.left', 0)
                       .set('margin.right', 0)
                       .set('margin.top', 0)
                       .set('margin.bottom', 0);
            myLineChart.draw();
        }
        // if (chartId === 'gauge') { ... }
    });
});

这样调整后，你的图表应该就能完全填满GridStack容器，并且在容器尺寸变化时自动适配了！

内容的提问来源于stack exchange，提问作者PabloB