莫里斯条在打印时调整大小

Question

我对如何打印 Morris 条结果有疑问。在html，一切都很好，但是当我要打印时，似乎一切都不再适合了。这是我所做的：

<script>
function myFunction() {
    window.print();
}
</script>

    <div id="bar" class="bar" class="col-sm-12"></div>

    <script>
    Morris.Bar({
      barGap:4, // Espace entre les colonnes
      barSizeRatio:0.90, // Largeur des colonnes
      element: 'bar',
      data: dataChart,
      xkey: 'y',
      ykeys: ['a'],
      //barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'],
      labels: ['Actuel'],
    });
    </script>

这是打印时正常视图时得到的结果（不好，太大）：

如果我在打印页面上刷新，尺寸会再次改变（就好了）：

svg 好像有问题，因为这是我刷新后得到的，而且大小合适:

如果您有任何想法，请告诉我。

感谢您的帮助和时间。

Answer 1

报告了一个类似的问题：https://github.com/morrisjs/morris.js/issues/652

根据那个link，你可以使用：

<div id="myBar" class="col-sm-6"></div>

在JavaScript中：

var bar = Morris.Bar({......});

最后：

$('#myBar').resize(function () { bar.redraw(); });

莫里斯条在打印时调整大小

Morris bar resize while print

javascript

css

printing

morris.js