ページロード時のCharts.jsレンダリングの問題

Question

Charts.js折れ線グラフで奇妙な問題が発生しました。ページのロード時に

、何も<canvas>要素に表示されていないようにみえ：

しかし、意図したとおりあなたは、チャートが表示され、ブラウザウィンドウのサイズを変更後：

誰がこれを検出しました問題を修正して解決する方法を知っていますか？

私のグラフのJavaScriptは下になります。この問題を解決するために何らかの方法で変更する必要がある場合は、教えてください。

function drawLineChart() { 

var dates = []; 
var clientCosts = []; 

$.ajax({ 
    url: '../inc/wip-data.php', 
    dataType: 'json' 
}).done(function(data) { 
    data.forEach(function(item) { 
     dates.push(item.date); 
     clientCosts.push(item.clientCostsTotal); 
    }); 
}); 

console.log(dates, clientCosts); 

var chartData = { 
    labels: dates, 
    datasets: [{ 
     fillColor: "rgba(151,187,205,0.2)", 
     strokeColor: "rgba(151,187,205,1)", 
     pointColor: "rgba(151,187,205,1)", 
     pointHighlightStroke: "rgba(151,187,205,1)", 
     data: clientCosts 
    }] 
}; 

// Get the context of the canvas element we want to select 
var ctx = document.getElementById("myChart").getContext("2d"); 

// Instantiate a new chart 
var myChart = new Chart(ctx, { 
    responsive: true, 
    type: 'line', 
    data: chartData, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
      }] 
     } 
    } 
}); 
} 

drawLineChart(); 

This issue is not replicating in JS Bin. JSビンと私の地元のビルド間の唯一の違いは、データのためのAJAX呼び出しで、そのためには、AJAX呼び出しが問題を引き起こしているものであると信じて私をリードしています。この問題を呼び起こす可能性のあることについてのガイダンスは高く評価されます。

Answer 1

グラフが使用されるデータは、グラフの作成時には使用できません。これは、ajax呼び出しが非同期であり、ajax要求が完了したときにのみデータが使用可能になるためです。 チャートをすぐに表示できるようにするには、チャートを更新するために、データを入力した後にayaxコールの "done"関数でこのコールmyChart.update（）を使用する必要があります：

... 
data.forEach(function(item) { 
    dates.push(item.date); 
    clientCosts.push(item.clientCostsTotal); 
}); 
myChart.update();