Charts.js Rendering Problem beim Laden der Seite

Question

Ich habe ein seltsames Problem mit meiner Charts.js Liniendiagramm.

Auf Seite zu laden, scheint nichts mehr im <canvas> Elemente sichtbar zu sein:

Allerdings, wenn Sie die Browser-Fenster Größe ändern, die Grafik zeigt, wie beabsichtigt:

Hat jemand anderes diese angetroffen Problem und wissen, wie man es beheben kann?

Das JavaScript für meine Tabelle ist unten. Bitte lassen Sie mich wissen, wenn ich es irgendwie ändern muss, um dieses Problem zu beheben.

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. Der einzige Unterschied zwischen dem JS Bin und meinem lokalen Build ist der AJAX-Aufruf für die Daten, so dass ich führt der Ajax-Aufruf ist zu glauben, was das Problem verursacht. Jede Anleitung zu dem, was dieses Problem verursachen könnte, wäre willkommen.

Answer 1

Die vom Diagramm verwendeten Daten sind nicht verfügbar, wenn das Diagramm erstellt wird. Dies liegt daran, dass der Ajax-Aufruf asynchron ist und die Daten erst verfügbar werden, wenn die Ajax-Anforderung abgeschlossen ist. Um das Diagramm sofort sichtbar zu machen, müssen Sie diesen Aufruf myChart.update() in der Funktion "done" des Ajax-Aufrufs verwenden, nachdem Sie die Daten aufgefüllt haben, um das Diagramm zu aktualisieren:

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