页面加载时的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呈现问题

回答

相关问题