0

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

4

2 回答 2

3

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

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

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

于 2018-02-22T20:58:19.987 回答
1

这对我有用。将代码放入已安装的挂钩中。

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

canvas.removeAttribute('width');
canvas.removeAttribute('height');
canvas.setAttribute('style',  'display: block; width: 100% !important; height: auto !important;');
于 2018-12-27T12:16:52.027 回答