莫里斯线图被隐藏后变形

Question

我在我的页面中设置了一个莫里斯线图，如下所示：

var chart = new Morris.Line({
        element: 'myfirstchart',

        xkey: 'Date',

        ykeys: ['Sales'],


        labels: ['Sales'],
        resize: true,
        redraw: true,
        xLabels: 'day',
        parseTime: false
    });

并在发布后显示结果（在 jquery 发布的 done 方法中）我这样做：

 chart.setData(data.lineData);
 chart.redraw();
 $(window).trigger("resize");

但是图看起来很丑，变形完全是这样的：

图形本身隐藏在一个 div 中，然后在显示结果时显示...

这可能是什么问题？

Answer 1

是的，这是 Morris Chart 的一个众所周知的弱点。您可以通过调整 svg 元素的大小及其父元素宽度来完成

var t_w = $('#myfirstchart').parent().width();
$('#myfirstchart svg').width(t_w);
chart.redraw();