css page-break-asure not work for html canvas element

Question

我从echarts库中绘制了一些动态图。然后使用以下标记将这些图表添加到div元素中

<div class="row">
    <div class="col-6" id='bar-chart-1' style="width=100%; height=500px"></div>
    <div class="col-6" id='bar-chart-2' style="width=100%; height=500px"></div>
    <div class="col-6" id='bar-chart-3' style="width=100%; height=500px"></div>
    <div class="col-6" id='bar-chart-4' style="width=100%; height=500px"></div>
</div>

但是有些图形显示在两页中。我想避免这种情况。并写成CSS，

#bar-chart-1, #bar-chart-2, #bar-chart-3, #bar-chart-4{
page-break-inside: avoid;
}

canvas{
page-break-inside: avoid;
}

page-break规则对于其他div效果很好，并且图像仅不适用于echarts生成的canvas元素。有什么建议吗？

Answer 1