Vue.js Vue Chart.js不'；无法在Vue选项卡中初始化

我有一个组件，有两个

vue选项卡

s，每个组件中有两个

vue图表js

实例。虽然初始化时没有错误，但当我试图通过

document.querySelector（“#mySecondChart”）.toDataURL（）从未激活选项卡中提取图像时，未激活选项卡中的图表不会返回任何内容。只有当我单击该选项卡并将其激活时，此图表才会转换为图像。默认活动选项卡中的图表将转换为图像，不会出现错误。代码如下：

<template>
    <div>
        <vue-tabs>
            <v-tab>
                <my-first-chart-component/>
            </v-tab>
            <v-tab>
                <my-second-chart-component/>
            </v-tab>
        </vue-tabs>
        <button @click="extractCharts">Extract charts</button>
    </div>
</template>
<script>
     // imports omitted
     export default {
       name: 'MyParentComponent',
       // data and props omitted
       methods: {
           extractCharts() {
               let charts = document.querySelectorAll('chart')
               let firstChart = charts[0].toDataURL();
               let secondChart = charts[1].toDataURL();
               console.log(`${firstChart} \n\n\n ${secondChart}`)
           }
       }
     }
</script>


提取图表
//省略进口
导出默认值{
名称：“MyParentComponent”，
//省略数据和道具
方法：{
提取图表（）{
让charts=document.queryselectoral（'chart'））
设firstChart=charts[0]。toDataURL（）；
设secondChart=charts[1]。toDataURL（）；
console.log（`${firstChart}\n\n\n${secondChart}`）
}
}
}

当我单击按钮而不转到第二个选项卡时，我的方法将输出第一个图表的DOMString，而第二个图表的nothing。只有当我首先访问第二个选项卡，然后单击按钮时，我的方法才会返回两个字符串化图表。是否有任何方法可以在不激活包含第二张图表的选项卡的情况下强制渲染第二张图表？
在搜索文档后，我发现问题的原因在于chart.js本身——如果包含图表的父元素具有
display:none
或以其他方式隐藏，在其中渲染的画布的高度和宽度属性等于0。如果在图表实例初始化期间将以下参数传递给其选项，则可以避免此情况：

options: {
    // other options
    responsive: false,
    maintainAspectRatio: true
}

然后绑定到图表实例的canvas元素将保留在标记中传递给它的宽度和高度属性（即
），并且它的
显示
属性将保留
块的值，即使父元素被隐藏。
在搜索文档后，我发现问题的原因在于Chart.js本身——如果包含图表的父元素具有
display:none
或以其他方式隐藏，则其中呈现的画布的高度和宽度属性等于0。如果在图表实例初始化期间将以下参数传递给其选项，则可以避免此情况：

options: {
    // other options
    responsive: false,
    maintainAspectRatio: true
}

然后绑定到图表实例的canvas元素将保持在标记中传递给它的宽度和高度属性（即
），并且它的
显示
属性将保留
块的值，即使父元素是隐藏的。
这对我很有效。
把代码放在挂载的钩子里

var canvas = document.getElementById('line-chart');

canvas.removeAttribute('width');
canvas.removeAttribute('height');
canvas.setAttribute('style',  'display: block; width: 100% !important; height: auto !important;');

这对我有用。
把代码放在挂载的钩子里

var canvas = document.getElementById('line-chart');

canvas.removeAttribute('width');
canvas.removeAttribute('height');
canvas.setAttribute('style',  'display: block; width: 100% !important; height: auto !important;');