Chart.js折线图无法显示过去15天总营收数据求助

我已调试近2小时，想要用Chart.js展示过去15天营收的折线图。我编写了AJAX函数获取数据，以下是相关代码：

JS 数据获取脚本 #

// Function to fetch revenue data from PHP script
function fetchRevenueData() {
    $.ajax({
        url: '../config/tables/semi_weekly_revenue.php',
        dataType: 'json',
        success: function(data) {
            var revenueValues = labels.map(function(date) {
                return data[date] || 0; 
            });
        
            myLineChart.data.datasets[0].data = revenueValues;
            myLineChart.update();

        },
        error: function(xhr, status, error) {
            console.error('Error fetching revenue data:', error);
        }
    });
}

折线图初始化代码 #

// Area Chart Example
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels, 
        datasets: [{
            label: "Revenue",
            lineTension: 0.3,
            backgroundColor: "rgba(2,117,216,0.2)",
            borderColor: "rgba(2,117,216,1)",
            pointRadius: 5,
            pointBackgroundColor: "rgba(2,117,216,1)",
            pointBorderColor: "rgba(255,255,255,0.8)",
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(2,117,216,1)",
            pointHitRadius: 50,
            pointBorderWidth: 2,
            data: [],
        }],
    },
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'date'
                },
                gridLines: {
                    display: false
                },
                ticks: {
                    maxTicksLimit: 7
                }
            }],
            yAxes: [{
                ticks: {
                    min: 0,
                    max: 40000,
                    maxTicksLimit: 5
                },
                gridLines: {
                    color: "rgba(0, 0, 0, .125)",
                }
            }],
        },
        legend: {
            display: false
        }
    }
});

//The fetchRevenueData function will update the Linechart upon called.
fetchRevenueData();

PHP 查询脚本 #

// Query to fetch total revenue for each of the past 15 days
$query = "SELECT 
            DATE_FORMAT(sale_date, '%Y-%m-%d') AS date,
            SUM(total_amount) AS total_revenue
          FROM sales
          WHERE sale_date >= DATE_SUB(CURRENT_DATE(), INTERVAL 15 DAY)
          GROUP BY date
          ORDER BY date";

$stmt = $pdo->query($query);

// Fetch revenue data and populate the revenueData array
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    $revenueData[$row['date']] = $row['total_revenue'];
}

// Return revenue data as JSON
echo json_encode($revenueData);

我是否遗漏了什么？我查阅过数据传递相关文档，目前仍在学习JavaScript，恳请指点。我期望折线图能类似柱状图，展示过去15天的半周营收趋势。

1. 核心遗漏：labels 变量未定义 #

你的代码直接使用了labels数组，但没有生成逻辑——这是导致图表无数据的关键原因。需要先生成过去15天的日期序列，格式要和PHP返回的%Y-%m-%d完全匹配。

添加生成labels的代码（放在折线图初始化代码之前）：

// 生成过去15天的日期标签（格式YYYY-MM-DD）
function generateLast15DaysLabels() {
    const labels = [];
    const today = new Date();
    for (let i = 14; i >= 0; i--) {
        const date = new Date(today);
        date.setDate(today.getDate() - i);
        const formattedDate = date.toISOString().split('T')[0]; // 转为YYYY-MM-DD格式
        labels.push(formattedDate);
    }
    return labels;
}

// 初始化标签数组
const labels = generateLast15DaysLabels();

2. 补全PHP数据的空值处理 #

如果某天没有销售记录，SUM(total_amount)会返回NULL，PHP转JSON后会变成null，可以在PHP里提前转为0，避免JS处理异常：

$revenueData[$row['date']] = (float)$row['total_revenue'] ?? 0;

3. 适配Chart.js轴配置 #

从代码看你用的是Chart.js v2版本，注意两个点：

• 如果没引入moment.js，time配置会失效，建议去掉time配置，直接用字符串日期作为标签；
• 若要显示全部15天的日期，修改X轴的ticks配置：

xAxes: [{
    gridLines: {
        display: false
    },
    ticks: {
        maxTicksLimit: 15, // 显示全部15天标签
        autoSkip: false // 强制不跳过标签
    }
}]

4. 实现“半周营收趋势”的调整 #

如果“半周”指每周分为两段（如周一至周三、周四至周日），可以修改PHP查询按半周分组：

// 按半周分组统计营收
$query = "SELECT 
            CASE 
                WHEN DAYOFWEEK(sale_date) IN (2,3,4) THEN CONCAT(DATE_FORMAT(sale_date, '%Y-%U'), '_上半周')
                ELSE CONCAT(DATE_FORMAT(sale_date, '%Y-%U'), '_下半周')
            END AS period,
            SUM(total_amount) AS total_revenue
          FROM sales
          WHERE sale_date >= DATE_SUB(CURRENT_DATE(), INTERVAL 15 DAY)
          GROUP BY period
          ORDER BY period";

同时JS里的labels要改为PHP返回的period字段，或者直接在AJAX回调里动态更新图表的labels：

success: function(data) {
    // 提取半周时间段作为标签
    const periodLabels = Object.keys(data);
    // 提取对应营收数据
    const revenueValues = Object.values(data);
    
    myLineChart.data.labels = periodLabels;
    myLineChart.data.datasets[0].data = revenueValues;
    myLineChart.update();
}

5. 调试步骤 #

• 打开浏览器控制台（F12），查看AJAX请求的响应数据，确认PHP返回的JSON格式正确；
• 在JS的success回调里打印data和revenueValues，检查数据映射是否正确；
• 确认document.getElementById("myAreaChart")返回的不是null，确保图表容器存在。

内容的提问来源于stack exchange，提问作者Venz Olarte