图表不遵守宽度和高度属性

Question

我的Morris JS图表在引导列中没有很好地呈现，就像文档告诉我给容器的宽度和高度属性，但图表不遵守它们。

有人有线索要解决它吗？

var graficoCampanhaefbe = Morris.Bar({
    element: 'graficoCampanhaefbe',  
    data: [{"nome": "Redes Sociais 1459", "destinatarios": "2", "abertos": "4", "clicados": "2", "capturados": "3"}], 
    barColors: ['#00A5DB','#6EA700','#FFB203','#B50000'],
    xkey: 'nome', 
    ykeys: ['destinatarios','abertos', 'clicados', 'capturados'],
    labels: ['Destinatario','Abertos', 'Clicados', 'Capturados'], 
    hideHover: 'always'
}); 

当我设置resize: true并调整窗口大小时，图形呈现完美。

Answer 1

在$(document).ready中，尝试在初始化Morris Bar并将resize Morris Bar参数设置为true后触发窗口调整大小：

$(document).ready(function () {
    var graficoCampanhaefbe = Morris.Bar({...});

    //graficoCampanhaefbe.redraw(); //if needed
    $(window).trigger('resize');
});

Answer 2

您应该将class="col-xs-12"添加到图表或其容器中。

您尚未指定HTML代码段，但它应该是您投放图表的元素。