Vue Chart.js 未在 Vue 选项卡中初始化

Question

我有一个包含两个 vue-tab 的组件，每个组件中都有两个 vue-chart-js 实例。尽管它们初始化时没有错误，但当我尝试通过 document.querySelector('#mySecondChart').toDataURL() 从中提取图像时，未激活选项卡 returns 中的图表什么也没有。只有当我单击该选项卡并将其激活时，该图表才会转换为图像。默认活动选项卡中的图表无误地转换为图像。这是代码：

<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>

当我单击按钮而不转到第二个选项卡时，我的方法输出第一个图表的 DOMString 而第二个图表不输出任何内容。只有当我首先访问第二个选项卡，然后单击按钮时，我的方法 returns 两个字符串化图表。有什么方法可以在不激活包含它的选项卡的情况下强制呈现第二个图表？

Answer 1

通过文档搜索后，我发现问题的原因在于 Chart.js 本身——如果包含图表的父元素具有 display: none 或以其他方式隐藏，其中呈现的 canvas 获得等于 0 的高度和宽度属性。如果在图表实例的初始化过程中将以下参数传递给其选项，则可以避免这种情况：

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

然后绑定到图表实例的 canvas 元素将保持在标记中传递给它的宽度和高度属性（即 <canvas id="myChart" width="1137" height: "447"></canvas>）并且它的 display 属性将即使父元素被隐藏，仍保留 block 的值。

Answer 2

这对我有用。将代码放在 mounted 钩子中。

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

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

Vue Chart.js 未在 Vue 选项卡中初始化

Vue Chart.js doesn't get initialized in Vue Tab

vue.js

chart.js

vue-chartjs