Question

我有一个包含两个vue-tab的组件，每个组件中有两个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而不输出第二个图表的DOMString。只有当我首先访问第二个选项卡，然后单击按钮时，我的方法才会返回两个字符串化的图表。有没有办法强制获得第二个图表，甚至没有激活包含它的选项卡？

Answer 1

在搜索完文档之后，我发现问题的原因在于Chart.js本身 - 如果包含图表的父元素具有y = 2 For x = 2 To raw_material not_started = ws_raw_material.Cells(x, 7).Value material = ws_raw_material.Cells(x, 1).Value Do While not_started > 0 And material = ws_material_usage.Cells(y, 1) If usage_amt = 0 Then usage_amt = ws_material_usage.Cells(y, 5) End If If not_started + usage_amt >= 0 Then ws_raw_material.Cells(x, 7) = usage_amt + not_started If ws_material_usage.Cells(y, 4) = "SCRAPPED" Then ws_raw_material.Cells(x, 6) = -usage_amt + ws_raw_material.Cells(x, 6).Value Else: ws_raw_material.Cells(x, 5) = -usage_amt + ws_raw_material.Cells(x, 5).Value End If not_started = ws_raw_material(x, 7).Value usage_amt = 0 y = y + 1 Else: ws_raw_material.Cells(x, 7) = 0 If ws_material_usage.Cells(y, 4) = "SCRAPPED" Then ws_raw_material.Cells(x, 6) = remaining + ws_raw_material.Cells(x, 6).Value Else: ws_raw_material.Cells(x, 5) = not_started + ws_raw_material.Cells(x, 5).Value End If redemp_amt = usage_amt + not_started remaining = 0 End If Loop Next x或者以其他方式隐藏，则呈现画布在它中获取高度和宽度属性等于0.如果在图表实例初始化期间将以下参数传递给其选项，则可以避免这种情况：

display: none

然后绑定到图表实例的canvas元素将保持宽度和高度属性在标记中传递给它（即options: { // other options responsive: false, maintainAspectRatio: true }），它的<canvas id="myChart" width="1137" height: "447"></canvas>属性将保留为display的值即使隐藏了父元素。

Answer 2

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

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选项卡中初始化

2 个答案: