頁面加載時的Charts.js呈現問題

我的Charts.js折線圖中出現了一個奇怪的問題。頁面加載時的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調用是什麼原因造成的問題。任何指導什麼可能被稱爲這個問題，將不勝感激。

來源

2016-09-15 Liz

圖表使用的數據在創建圖表時不可用。這是因爲ajax調用是異步的，並且僅當ajax請求完成時數據纔可用。爲了讓圖表立即可見，您需要在填充數據後使用此調用myChart.update（），在ajax調用的「完成」函數中，以便更新圖表：

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

來源

2016-09-15 06:25:12 Sergiu

現在的腳本是：'$阿賈克斯（{ 網址： '../inc/wip-data.php'，數據類型： 'JSON' }）。完成（功能（數據）{ data.forEach（function（item）{ dates.push（item.date）; clientCosts.push（item.clientCostsTotal）; myChart.update（）; }）; }）;' 它按預期工作。 – Liz

酷！很高興我能幫上忙！ – Sergiu

頁面加載時的Charts.js呈現問題

回答

相關問題