在窗口调整大小之前，Chart.js不会使用vue.js进行渲染 [英] Chart.js will not render using vue.js until window resizes

问题描述

我有一个使用Bootstrap，vue.js和chart.js的简单应用程序。 HTML模板非常简单。我在搜索错误时注意到，尝试在选项卡或模式中呈现图表时经常会导致此问题，但在模式或选项卡中却没有图表。

I have a simple app that uses Bootstrap, vue.js, and chart.js. The HTML template is pretty simple. I've noticed while searching for my error that this issue is often caused when trying to render a chart in a tab or modal but I don't have my chart in a modal or tab.

只要我调整浏览器窗口的大小，图表就会正确呈现并缩放以适合div和所有内容。

As soon as a I resize my browser window, the chart renders properly and scales to fit the div and everything.

无论出于何种原因，当页面第一次加载时，canvas HTML标签的呈现方式如下：

For whatever reason, when the page first loads, the canvas HTML tag renders like this:

<canvas id="graph" width="0" height="0" style="margin: auto; width: 0px; display: block; height: 0px;"></canvas>

但是当我调整窗口大小时，所有内容都会改变，并且可以正确地看到图表。

But when I resize the window, everything changes and I see the chart properly.

<canvas id="graph" width="493" height="328" style="margin: auto; width: 493px; display: block; height: 328px;"></canvas>

为什么不获得高度&

Why doesn't it get the height & width correct on page load?

HTML模板

<div class="panel panel-default">
      <div class="panel-heading">Chart List</div>
      <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <defaultchart>
                </defaultchart>
            </div>
            <div class="col-sm-6">
                <chartlistview
                    :data="{{ $private }}"
                    :columns="{{ json_encode($columns) }}"
                >
                </chartlistview>
            </div>
        </div>
            </div>
    </div>

DefaultChart.vue

<template>
  <div>
    <canvas 
      id="graph" 
      v-el:canvas 
      width="600" 
      height="400" 
      style="margin:auto; width: 600px;"
    ></canvas>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        ourChart: '',
        chartData: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
          }]
        }
      };
    },

    ready() {

      this.drawChart();     
    },

    methods: {

      drawChart: function() {

        if (this.ourChart) {
          this.ourChart.destroy();
        }
        var context = document.querySelector('#graph').getContext('2d');
        this.ourChart = new Chart(context, {
          type: 'line',
          data: this.chartData
          // wouldn't render at all with this regardless of resizing
          /*options: {
            response: true,
            maintainAspectRatio: false
          }*/
        });

        // added these lines to see if it would fix the issue; it didn't
        this.ourChart.render();
        this.ourChart.update();
      }

    }
  };
</script>

推荐答案

在 ready中访问DOM（ ）很棘手，因为Vue异步更新DOM，因此更改可能尚未完全应用，并且/或者浏览器尚未完成新的布局。

Accessing DOM in ready() is tricky, because Vue updates DOM asynchronously, so changes may have not been completely applied yet, and/or the browser has not yet done a new layout.

使用 $ nextTick（）推迟到更新完成：

ready() {
  this.$nextTick(function() {
    this.drawChart();     
  })
},

此通常通常在这种情况下会起作用，至少是在Vue方面。不能说太多关于chart.js的配置。

This usually does the trick in these situations, at least on the Vue side of things. Can't say much about the chart.js config.

这篇关于在窗口调整大小之前，Chart.js不会使用vue.js进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！