Windowsがサイズ変更されるまで、Chart.jsはvue.jsを使用してレンダリングしません。

Question

私は、Bootstrap、vue.js、およびchart.jsを使用するシンプルなアプリを持っています。 HTMLテンプレートはかなり簡単です。私は、この問題は、タブまたはモーダルでチャートをレンダリングしようとしているが、モーダルまたはタブでチャートを持っていないときによく発生するというエラーを検索していることに気付いた。

ブラウザウィンドウのサイズを変更すると、チャートが適切にレンダリングされ、divやすべてに合わせて縮尺されます。何らかの理由で

、ときに、ページが最初にロード、キャンバスの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> 

Vueのは、非同期的にDOMを更新するための変更が完全にまだ適用されていないかもしれのでDefaultChart.vueready()でDOMにアクセスする

<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

は、トリッキーですおよび/またはブラウザはまだ新しいレイアウトを行っていない。

アップデートが完了するまで延期する使用$nextTick()：

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

この通常少なくとも物事のVueの側では、このような状況でトリックを行います。 chart.jsの設定についてはあまり言い表せません。