在调整窗口大小之前，Chart.js 不会使用 vue.js 渲染

Question

我有一个使用 Bootstrap、vue.js 和 chart.js 的简单应用。 HTML 模板非常简单。在搜索我的错误时，我注意到这个问题通常是在尝试在选项卡或模式中呈现图表时引起的，但我的图表没有在模式或选项卡中。

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

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

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

但是当我调整窗口大小时，一切都改变了，我可以正确地看到图表。

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

为什么页面加载时高度和宽度不正确？

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>

Answer 1

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

使用$nextTick() 推迟到更新完成：

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

这通常在这些情况下可以解决问题，至少在 Vue 方面。关于chart.js的配置不能多说。