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

【问题标题】：Vue Chart.js doesn't get initialized in Vue TabVue Chart.js 未在 Vue 选项卡中初始化
【发布时间】：2018-02-21 09:33:05
【问题描述】：

我有一个包含两个vue-tabs 的组件，每个组件都有两个vue-chart-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>

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

【问题讨论】：

标签： vue.js chart.js vue-chartjs

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这对我有用。将代码放入挂载的钩子中。

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

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

【讨论】：