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 Bin和我的本地构建之间的唯一区别是对数据的AJAX调用，这使我相信AJAX调用是导致问题的原因。任何关于可能称这个问题的指导都将受到赞赏。

Answer 1

创建图表时，图表使用的数据不可用。这是因为ajax调用是异步的，只有在ajax请求完成时数据才可用。为了使图表立即可见，您需要在填充数据后在ajax调用的“done”函数中使用此调用 myChart.update（），以便更新图表：

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

页面加载时Charts.js呈现问题

1 个答案: