タイムアウトを設定しない限り、Chart.jsはレンダリングされません

Question

この問題は同じです：Chart.js not showing in my view、彼はタイムアウトを設定するように解決しましたが、私のウェブでは紹介することすらできません。時間切れで作業したいです。私はchart.jのWebコンポーネントを作成しようとしています。タイムアウトを設定せずにレンダリングするためにチャートを待つ方法はありますか？待ち時間はレンダー時間です。

Myコードは次のとおり

flexygo.ui.wc.flxChart = function() { 

    return { 
     htmlItem: null, 

     moduleId: null, 

     refresh: function() { 

      this.init(); 
     }, 



     init: function() { 
      var ctx = this; 

      ctx.htmlItem.html('<canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas>'); 

      ctx.render(); 
     }, 
     render: function() { 
      var ctx = this; 


      var data = { 
       labels: ["January", "February", "March", "April", "May", "June", "July"], 
       datasets: [{ 
        label: "My First dataset", 
        fill: false, 
        lineTension: 0.1, 
        backgroundColor: "rgba(75,192,192,0.4)", 
        borderColor: "rgba(75,192,192,1)", 
        borderCapStyle: 'butt', 
        borderDash: [], 
        borderDashOffset: 0.0, 
        borderJoinStyle: 'miter', 
        pointBorderColor: "rgba(75,192,192,1)", 
        pointBackgroundColor: "#fff", 
        pointBorderWidth: 1, 
        pointHoverRadius: 5, 
        pointHoverBackgroundColor: "rgba(75,192,192,1)", 
        pointHoverBorderColor: "rgba(220,220,220,1)", 
        pointHoverBorderWidth: 2, 
        pointRadius: 1, 
        pointHitRadius: 10, 
        data: [65, 59, 80, 81, 56, 55, 40], 
        spanGaps: false, 
       }] 
      }; 
      window.onload = function() { 
        var myChart = new Chart(ctx.htmlItem[0].childNodes[0], { 
        type: 'line', 
        data: data, 
        options: { 
         scales: { 
          xAxes: [{ 
           display: false 
          }] 
         } 
        } 
       }); 
      } 
     }, 

     translate: function (str) { 
      return flexygo.localization.translate(str); 
     }, 
     startLoading: function() { 
      this.htmlItem.parents('flx-module').find('.icon-sincronize').addClass('icon-spin txt-outstanding'); 
     }, 
     stopLoading: function() { 
      this.htmlItem.parents('flx-module').find('.icon-sincronize').removeClass('icon-spin txt-outstanding'); 
     }, 

    } 

は、我々が使用できるグラフを作成するいずれかhtmlitem [0] .childnodes [0]又はのdocument.getElementById（ 'myChart2'）

Answer 1

私はcanvaが私のページをリサイズして、私は変わっ、それはdiv要素にcanvarをカプセル化する追加解決：

をから：

ctx.htmlItem.html('<canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas>'); 

ctx.htmlItem.html('<div><canvas id="myChart2" height="400" width="800" style="width:800px;height:400px;"></canvas></div>'); 

に、今では動作します